/* color variables */

:root {
    --light-moss-green: #606C38;
    --dark-moss-green: #283618;
    --cornsilk: #FEFAE0;
    --dark-beige: #DDA15E;
    --light-brown: #BC6C25;
}

/* html {
    font-size: 100%;
    @media only screen and (max-width: 720px) { font-size: 75%; }
    @media only screen and (max-width: 430px) { font-size: 62.5%; }
} */

html {
    font-size: 100%;
}
@media only screen and (max-width: 720px) {
    html { font-size: 75%; }
}
@media only screen and (max-width: 430px) {
    html { font-size: 62.5%; }
}

/* global settings */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: "Pangolin", cursive;
    text-align: center;
    color: var(--dark-moss-green);
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    display: flex;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section, footer {
    padding: 3rem;
    border-top: 5px dashed var(--dark-moss-green);
}

h2 {
    font-family: "Indie Flower", cursive;
    font-weight: bold;
    font-size: 3rem;
    padding: 3rem 0;
    letter-spacing: 0.25rem; 
    font-weight: bold;  
    color: var(--cornsilk);
}

.section h3 {
    font-size: 1.75rem;
    padding: 1.5rem 0 1rem;
}

.section p {
    font-size: 1.25rem;
}

/* offset for header */

main {
    margin-top: 5.25rem;
}

@media only screen and (max-width:539px) {

  main {
    margin-top: 6.5rem;
}  
}

/* header */

header {
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-moss-green);
    padding: 0.5rem 2rem;
    border-bottom: 5px dashed var(--dark-moss-green);
    z-index: 10;
    background-color: #606c38;
}

.logo {
    font-family: "Festive", cursive;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px var(--cornsilk);
}

nav ul {
    display: flex;
    margin: 0.5rem 0;
}

nav ul li {
    margin-left: 3rem;
}

nav ul li a {
    font-family: "Indie Flower", cursive;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #FEFAE0aa;
    border-radius: 0.75rem;
    border: 1px solid var(--dark-moss-green);
    padding: 0 1rem;
    display: flex;
}

nav ul li a:hover {
    box-shadow: 0 0 10px 5px var(--cornsilk);
}

.mobile {
    display: none;
}

@media only screen and (max-width:960px) {

    nav ul li {
        margin-left: 1rem;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }
}



/* main */

main img {
    border-radius: 1rem;
}

/* mission */

#mission .hero {
    height: 35rem;
    background-image: url("herobackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    justify-content: center;
}

#mission .hero-text {
    background-color: #FEFAE077;
    width: 60%;
    padding: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    border-radius: 8rem;
    max-width: 50rem;
}
#mission .hero-text a {
    font-size: 1.25rem;
    font-weight: bold;
}

#mission .hero-text a:hover {
    color: var(--cornsilk);
}

#mission h1 {
    font-family: "Indie Flower", cursive;
    font-weight: bold;
    font-size: 3.5rem;
}

#mission p {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 1rem;
}

/* destinations */

#destinations, #training-ground {
background-color: var(--light-moss-green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%23fefae0' fill-opacity='0.05' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
}

#destinations h2 {
    color: var(--cornsilk);
}

#destinations .destination-cards {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#destinations .destination-card {
    background-color: var(--cornsilk);
    padding: 1rem;
    margin: 2rem 1rem;
    flex-direction: column;
    flex-basis: 45%;    
    min-width: 35rem;
    border-radius: 2rem;
    border: 2px dashed var(--dark-moss-green);
}

#destinations .destination-card:hover {
    transform: scale(1.1);
    cursor: pointer;
}

@media only screen and (max-width:1300px) {

    #destinations .destination-card {
        flex-basis: 75%;
    }  
}

@media only screen and (max-width:700px) {
    #destinations .destination-card {
        flex-basis: 100%;
        min-width: 1rem;
        margin: 0.75rem 0;
    }

    #destinations .section {
        padding: 0.5rem 0;
    }

    #destinations .destination-card:hover {
    transform: none;
    cursor: pointer;
    }
}

@media only screen and (max-width:360px) {
#mission .hero {
    height: 40rem;
}

}


/* team */

#team {
    background-color: var(--light-moss-green);
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fefae0' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#team .team-cards {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#team .team-card {
    background-color: antiquewhite;
    padding: 1rem;
    margin: 2rem 2rem;
    width: 20rem;
    flex-direction: column;
    border-radius: 2rem;
    border: 2px dashed var(--dark-moss-green);
}

/* training ground */

#training-ground {
    background-color: var(--light-moss-green);
}

.training-ground-box {
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ogre space */
.ogre-space {
    width: 20rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cornsilk);
    border-radius: 1rem;
    border: 2px dashed var(--dark-moss-green);
    padding: 0 1rem;
    margin: 2rem 0;
}

.img-container {
    width: 100%;
    height: 20rem;
    overflow: hidden;
    border-radius: 1rem;
}

.ogre-space img {
    border-radius: 0rem;
    height: 20rem;
    max-width: 100%;
}

.ogre-space p, .ogre-space h3 {
    font-weight: bold;
    font-size: 2rem;
    padding: 0.5rem 0;
}

/* buttons */
.button-space {
    flex-direction: column;
    justify-content: center;
    margin: 2rem 0;
}

button {
    font-size: 2rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--cornsilk);
    border: 2px dashed var(--dark-moss-green);
    border-radius: 1rem;
    margin: 0.5rem;
}

button:hover {
    color: var(--cornsilk);
    cursor: pointer;
    background-color: var(--dark-moss-green);
    border: 2px dashed var(--cornsilk);
}

button:active {
    transform: scale(0.95);
}


/* player space */

.player-space {
    width: 50%;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 5%;
    background-color: var(--cornsilk);
    border-radius: 1rem;
    border: 2px dashed var(--dark-moss-green);
    margin: 2rem 0;
    align-items: center;
}

.player-space p {
    font-size: 2rem;
    font-weight: bold;
}

#resetBtn {
    width: 10rem;
}

@media only screen and (max-width: 1050px) {
    .training-ground-box {
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }

    .button-space {
        flex-direction: row;
    }

    .player-space, .button-space, .ogre-space {
        margin: 0;
    }

    #infoField {
        margin-bottom: 0.5rem;
    }

    .player-space {
        width: 70%;
    }
}

@media only screen and (max-width: 520px) {
    .training-ground-box {
        flex-direction: row;
        justify-content: center;
    }

    .button-space {
        flex-direction: column;
    }

    .player-space {
        width: 80%;
        margin-top: 1rem;
    }
}

@media only screen and (max-width: 440px) {
    .training-ground-box {
        flex-direction: column
    }

    .button-space {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
}

/* footer */

footer {
    background-color: var(--cornsilk);
    padding: 2rem;
    align-items: center;
}

footer ul li {
    margin-left: 3rem;

}

footer ul {
    flex: 1;
    justify-content: center;
    margin-right: 5rem;    
}

footer p {
    font-family: "Festive", cursive;   
    font-weight: bold; 
    font-size: 2rem;
}

@media only screen and (max-width:520px) {
    footer ul {
        flex-direction: column;
    }

    footer ul {
        margin-right: 2rem;
    }
}