@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Raleway&display=swap');

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    background-color: #fdfbfc;
    color: #3a3a3a;
    font-size: 1.2em;
}

/* headings and logo and hamburger icon */
h1,
h2 {
    font-family: 'Cinzel Decorative', 'Lucida Sans', sans-serif;
    font-weight: 900;
    color: #b99f65;
    text-shadow: 0 0 1px rgb(0, 0, 0.3);
}

h2 {
    font-size: 1.2em;
    text-align: center;
}

strong {
    color: #b99f65;
}

#logo {
    float: left;
    margin-left: 20px;
}

#menu-icon {
    float: right;
    margin-right: 20px;
}

#logo,
#menu-icon {
    padding: 2px;
    font-size: 1.2em;
    line-height: 65px;
}

/* nav links */
header {
    display: block;
    height: 4em;
    padding: 5px 0;
}

#nav-menu {
    clear: both;
    display: none;
    position: relative;
}

header,
#nav-menu {
    background-color: #2b2b2b;
}

#nav-menu li {
    text-align: center;
    list-style-type: none;
    padding: 10px 0;
    letter-spacing: 1px;
    font-size: 120%;
    font-weight: bolder;
}

#nav-menu a {
    text-decoration: none;
    color: #b99f65;
    padding: 0 5px;
    transition: all 0.2s ease-in-out;
}

#nav-menu a:hover {
    color: #fdfbfc;
    border-left: 3px solid #b99f65;
    border-right: 3px solid #b99f65;
}

#scroll-to-top-button {
    font-size: 2.2em;
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-decoration: none;
    color: #8fb7d9;
    cursor: pointer;
}

#scroll-to-top-button:hover {
    font-size: 2.5em;
}

/* hero image slideshow */
.hero-image {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* grids */
.grid {
    display: grid;
    /* 5% screen width columns on either side 90% middle */
    grid-template-columns: 1fr 18fr 1fr;
}

.heading,
.content,
hr {
    grid-column: 2/3;
}

.heading,
.content {
    justify-self: center;
    align-self: center;
    margin-top: 1em;
}

hr {
    border: 2px solid #b99f65;
    width: 60%;
    margin: auto;
}

/* introduction section */
.grid p {
    padding: 10px;
}

#circle-container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 50px;
}

#circle-portrait {
    background: url(../images/link-portrait.jpg) no-repeat center center;
    background-size: contain;
    height: 100%;
    border-radius: 50%;
}

/* gameplay section */
#gameplay-parallax {
    /* image source https://switchrpg.com/articles/zelda-breath-of-the-wild-scenic-desktop-wallpaper-collection/ */
    background-image: url(../images/botw-background-image.jpg);
    background-repeat: no-repeat;
    min-height: 1500px;
    /* fixes bg image in place for parallax scroll effect */
    background-attachment: fixed;
    background-position: center;
    border-top: 5px outset #b99f65;
    border-bottom: 5px outset #b99f65;
}

#gameplay-parallax .content {
    color: #fdfbfc;
    border-radius: 25px;
    text-align: center;
    background-color: #3a3a3a70;
    padding: 5px;
    margin: 1em 0;
}

/* details section */
#purchase-details .grid {
    row-gap: 2px;
    column-gap: 2px;
}

#purchase-details p {
    padding: 5px 0;
}

.details-card {
    background-color: #2b2b2b;
    color: #fdfbfc;
    grid-column: 1/5;
    padding: 5px 5vw;
}

/* Every other card has darker/lighter bg */
.details-card:nth-child(odd) {
    background-color: #3a3a3a;
}

#buy-now-card {
    text-align: center;
    padding: 20px 0;
    background-color: #b99f65;
    grid-column: 2/3;
    margin: 50px 0 20px 0;
    border-radius: 25px;
}

#buy-now-card:hover {
    box-shadow: 0 0 20px #2b2b2b;
    font-size: 120%;
}

#buy-now-card h2 {
    color: #fdfbfc;
}

#buy-now-card a {
    text-decoration: none;
    font-size: 1.5em;
}

/* newsletter section */
.newsletter-form {
    max-width: 300px;
}

.text-input,
.date-input {
    border: 2px solid #3a3a3a70;
    border-radius: 8px;
    font-size: .8em;
    margin: 10px 0;
    padding: 5px;
}

.text-input:hover,
.date-input:hover {
    border: 2px solid #8fb7d9;
    border-radius: 8px;
}

/* removes outline on input fields when selected which is default on chrome */
textarea:focus,
input:focus {
    outline: none;
}

.submit-btn {
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #b99f65;
    border: 5px solid #fdfbfc;
    border-radius: 8px;
    font-size: 1em;
    color: #fdfbfc;
}

.submit-btn:hover {
    border: 5px solid #b99f65;
    background-color: #fdfbfc;
    color: #b99f65;
    cursor: pointer;
}

/* footer */
footer {
    background-color: #2b2b2b;
    color: #fdfbfc;
    padding-bottom: 20px;
}

.socials li {
    display: inline;
    list-style: none;
}

.socials a {
    text-decoration: none;
    color: #b99f65;
    font-size: 120%;
    margin: 0 2vw;
}

.copyright>p {
    padding: 0 0;
}

.copyright a {
    text-decoration: none;
    color: #b99f65;
}

.copyright a:hover {
    color: #8fb7d9
}

/* media queries (breakpoints chosen in line with bootstrap standards) */
/* for screens above 370px */
@media screen and (min-width: 370px) {

    /* adjust font size of logo as screen size increases */
    #menu-icon,
    #logo {
        font-size: 1.4em;
    }

    #circle-container {
        width: 250px;
        height: 250px;
    }
}

/* for medium to large screens 768px and up */
@media screen and (min-width: 768px) {
    h2 {
        text-shadow: 0 0 2px rgb(0, 0, 0.3);
    }

    /* nav links */
    #mobile-header-main {
        display: block;
    }

    /* remove menu icon as main navbar takes over */
    #menu-icon {
        display: none;
    }

    #nav-menu {
        clear: none;
        float: right;
        letter-spacing: 1px;
        font-size: 0.7em;
        line-height: 75px;

        /*reverse list direction to display in correct order */
        display: flex;
        flex-direction: row;
    }

    #nav-menu li {
        margin-right: 10px;
        padding: 0;
    }

    /* Fading animation taken from w3schools along with script for slideshow.
    Used to create fade in effect as hero image changes to next*/
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {
            opacity: .2
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: .2
        }

        to {
            opacity: 1
        }
    }

    /* grids */
    .grid {
        grid-template-columns: 1fr 6fr 2fr 1fr;
    }

    .heading,
    .underline {
        grid-column: 2/4;
        align-self: center;
    }

    .content {
        grid-column: 2/3;
    }

    /* introduction section */
    #introduction p {
        margin: 0;
    }

    #circle-container {
        grid-column: 3/4;
    }

    .underline {
        width: 50%;
    }

    /* gameplay section */
    #gameplay-parallax {
        /* splits grid into 3 main sections and 2 margin columns to retain same side margins as other sections*/
        grid-template-columns: 1fr repeat(3, 2.66fr) 1fr;
    }

    /* stagger position of every other item */
    #gameplay-parallax>.content:nth-child(odd) {
        grid-column: 2/4;
    }

    #gameplay-parallax>.content:nth-child(even) {
        grid-column: 3/5;
    }

    /* details section */
    #purchase-details .grid {
        grid-template-columns: 1fr 3fr 3fr 1fr;
    }

    #details-card-1 {
        grid-column: 1/3;
        padding: 5px 10px 5px 10vw;
    }

    #details-card-2 {
        grid-column: 3/5;
        padding: 5px 10vw 5px 10px;
    }

    #details-card-3 {
        grid-column: 1/5;
        padding: 5px 10vw;
    }

    #buy-now-card {
        grid-column: 2/4;
    }

    /* newsletter form */
    #newsletter {
        margin: 50px 0;
    }

    #newsletter .content {
        grid-column: 2/4;
    }

    .newsletter-form {
        max-width: 500px;
    }

    .text-input,
    .date-input {
        border: 2px solid #3a3a3a70;
        border-radius: 8px;
        margin: 15px 10px;
    }

    /* footer */
    footer .content {
        grid-column: 2/4;
    }
}

/* for large screens 1025px and up */
@media screen and (min-width: 1025px) {
    #logo {
        font-size: 2.2em;
    }

    #nav-menu {
        font-size: 0.8em;
    }

    #nav-menu li {
        margin-right: 15px;
    }

    /* resizes hero image to ensure content below appears above the page fold */
    .hero-image {
        width: 68%;
        border: 5px outset #b99f65;
    }

    /* grids */
    .grid {
        /* aligns grid to width of hero image container above taking up 68% screen width by leaving 16% either side */
        grid-template-columns: 16fr 51fr 17fr 16fr;
    }

    /* gameplay section */
    #gameplay-parallax {
        /* splits grid into 3 main sections and 2 margin columns to retain same side margins as other sections*/
        grid-template-columns: 16fr repeat(3, 22.66fr) 16fr;
    }

    #gameplay-parallax>.content:nth-child(odd) {
        grid-column: 2/4;
    }

    #gameplay-parallax>.content:nth-child(even) {
        grid-column: 3/5;
    }

    /* details section */
    #details-card-1 {
        padding-left: 16vw;
    }

    #details-card-2 {
        padding-right: 16vw;
    }

    #details-card-3 {
        padding-left: 16vw;
        padding-right: 16vw;
    }

    #buy-now-card {
        margin: 50px 10vw 20px 10vw;
    }
}