body {
    position: relative;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', san-serif;
    height: 100vh;
    background-color: rgb(230,230,230);
    }

/*Mobil First Start*/
@media only screen and (max-width:1000px){
    body {
        position: relative;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', san-serif;
    height: 100vh;
    background-color: rgb(230,230,230);
    }

    .header {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 6vw;
        background-color: rgb(245,245,245);
        display: flex;
        z-index: 10;
    }

    .logolink {
        position: relative;
        padding: 0%;
        margin: 0%;
        height: 100%;
        background-color: black;
        border-radius: 0 0.5vw 0.5vw 0;
    }

    .logo {
        display: absolute;
        padding-top: 0%;
        padding-left: 0%;
        margin: 0.75vw;
        height: 4.0vw;
    }

    .header-menu {
        display: flex;
        position: absolute;
        right: 1%;
        height: 100%;
        /width: 35%;
        padding: 0%;
        margin: 0%;
        list-style-type: none;
        font-size: 3vw;
        vertical-align: middle;
        text-align: center;
    }

    .menubutton {
        height: 100%;
        width: 320px;
        text-decoration: none;
        vertical-align: middle;
        //padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
        justify-content: center;
        color: black;
    }

    .menubutton:hover {
        background-color: rgb(230,230,230);
        border-radius: 4em;
    }

    /* Start - Home Page */
    .home-page-grid {
        display: grid;
        grid-template-columns: 1fr minmax(10px, 500px) 1fr;
        grid-template-rows: 250px 300px;
        grid-gap: 10px;
        grid-template-areas:"a welcome c"
                            "d statement f";
    }

    .hero-image {
        height: 100%;
        width: 100%;
        background-image: url('images/homepage.jpg');
        background-size: cover;
        background-attachment: fixed;
        background-position: center top;
    }

    #Home-Welcome {
        grid-area: welcome;
        font-size: 45px;
        color: black;
        margin: auto;
        margin-top: 0%;
        text-align: center;
    }

    #statement {
        font-size: 30px;
        color: white;
        margin: auto;
        text-align: right;
        width: 80%;
        grid-area: statement;
    }
    /* End - Home Page */

    /* Start - Vacations */
    .vacations-grid {
        display: grid;
        grid-template-columns: 1fr 65vw 1fr;
        grid-template-rows: 10vw repeat(4, 85vw);
        grid-gap: 10px;
        grid-template-areas:    "a intro b"
                                "c card1 d"
                                "e card2 f"
                                "g card3 h";
    }

    .card {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 55% 10% 17% 10%;
        grid-gap: 5px;
        grid-template-areas:    "image"
                                "title"
                                "text"
                                "button";
        background-color: white;
        height: 100%;
        width: 100%;
        border-radius: 2vw;
    }

    .card-image {
        grid-area: image;
        height: 100%;
        background: white;
        width: 100%;
        margin: auto;
        border-radius: 5%;
    }

    .hey {
      position: absolute;
      height: 40vw;
      margin-top: 3vw;
      margin-left: 0vw;
      border-radius: 0%;
      transform: translate(7%);
    }

    .card-title {
        grid-area: title;
        background: white;
        height: 100%;
        width: 80%;
        margin: auto;
        font-size: 5vw;
    }

    .card-text {
        grid-area: text;
        background: white;
        height: 100%;
        width: 80%;
        margin: auto;
        font-size: 3.0vw;
    }

    .card-button {
        grid-area: button;
        background: rgb(0,191,255);
        margin: auto;
        width: 80%;
        height: 90%;
        text-align: center;
        font-size: 4.1vw;
        color: white;
        text-decoration: none;
        border-radius: 10vw;
    }

    .card-button:hover {
        width: 85%;
        height: 95%;
        font-size: 4.5vw;
    }

    .glacier-card {
        grid-area: card1;
        transform: translate(0%);
    }

    .yosemite-card {
        grid-area: card2;
        transform: translate(0%);
    }

    .cascades-card {
        grid-area: card3;
        transform: translate(0%);
    }
    /* End - Vacations */

    /* Start - summer2020 */
    #Summer2020-grid-container {
        display: grid;
        background: rgb(235, 235, 235);
        grid-template-columns: 1fr repeat(2, minmax(5%, 400px)) 1fr;
        grid-template-rows: 5vw 35vw 35vw 63vw 63vw 35vw 35vw;
        grid-gap: 2vw;
        grid-template-areas:
        "a b c d"
        "e title titlepic area6"
        "f pic1 caption1 g"
        "h caption2 pic2 i"
        "j pic3 caption3 k"
        "l caption4 pic4 m"
        "n pic5 caption5 o";
        margin: auto;
        justify-items: center;
    }
    #Fall2021-grid-container {
        display: grid;
        background: rgb(235, 235, 235);
        grid-template-columns: 1fr repeat(2, minmax(5%, 400px)) 1fr;
        grid-template-rows: 5vw 38vw 65vw 63vw 63vw 35vw 35vw;
        grid-gap: 2vw;
        grid-template-areas:
        "a b c d"
        "e title titlepic area6"
        "f pic1 caption1 g"
        "h caption2 pic2 i"
        "j pic3 caption3 k"
        "l caption4 pic4 m"
        "n pic5 caption5 o";
        margin: auto;
        justify-items: center;
        }
    #Yosemite-Title {
        text-align: right;
        font-size: 7vw;
        margin-top: 0%;
        grid-area: title;
    }
    #North-Cascades-Title {
        text-align: right;
        font-size: 5.5vw;
        margin-top: 0%;
        grid-area: title;
    }
    #titlepic {
        grid-area: titlepic;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic1 {
        grid-area: pic1;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic2 {
        grid-area: pic2;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic3 {
        grid-area: pic3;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic4 {
        grid-area: pic4;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic5 {
        grid-area: pic5;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #caption1 {
        grid-area: caption1;
        margin-top: 0%;
        font-size: 3.5vw;
    }
    #caption2 {
        grid-area: caption2;
        margin-top: 0%;
        font-size: 3.5vw;
    }
    #caption3 {
        grid-area: caption3;
        margin-top: 0%;
        font-size: 3.5vw;
    }
    #caption4 {
        grid-area: caption4;
        margin-top: 0%;
        font-size: 3.5vw;
    }
    #caption5 {
        grid-area: caption5;
        margin-top: 0%;
        font-size: 3.5vw;
    }
    /* End - summer2020 */
}
/*Mobil First End*/

/* Desktop */
@media only screen and (min-width:1001px){
    .header {
        position: relative;
        width: 100%;
        height: 50px;
        background-color: rgb(240,240,240);
    }

    .logolink {
        position: absolute;
        padding: 0%;
        margin: 0%;
        height: 100%;
        background-color: black;
        border-radius: 0 0.5vw 0.5vw 0;
        }

    .logo {
        display: absolute;
        padding-top: 0%;
        padding-left: 0%;
        margin: 7px;
        height: 35px;
    }

    .header-menu {
        display: flex;
            position: absolute;
            right: 1%;
            height: 100%;
            padding: 0%;
            margin: 0%;
            list-style-type: none;
            font-size: 3vw;
            vertical-align: middle;
            text-align: center;
    }

    .menubutton {
        display: flex;
        width: 150px;
        font-size: 30px;
        text-decoration: none;
        vertical-align: middle;
        padding-left: 1em;
        padding-right: 1em;
        justify-content: center;
        color: black;
    }

    .menubutton:hover {
        background-color: rgb(230,230,230);
        border-radius: 4em;
    }

    .hero-image {
        height: 100%;
            width: 100%;
            background-image: url('images/homepage.jpg');
            background-size: cover;
            background-attachment: fixed;
            background-position: center top;
    }

    .home-page-grid {
        display: grid;
        grid-template-columns: 1fr 700px 1fr;
        grid-template-rows: 100px 650px;
        grid-gap: 10px;
        grid-template-areas:"a welcome c"
                            "d statement f";
    }

    #Home-Welcome {
        width: 100%;
        font-size: 55px;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        grid-area: welcome;
    }

    #statement {
        width: 100%;
        margin: auto;
        color: white;
        font-size: 60px;
        grid-area: statement;
        margin-bottom: 0%;
    }

    /* Start - Vacations */
    .vacations-grid {
        display: grid;
        grid-template-columns: 1fr 300px 300px 300px 1fr;
        grid-template-rows: 10vw repeat(4, 500px);
        grid-gap: 20px;
        grid-template-areas:    "a intro b c d"
                                "e card1 card2 card3 f"
                                ;
    }

    .card {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 50% 10% 20% 10%;
        grid-gap: 5px;
        grid-template-areas:    "image"
                                "title"
                                "text"
                                "button";
        background-color: white;
        height: 100%;
        width: 100%;
        border-radius: 20px;
    }

    .card-image {
        grid-area: image;
        height: 100%;
        background: white;
        width: 100%;
        margin: auto;
        border-radius: 5%;
    }

    .hey {
      position: absolute;
      height: 180px;
      margin: auto;
      padding: 25px;
      border-radius: 10%;
    }

    .card-title {
        grid-area: title;
        background: white;
        height: 100%;
        width: 80%;
        margin: auto;
        font-size: 25px;
    }

    .card-text {
        grid-area: text;
        background: white;
        height: 100%;
        width: 80%;
        margin: auto;
        font-size: 15px;
    }

    .card-button {
        grid-area: button;
        background: rgb(0,191,255);
        margin: auto;
        width: 80%;
        height: 90%;
        text-align: center;
        font-size: 30px;
        color: white;
        text-decoration: none;
        border-radius: 25px;
    }

    .card-button:hover {
        width: 85%;
        height: 95%;
        font-size: 32px;
    }

    .glacier-card {
        grid-area: card1;
        transform: translate(0%);
    }

    .yosemite-card {
        grid-area: card2;
        transform: translate(0%);
    }

    .cascades-card {
        grid-area: card3;
        transform: translate(0%);
    }
    /* End - Vacations */

    /* Start - summer2020 */
    #Summer2020-grid-container {
        display: grid;
        background: rgb(235, 235, 235);
        grid-template-columns: 1fr repeat(2, 300px) 1fr;
        grid-template-rows: 5vw 250px 250px 400px 400px 250px;
        grid-gap: 30px;
        grid-template-areas:
        "a b c d"
        "e title titlepic area6"
        "f pic1 caption1 g"
        "h caption2 pic2 i"
        "j pic3 caption3 k"
        "l caption4 pic4 m"
        "n pic5 caption5 o";
        margin: auto;
        justify-items: center;
    }
    #Fall2021-grid-container {
        display: grid;
        background: rgb(235, 235, 235);
        grid-template-columns: 1fr repeat(2, 300px) 1fr;
        grid-template-rows: 5vw 250px 390px 400px 400px 250px 300px;
        grid-gap: 30px;
        grid-template-areas:
        "a b c d"
        "e title titlepic area6"
        "f pic1 caption1 g"
        "h caption2 pic2 i"
        "j pic3 caption3 k"
        "l caption4 pic4 m"
        "n pic5 caption5 o";
        "q caption6 pic6 r"
        "s pic7 caption7 t"
        margin: auto;
        justify-items: center;
    }
    #Yosemite-Title {
        display: block;
        text-align: right;
        font-size: 55px;
        margin-top: 0%;
        grid-area: title
    }
    #North-Cascades-Title {
        display: block;
        text-align: right;
        font-size: 35px;
        margin-top: 0%;
        grid-area: title
    }
    #titlepic {
        grid-area: titlepic;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic1 {
        grid-area: pic1;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic2 {
        grid-area: pic2;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic3 {
        grid-area: pic3;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic4 {
        grid-area: pic4;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #pic5 {
        grid-area: pic5;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5%;
    }
    #caption1 {
        grid-area: caption1;
        margin-top: 0%;
        font-size: 20px;
    }
    #caption2 {
        grid-area: caption2;
        margin-top: 0%;
        font-size: 20px;
    }
    #caption3 {
        grid-area: caption3;
        margin-top: 0%;
        font-size: 20px;
    }
    #caption4 {
        grid-area: caption4;
        margin-top: 0%;
        font-size: 20px;
    }
    #caption5 {
        grid-area: caption5;
        margin-top: 0%;
        font-size: 20px;
    }

    /* End - summer2020 */
}
/* Desktop End */