body{
    margin:0;
    padding:0;
    height:100%;
}
*{
    box-sizing: border-box;
}

nav{
    background: #412f65;
    padding: 20px;
    text-align: center;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li {
    display: inline;
    text-align: center;
    margin-right: 20px;
}

nav ul li a:hover {
	background-color: #d0d0d0;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif
}
h1, h2 {
    font-family: Cambria, Cochin, Georgia, Times, 
}
/* below 1000px - smaller desktops, tablet, mobile*/

a {
    text-decoration: 0;
    padding: 10px 20px;
    color: #000000;
    background: #F1E4F6;
    display: inline-block;
    width: 130px;
    border-radius: 25px;
}

.featured{
    width: 100vw;
    background: #A89AC5;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

h1, h2, p {
    width: 40%;
    padding: 20px;
    background: #F1E4F6;
    border-radius: 25px;
    margin: 30px;
    text-align: center;
}


.navigate {
    grid-column-end: span 12;
}

p{  
    width: 90%;
    font-size: 1.25rem;
    height: 75px;
    grid-column: 6/13;
    margin: 0;
    transform: translate(-22%, 34%)
}

h1 {
    font-size: 2.5rem;
    border: solid #1E1E1E 5px;
    grid-column: 1/13;
}

.image, .image2 {
    width: 45%;
    height: auto;
    display: block;
    margin: 0;
    border: solid #1E1E1E 13px;
    border-radius: 50px;
    grid-column: 2/7;
}
image {
    grid-row: 2;
}
.image2 {
    grid-row: 4;
    margin-bottom: 10%;
}

.disc, .disc2, .email, .email2 {
    grid-column: 7/13;
    width: 95%;
    font-size: 1.25rem;
}

.disc {
     grid-row: 2;
}
.disc2{
    grid-row: 3;
    transform:translate(0%, -115%);
    text-decoration:underline;
}

.email{
    grid-row:4;
}
.email2{
    grid-row:5;
    transform:translate(0%, -178%)
}
/* 1000px+ desktop */
@media only screen and (min-width: 1400px) {
    a {
        width: 160px;
        font-size: 1.5rem;
    }
    p {
        height: 135px;
    }
}

@media only screen and (min-width:600px){
    p {
        width: 20px;
        transform:translate(0, 0)
    }
}
/* below 600 - mobile */
@media only screen and (max-width:600px){
    nav{
        padding: 30px
    }
    a{
        padding: 10px;
        width: 119px;
    }
    p{
        font-size: 1rem;
        width: 500px;
        transform: translate(-26%, 0%)
    }
}