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

nav{
    background: rgb(124, 124, 124);
    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;
}

/* below 1000px - smaller desktops, tablet, mobile*/

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

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

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

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

p {  
    width: 90%;
    font-size: 1.25rem;
    grid-column: 8/12;
}
h1, .who {
    font-size: 2.5rem;
    border: solid #696969 5px;
    grid-column: 1/8;
    width: 80%;
}
.center, .image, .calender{
    width: 57%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 45px;
    border: solid #696969 13px;
    border-radius: 50px;
    grid-column: span 12;
    grid-row: 2;
}

.image, .calender {
    width:90%;
    grid-row: 2;
    grid-column: 7/13
}

.image{
    width: 120%;
    grid-column: 6/11
}
h2 {
    grid-column: 2/7;
    grid-row: 3;
    height: 40%;
    width: 70%;
    font-size: 2.2rem;
}
.day {
    grid-row: 3;
    grid-column: 2/7;
    transform: translate(0%, -571%)
}
.end{
    grid-row: 5;
    grid-column: 2/7;
    height: 60%;
    transform: translate(0%, -553%)
}
.joinus {
    grid-row: 3;
    grid-column: 1/6;
    width: 500px;
    height: 125px;
    font-size: 1.5rem;
    transform:translate(0%, -193%)
}

.aboutus {
    height: min-content;
    grid-column: 1/6;
    font-size: 1.75rem;
    grid-row:2;
    margin-left:70px;
}

.what {
    grid-column: 1/7;
    grid-row:3;
    font-size:1.75rem;
    transform:translate(9%,-347%)
}
.endtxt {
    transform: translate(-168%, -63%)
}
.daytxt {
    transform: translate(-168%, 218%)
}
/* 1400px+ larger desktop */
@media only screen and (min-width: 1000px) {
    a {
        width: 160px;
        font-size: 1.25rem;
    }
}

/* below 1000 = tablet & mobile */
@media only screen and (max-width: 989px) {
     .center{ 
    width: 60%;
    }
    nav{
        padding: 30px
    }
    a{
        padding: 15px;
        width: 140px;
    }
    h1 {
        width: 80%;
        font-size: 3rem;
    }
    p {
    width: 80%;
    font-size: 1.5rem;
    }
    .joinus{
        font-size: 1.25rem
    }
    .aboutus {
        font-size: 1.25rem;
    }
.calender{
    grid-row: 12;
    grid-column:2/12;
}
    h1 {
        grid-column: 3/12;
    }
    h2 {
        height:min-content;
    }
    .day {
        grid-row: 2;
        grid-column: 4/12;
        transform: translate(0, 0);
    }
    .daytxt {
        grid-row:3;
        grid-column:4/10;
        transform:translate(0,0);
        width: 500px;
    }
     .end {
        grid-row: 4;
        grid-column: 4/12;
        transform: translate(0, 0);
    }
    .endtxt {
        grid-row:5;
        grid-column:4/10;
        transform:translate(0,0);
        width: 500px;
    }
}
@media only screen and (min-width:990px){
    .aboutus{
        margin-left:auto;
    }
    .what{
        transform: translate(5%, -1395%)
    }
    .joinus{
        transform: translate(19%, -752%);
    }
}