/************/
/*** TEXT ***/
/************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html { font-size: 62.5%; }
body { font-family: 'Poppins', sans-serif; }
h1 { font-size: 3rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 2rem; }

p {
    font-size: 1.8rem;
    padding-bottom: 2.2rem;
}

li,
button,
label,
input {
    font-size: 2rem;
    list-style: none;
}

h2.interior-title {
    text-align: center;
    padding-top: 5%;
    padding-bottom: 1%;
}

a {
    color: #fff;
    /* all links on dark background */
    text-decoration: none;
    /* remove underline */
}

/************/
/*** PADDING ***/
/***************/
#setup h3,
#play h3,
#adjust h3 {
    padding: 3rem 0;
    /* space out paragraphs without indenting */
}

/***************/
/*** BUTTONS ***/
/***************/

button {
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 2rem 2rem;
    background: #4c6e97;
    border: none;
    border-radius: 5px 20px 5px;
    color: white;
    font-size: 2.4rem;
    cursor: pointer;
    /* cursor becomes pointer shape when over a button */
    transition: background 0.5s ease-in-out;
    /* transition specs for the button hover below */
    /* call the animation declared later in CSS file */
    animation: buttonAnimation 3s infinite alternate;
    /* smooth and continuous animation */
}

button:hover {
    background: #27394e;
}

button.instruction {
    font-size: 1.6rem;
    padding: 3px;
    background: saddlebrown;
    border-radius: 3px;
    transition: none;
    animation: none;
    margin-top: 0;
    margin-bottom: 0;
}

/*************/
/*** CARDS ***/
/*************/

.cards {
    /* width: 90%; */
    /* margin: auto; */
    display: flex;
    min-height: 45vh;
    align-items: center;
    flex-wrap: wrap;
}

.cards-with-bullets ul li {
    font-size: 1.5rem;
}

.card {
    text-align: center;
    flex: 1 1 25rem;
    min-height: 35vh;
    margin: 2rem 1.4rem;
}

.card {
    box-shadow: 0px 10px 10px rgba(0, 0, 255, .1), 0px 20px 20px rgba(255, 255, 255, .1);
}

.card-dark {
    box-shadow: 0px 10px 10px rgba(40, 40, 10, .6), 0px 20px 20px rgba(255, 255, 255, .1);
}

.card-icon {
    background: violet;
}

.card img {
    max-width: 15%;
    margin: 1rem;
}

.card h4 {
    padding: 2rem 2.5rem;
    font-size: 1.8rem; /* affects footer cards */
}

/*************************/
/* NAV SECTION WITH HERO */
/*************************/

.main-head {
    color: #fff;
    background: #131c27;
    /* dark background => text in main head needs to be light */
    /* format for sticky header follows */
    position: sticky;
    /* makes nav bar sticky so menu is available when further down page */
    top: 0px;
    /* with sticky setting, it keeps nav to the top of page */
    z-index: 3;
    /* makes sure nav is overtop of clouds or backgrounds in each section */
}

nav {
    display: flex;
    /* makes contents flow in a line */
    width: 90%;
    /* brings it away from side edges */
    margin: auto;
    /* centres the nav */
    padding: 2rem;
    /* keeps header to a good-looking 10vh min height */
    min-height: 10vh;
    /* decisive nav bar height; required for formatting that fills screen */
    /* without a min-height, small browser window would squash the header badly */
    align-items: center;
    /* logo centred vertically */
    flex-wrap: wrap;
    /* adds wrapping needed for mobile browsers */
}

nav ul {
    display: flex;
    /* both the nav & UL need to be 'flex' */
    flex: 2 1 40rem;
    /* flex size (width) for nav items side of nav bar */
    /* bigger flex grow here works best with lower number for #logo below */
    /* flex grow = 1 is safe for both */
    justify-content: space-around;
    /* evenly spaced items within nav UL */
    align-items: center;
    /* nav links centred vertically */
    list-style: none;
    /* remove bullet points */
}

#logo {
    flex: 1 1 40rem;
    /* flex size (width) for logo/brand side of nav bar */
    font-family: 'Norwester', sans-serif;
    font-weight: 400;
}

.hero {
    min-height: 100vh;
    /* template was 90vh */
    /* hero section occupies 90% of screen; nav bar uses 10% */
    /* background: linear-gradient(rgba(0, 0, 0, .7), transparent),
        url('../icons/hero-knob.png'); */
    background: linear-gradient(rgba(218, 165, 32, .5), transparent);
    /* gradient lets text be more visible w/o covering whole photo */
    background-repeat: no-repeat;
    background-size: cover;
    /* cover zooms in so photo fills the container */
    background-position: center;
    /* many options available for what portion of photo to emphasize */
    color: black;
    display: flex;
    /* gives flex abilities to the text or other contents */
    flex-direction: column;
    /* vertical flow unlike nav which is horizontal flow by default */
    justify-content: center;
    /* centre elements vertically as a block */
    align-items: center;
    /* centre elements horizontally */
    text-align: center;
    /* centre text within its container */
    margin: auto;
    /* centres child item to create padding within #locations parent */
    overflow: hidden;
    /* prevents edge items from overlapping with adjacent sections */
}

.hero-image {
    position: absolute;
    right: -40px;
    bottom: -10vh;
    max-height: 40vh;
    opacity: 50%;
}

.hero h2 {
    font-size: 4.5rem;
}

.hero h3 {
    padding: 5rem 0;
}

/**************************/
/*** SECTION FORMATTING ***/
/**************************/

section {
    position: relative;
    /* makes children accept position style */
    overflow: hidden;
    /* prevents items at edge from spreading into adjacent sections */
}

section .brand-image {
    position: absolute;
    right: -40px;
    top: 5vh;
    /* hides a bit and compensates for 10vh sticky header */
    max-height: 20vh;
    opacity: 50%;
    overflow: hidden;
}

/* background colours */
#setup {
    background: linear-gradient(rgba(255, 20, 147, .3), transparent);
}

#play {
    background: linear-gradient(rgba(0, 255, 127, .3),
            transparent);
}

#adjust {
    background: linear-gradient(rgba(218, 165, 32, .5),
            transparent,
            rgba(0, 255, 127, .3),
            transparent,
            rgba(255, 20, 147, .3),
            transparent);
}

#more {
    background: linear-gradient(rgba(218, 165, 32, .5),
            transparent);
}

#about {
    background: linear-gradient(rgba(79, 66, 181, .3),
            transparent);
}

/* background formatting */
#setup,
#play,
#adjust,
#more,
#about {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    /* add flexbox so we can move text from upper left default position */
    display: flex;
    align-items: center;
    /* centre child items as a group vertically */
    /* position: relative; */
    /* allows clouds to position within this section */
}

/* make room for sticky header */
.main-title {
    padding-top: 15vh;
}

/**********/
/*** SETUP SECTION ***/
/***********/

.setup-head {
    width: 90%;
    /* make smaller flexbox than parent element */
    margin: auto;
    /* centres child item to create padding within #locations parent */
    min-height: 100vh;
}

#setup .setup-wrapper {
    display: flex;
    flex-direction: column;
}

#setup h3 {
    font-size: 2.2rem;
}

/*******************/
/*** ICONS ORIGINALLY FOUND IN RECORDING SECTION ***/
/*************************/


.icon-wrapper {
    padding-right: 2rem;
    /* adds padding to the right of icon(s) */
}

.icon {
    flex: 1 1;
    height: 60px;
    margin: auto;
    /* move neighbours slightly right in case of multiple icons in a row */
    padding-right: .5rem;
}

/* not sure hte flexwrap stuff is working for mobile */

.icon-label {
    flex: 3 2 15rem;
}

.detail {
    display: flex;
    font-size: 2rem;
    flex: 10 1 50rem;
    align-items: center;
    /* vertically centres item to the previous child, I think */
    margin: auto;
}

@keyframes buttonAnimation {
    0% {
        background: fuchsia;
    }

    25% {
        background: rgb(170, 20, 200);
    }

    100% {
        background: rgb(250, 84, 186);
    }
}

/**********/
/*** PLAY SECTION ***/
/***********/

.play-head {
    width: 90%;
    /* make smaller flexbox than parent element */
    margin: auto;
    /* centres child item to create padding within #locations parent */
    min-height: 100vh;
}

#play .play-wrapper {
    display: flex;
    flex-direction: column;
}

#play h3 {
    font-size: 2.2rem;
}

/* TODO: create a 'record to computer' section */

/**********************/
/*** ADJUST SECTION ***/
/**********************/

.adjust-head {
    width: 90%;
    margin: auto;
    min-height: 100vh;
}

#adjust .adjust-wrapper {
    display: flex;
    flex-direction: column;
}


#adjust h3 {
    padding-bottom: 0;
}

.adjust-wrapper ul li {
    margin: 1rem 3rem;
    text-align: left;
    list-style: disc;
}

#adjust .card-icon img {
    max-height: 50px;
}

#adjust .cards-with-bullets {
    align-items: start;
    /* keep icons in line at top edge of row */
}

#adjust .inner-nav li {
    list-style: none;
}


#setup .inner-nav ul,
#play .inner-nav ul,
#adjust .inner-nav ul,
#about .inner-nav ul {
    /* styled after nav ul */
    display: flex;
    /* both the nav & UL need to be 'flex' */
    flex: 2 1 40rem;
    /* flex size (width) for nav items side of nav bar */
    /* bigger flex grow here works best with lower number for #logo below */
    /* flex grow = 1 is safe for both */
    justify-content: space-evenly;
    /* evenly spaced items within nav UL */
    align-items: center;
    /* nav links centred vertically */
    /* list-style: none; */
    /* remove bullet points */
}

/* button(s) at bottom */
#about .inner-nav {
    /* styled after nav */
    display: flex;
    width: 90%;
    /* brings it away from side edges */
    margin: auto;
    /* centres the nav */
    padding: 2rem;
    /* keeps header to a good-looking 10vh min height */
    min-height: 10vh;
    /* decisive nav bar height; required for formatting that fills screen */
    /* without a min-height, small browser window would squash the header badly */
    align-items: center;
    /* logo centred vertically */
    flex-wrap: wrap;
    /* adds wrapping needed for mobile browsers */
}

/************************/
/*** ABOUT & CONTACT SECTION ***/
/************************/

.about-head {
    width: 90%;
    margin: auto;
    min-height: 100vh;
}

#about h3 {
    font-size: 2.2rem;
}

.about-wrapper {
    width: 90%;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 15% 1fr;
    grid-template-rows:
        12rem 25rem;
    grid-template-areas:
        "about1 about3"
        "about2 about4";
    flex-direction: column;
    grid-gap: 2rem;
}

#about img {
    max-width: 60%;
    align-self: center;
}

#about a {
    color: rgb(170, 20, 200);
}

/* About Section boxes */

.about1 {
    grid-area: about1;
}

.about2 {
    grid-area: about2;
}

.about3 {
    grid-area: about3;
}

.about4 {
    grid-area: about4;
}


/******************/
/*** CONTACT ***/
/****************/

/* found in the About menu item to make nav bar simpler */

#contact {
    min-height: 100vh;
    background: linear-gradient(rgba(150, 220, 240, .8), rgba(0, 0, 0, .8)),
        url("../img/stones.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-wrapper {
    background: rgba(19, 28, 39, .8);
    width: 60%;
    color: white;
    border-radius: 20px;
}

.form-head {
    text-align: center;
    padding: 4rem;
}

.name-form,
.email-form {
    padding: 3rem;
    text-align: center;
}

.form-wrapper label {
    margin: 0rem 3rem;
}

.form-wrapper button {
    width: 100%;
    padding: 2rem;
    margin-top: 8rem;
    border-bottom-left-radius: 20px;
    /* makes curves match the container */
    border-bottom-right-radius: 20px;
}

.form-wrapper input {
    padding: 1rem 3rem;
}

/****************************/
/*** FOOTER - COMING SOON ***/
/****************************/

footer {
    color: white;
    background: rgba(19, 28, 39, 1);
    min-height: 100vh;
    display: flex;

}

.footer-head {
    width: 90%;
    /* make smaller flexbox than parent element */
    margin: auto;
}

.footer-wrapper {
    flex-wrap: wrap;
}

.bottom-footer-wrapper {
    width: 90%;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 40% 1fr 1fr 1fr;
    grid-template-rows:
        2rem 2rem 2rem;
    grid-template-areas:
        "footer1 footer4 footer7 footer10"
        "footer2 footer5 footer8 footer11"
        "footer3 footer6 footer9 footer12";
    flex-direction: column;
    grid-gap: 0;
    /* position the bottom icons */
    position: absolute; /* makes this container positionable */
    bottom: 0; /* fixes container to bottom */
}

footer img {
    max-width: 24px;
    align-self: center;
}

footer a {
    color: lightblue;
}

footer p {
    font-size: 1.2rem;
}

/* footer grid placements */

.footer1 { grid-area: footer1; }
.footer2 { grid-area: footer2; }
.footer3 { grid-area: footer3; }
.footer5 { grid-area: footer5; }
.footer8 { grid-area: footer8; }
.footer11 { grid-area: footer11; }

/*********************/
/*** MEDIA QUERIES ***/
/*********************/

@media screen and (max-width: 1150px) {
    li {
        font-size: 1.7rem;
        /* smaller font */
    }
}

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

    /* this is the width where nav items crows the nav bar */
    html {
        font-size: 45%;
    }

    nav {
        text-align: center;
        /* centre logo & nav links sections */
    }

    #logo {
        padding: 1rem;
    }

    .icon {
        height: 45px;
        /* move neighbours slightly right in case of multiple icons in a row */
    }

    .hero-image {
        opacity: 40%;
    }

    section .brand-image {
        max-height: 18vh;
        /* smaller for ipads etc */
        opacity: 40%;
    }

    .adjust-head ul {
        padding: 0 2rem;
    }

    #adjust .card {
        min-width: 250px;
    }


    .form-wrapper {
        width: 100%;
    }


    footer {
        text-align: center;
    }

    footer h5 {
        padding-bottom: 3rem;
    }

    footer .card {
        min-height: 20vh;
    }

}

@media screen and (max-width: 673px) {
    .hero-image {
        right: -56px;
        bottom: -10vh;
        max-height: 30vh;
        opacity: 40%;
    }

    section .brand-image {
        max-height: 15vh;
        /* smaller for ipads etc */
        opacity: 30%;
    }

    .more-wrapper {
        grid-template-rows:
            10rem 12rem 33rem;
        grid-template-areas:
            "para1 para1"
            "para2 para2"
            "para3 para3";
    }

    .about-wrapper {
        grid-template-rows:
            12rem 18rem 17rem;
        grid-template-areas:
            "about1 about1"
            "about2 about2"
            "about3 about3";
    }
}

@media screen and (max-width: 400px) {
    #adjust .card {
        width: 100%;
        margin: auto 0;
    }

    .recording-wrapper {
        flex-direction: column;
    }

    .icon {
        height: 25px;
    }
}