/* Should have flex box once */
/* Once media query */
/* #c2b7a2, #cfddd8, #2e2c2a*/
:root {
    /**/

    /* All */
    --general-text-color: #2e2c2a;


    /* Header */
    --header-color: white;
    --nav-link-color: #d1d1d1;
    
    /* Main container */
    --main-content-color: #cfddd8;

    /* Buy button */
    --buy-button-bg-color: #c2b7a2;
    --buy-button-text-color: #2e2c2a;
    
    /* Footer */
    --footer-color: #c2b7a2;
    --footer-txt-color: #2e2c2a;

}

/* blur in header 
drop shadow in header and button*/
* {
    font-size: 14px;
    color: var(--general-text-color);
    box-sizing: border-box;
    scroll-behavior: smooth;

}


html, body{
    height: 100%;
    
}

body {
    margin: 0px;
}

.container {
    overflow: hidden;
    min-height: 300px;
    width: 100%;
    height: 100%;
    background: var(--main-content-color);
    display: grid;
    grid-template-columns: 1fr;
    /* Why the shit did this break?
    grid-template-rows: 150px auto; */
    grid-template-areas:
        "header"
        "content"
}

.header {
    max-height: 150px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        "logo nav-bar"
}

.header-img-container {
    grid-area: logo;
    display: flex;
    justify-self: center;
    width: 100%;
    background-color: var(--header-color);
    
}

#header-img {
    width: 150px;
}

.nav-bar {
    grid-area: nav-bar;
    display: flex;
    justify-content: end;
    background-color: var(--header-color);    
    padding-right: 20px;
}

.nav-link {
    align-self: center;
    padding-left: 20px;
    font-weight: 600;
    color: var(--nav-link-color);
    text-decoration: none;
}

.content {
    overflow: auto;
    min-height: 300px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 40px;
    grid-template-areas:
        "main-content"
        "footer-content"
}

.main-content {
    grid-area: main-content;
    width: 90vw;
    justify-self: center;
}

.main {
    width: 100%;
    display: grid;
    justify-items: center;
    padding: 60px 0px 100px 0px;
}

#video-div {
    width: 100%;
    max-width: 1000px;
    min-width: 50px;
    scroll-margin-top: 30px;
}

#video {
    object-fit: contain;
    /* Get a mask */
    min-width: 50px;
    width: 100%;
    clip-path: inset(0% 0% 0% 0% round 30px);
}

#feature-list {
    display: grid;
    margin-top: 30px;
    text-align: center;
    width: 100%;
    scroll-margin-top: 30px;
    text-align: left;
}

#feature-header {
    font-size: 1.8em;
    text-align: left;
    margin-bottom: 0px;
}

#feature-divider {
    width: 110px;
    margin-bottom: 30px;
}

#feature-divider hr {
    border: none;
    border-top: 2px solid var(--footer-txt-color);
}

.feature {
    margin-bottom: 20px;
}

.feature-header h2 {
    font-size: 1.4em;
    margin: 0px;
}

.feature-desc p {
    margin-top: 10px;
}

.tier-wrapper {
    width: 100%;
    scroll-margin-top: 30px;
}

#price-header h1 {
    font-size: 1.8em;
    text-align: left;
    margin-bottom: 0px;
}

/* Fix divider not fucking working */
#price-divider {
    width: 110px;
    margin-bottom: 40px;
}

#price-divider hr {
    border: none;
    border-top: 2px solid var(--footer-txt-color);
}

.price-tier-container {
    display: grid;
    background-color: var(--buy-button-bg-color);
    /* border: 2px solid -; */
    border-radius: 20px;
    /* max-width: 400px; */
    margin-bottom: 20px;
    font-weight: 600;
    grid-template-rows: 4fr 3.5fr;
    height: 140px;
    grid-template-areas: 
    "body"
    "button"
}

.price-tier-body {
    grid-area: body;
    padding: 10px 0px 0px 20px;
}

#price-tier-duration {
    margin-bottom: 5px;
}

.price-tier-button {
    background-color: var(--footer-txt-color);
    color: var(--footer-color);
    align-self: center;
    font-weight: 600;
    grid-area: button;
    border: none;
    width: 120px;
    margin-left: 20px;
    height: 30px;
    border-radius: 20px;
    margin-bottom: 10px;
}

#form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

#signup {
    font-weight: 600;
    color: var(--general-text-color);
    font-size: 1.4em;
}

#email {
    border: none;
    border-bottom: 2px solid rgb(138, 138, 138);
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
}

#submit {
    border: 0px;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    height: 50px;
    columns: var(--footer-txt-color);
    background-color: var(--footer-color);
    padding: 7px 0px;
    font-weight: 550;
}

.footer-content {
    grid-area: footer-content;
    display: flex;
    align-self: flex-end;
    max-height: 40px;
    height: 100%;
    background-color: var(--footer-color);

}

#footer-txt {
    width: 100%;
    text-align: center;
    color: var(--footer-txt-color);
    font-weight: 600;
}

@media (max-width: 430px){
    /* Hamburger menu via absolute and zindex */

    .header {
        z-index: 1;
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
            "logo"
            "nav-bar"
    }

    .header-img-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }


    .nav-bar {
        flex-direction: row;
        justify-content: center;
        padding-bottom: 10px;
        scroll-margin-top: 50px;
    }


    .container{
        z-index: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto;
        grid-template-areas:
        "header"
        "content"
    }
}

@media (min-width: 640px){

    #feature-list {
        margin-top: 150px;
    }

    .tier-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.7fr;
        margin-top: 150px;
        width: 100%;
        grid-template-areas: 
        "tier_header"
        "boxes"
    }

    /* Center Texts? */
    #tier-boxes-container {
        display: grid;
        grid-area: boxes;
        /* grid-template-columns: 1fr 1fr 1fr; */
        grid-template-columns: minmax(200px, 350px) minmax(200px, 350px) minmax(200px, 350px);
        grid-template-rows: 1fr;
        grid-gap: 10px;
        width: 100%;
        justify-content: center;
        grid-template-areas: 
        "tier_basic tier_medium tier_premium";
    }


    .price-tier-container {
        max-width: 350px;
        height: 200px;
    }
    
    .price_header {
        grid-area: tier_header;
    }
    
    .price_divider {
        grid-area: tier_divider;
    }

    .tier_basic {
        grid-area: tier_basic;
    }

    .tier_medium {
        grid-area: tier_medium;
    }

    .tier_premium {
        grid-area: tier_premium;
    }


    #form {
        width: 60%;
        margin-top: 200px;
    }
}



/* In media query
.price-tier-button:hover {
    width: 122px;
    height: 32px;
} */