:root{
    --nicegray: #606060;
    --niceWhite: #7E7E7E;
    --darkGrey: #414141;
    --black: #0e0e0e;
    --white: #f8f8f8;
    --lightBlue: #1797E8;
    --green: #4E7317;
    --darkBlue: #140B73;
    --orange: #D48616;
    --purple: #5D0673;
}
html{scroll-behavior: smooth;}
body{margin: 0px;}
a:link, a:visited, a:active{
    text-decoration: none;
}
/*Header*/
.index-header{
    display: flex;
    height: 125px;
    width: auto;
    background:var(--black);
}
.index-header h1{
    font-size: 2rem;
    color: var(--orange);
}
.index-header div{
    margin: 15px 1px 15px 5px;
}
.index-header nav{
    width: auto;
    flex-grow: 1;
    margin: 15px 20px 15px auto;
}
.index-header nav menu{
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: right;
}
.index-header nav menu li{
    width: auto;
    margin-right: 10px;
    padding: 4px;
    list-style: none;
    border-left: solid 4px var(--nicegray);
}
.index-header nav menu li a{
    text-decoration: none;
    font-size: 3rem;
    color: var(--white);
    transition: color .3s ease-in-out;
}
.index-header nav menu li a:hover{
    box-shadow: inset 0 0 0 0 var(--black);
    cursor: pointer;
    color: var(--lightBlue);
}
.index-header nav menu li i{
    position: relative;
    color: var(--white);
    transition: color .2s ease-in-out;
}
.index-header nav menu li i:hover{
    box-shadow: inset 0 0 0 0 var(--black);
    color: var(--lightBlue);
}
/*Masthead*/
.index-masthead{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: auto;
    height: 750px;
    background: -moz-linear-gradient(top, rgba(14, 14, 14, 1), rgba(93, 6, 115, 1));
    background: -webkit-linear-gradient(top, rgba(14, 14, 14, 1), rgba(93, 6, 115, 1));
    background: linear-gradient(top, rgba(14, 14, 14, 1), rgba(93, 6, 115, 1));
}
.index-masthead div:nth-child(1) a{
    font-size: 76px;
    color: var(--orange);
    font-family: 'Poppins', sans-serif;
    text-shadow: var(--black) 2px 3px 2px;
}
.index-masthead div:nth-child(2){
    margin-top: 32px;
}
.index-masthead div:nth-child(2) a{
    color: var(--white);
    border-bottom: solid 3px var(--nicegray);
    padding: 4px;
    margin: 0px 16px;
    text-decoration: none;
    font-size: 26px;
}  
/*Call To Action*/
.index-cta{
    display: grid;
    grid-template-columns: repeat(3, 33.3%);
    min-height: 500px;
}
.index-cta .mask{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-family: 'Poppins', sans-serif;
    text-shadow: var(--nicegray) 2px 3px 2px;
    border-bottom: solid 3px var(--black);
    min-height: 500px;
}
.index-cta div{
    background: -moz-linear-gradient(rgba(93, 6, 115, 1), rgba(23, 151, 232, 0));
    background: -webkit-linear-gradient(rgba(93, 6, 115, 1), rgba(23, 151, 232, 0));
    background: linear-gradient(rgba(93, 6, 115, 1), rgba(23, 151, 232, 0));
    transition: background-color 0.8s;
}
.index-cta div:nth-child(1):hover, .index-cta:nth-child(1):focus{
    background-color:rgba(23, 151, 232, 0.75);
    color: var(--orange);
}
.index-cta div:nth-child(2):hover, .index-cta:nth-child(2):focus{
    background-color: rgba(23, 151, 232, 0.75);
    color: var(--orange);
}
.index-cta div:nth-child(3):hover, .index-cta:nth-child(3):focus{
    background-color: rgba(23, 151, 232, 0.75);
    color: var(--orange);
}
/*News*/
.news-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    background: -moz-linear-gradient(rgba(23, 151, 232, 0), rgba(93, 6, 115, 0.5));
    background: -webkit-linear-gradient(rgba(93, 6, 115, 0), rgba(93, 6, 115, 0.5));
    background: linear-gradient(rgba(93, 6, 115, 0), rgba(93, 6, 115, 0.5));
    flex-wrap: wrap;
}
.news-cta div{
    height: 15.5rem;
    width: 20rem;
    padding: 0px 2rem;
    margin: 10px;
    border-left: solid 2px #0e0e0e;
    border-bottom: solid 2px #0e0e0e;
}
.news-cta .news-mask{
    padding: 0px, 20px;
}
/*Footer*/
.index-footer{
    background: -moz-linear-gradient(rgba(93, 6, 115, 0.5), rgba(93, 6, 115, 1));
    background: -webkit-linear-gradient(rgba(93, 6, 115, 0.5), rgba(93, 6, 115, 1));
    background: linear-gradient(rgba(93, 6, 115, 0.5), rgba(93, 6, 115, 1));
}
.index-footer div menu{
    margin: 0px;
}
.news-cta div span h3{
    text-align: center;
    font-size: 1.5rem;
}
.index-footer{
    display: flex;
    flex-direction: column;
}
.index-footer div menu{
   display: flex;
   list-style: none;
   flex-direction: row;
   justify-content: space-evenly;
   margin: 5rem 0 0 0;
}
.index-footer div menu li{
    border-right: solid 3px var(--black);
    padding: 0 0.25rem;
}
.index-footer div menu li a{
    color: var(--white);
    font-size: 26px;
    word-spacing: 1px;
    text-decoration: none;
}
#sign{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


@media only screen and (max-width: 1085px) {
    .news-cta div{
        height: auto;
        width: auto;
        padding: 0px 2rem;
        margin: 10px;
        border-left: solid 2px #0e0e0e;
        border-bottom: solid 2px #0e0e0e;
    }
}
@media only screen and (max-width: 705px) {
    .index-header nav menu li a{
        font-size: 1rem;
    }
    .index-header div h1{
        font-size: 1.25rem;
    }
    .index-masthead div:nth-child(1) a{
        font-size: 3rem;
    }
    .index-cta div{
        background-color:rgba(23, 151, 232, 1);
        color: var(--orange);
    }
    .index-cta .mask{
        font-size: 1.25rem;
    }
    .news-cta div{
        border: none;
        padding: 0px;
        margin: 0px;
    }
    .index-footer div{
        padding: 0px;
        margin: 0px;
    }
    .index-footer div span a{
        flex-wrap: wrap;
        font-size: 0.5rem;
        width: auto;
        margin: 0;
    }
}
@media only screen and (max-width: 450px){
    .index-header nav menu{
        flex-wrap: wrap;
        justify-content: start;
    }
    .index-header nav menu li a{
        font-size: 0.75rem;
    }
    .index-header div h1{
        font-size: 1rem;
    }
    .index-footer div menu{
        flex-wrap: wrap;
        width: auto;
        margin: 0;
    }
    .index-footer div menu li a{
        font-size: 1rem;
    }
    #ocean-title{
        font-size: 2rem;
    }

    
}
/*TODO*/
.stars{
    aspect-ratio: 16/9;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.layer1{
    opacity: 1;
    background-image: url(../img/mightwork.svg);
}
.sky{
    background: -moz-linear-gradient(rgba(20, 11, 115, 0.5), rgba(20, 11, 115, 1));
    background: -webkit-linear-gradient(rgba(20, 11, 115, 0.5), rgba(20, 11, 115, 1));
    background: linear-gradient(rgba(20, 11, 115, 0.5), rgba(20, 11, 115, 1));
    height: 85rem;
    font-family: 'Nanum Gothic', sans-serif;
}
.sky div{
    display: flex;
}
.sky h2{
    font-size: 2rem;
}
.sky div h2:nth-child(1){
    color: var(--black);
}
.sky div:nth-child(3) h2{
    offset: 100px;
    color: var(--white);
}
.ocean{
    font-family: 'Nanum Gothic', sans-serif;
}
.ocean div{
    display: flex;
    background-color: var(--darkBlue);
}
.ocean div:nth-child(1){
    background: var(--darkBlue);
}
.ocean div:nth-child(1) h2{
    color: var(--niceWhite);
    font-size: 2rem;
}
.ocean div:nth-child(2){
    justify-content: center;
}
.ocean div:nth-child(2) h2{
    color: var(--orange);
    font-size: 4rem;
    text-shadow: 2px 3px 2px var(--black);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;

}
.waves{
    aspect-ratio: 960/100;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.layer2{
    background-image: url(../img/layered-waves-haikei.svg);
    opacity: 1;
}

.buy-now{
    display: flex;
    justify-content: center;
    align-items:end;
    background: var(--purple);
}
.buy-now div{
    width: auto;
    margin-top: 1rem;
}
.buy-now div h2{
    padding: 10px;
    font-size: 2rem;
    color: var(--white);
    transition: color .3s ease-in-out;
}
.buy-now div h2:hover{
    color: var(--green);
}

/*Contact*/

.contact-masthead{
    display: flex;
    justify-content: center;
    background: rgba(230, 230, 230, 1);

}
.contact-masthead div h2{
    font-size: 3rem;
}
.faq{
    display: grid;
    grid-template-columns: repeat(2, 45%);
    justify-content: center;
    background: rgba(230, 230, 230, 1);

} 
.faq div{
    margin: 1vw;
    outline: 3px solid rgba(14, 14, 14, 0.5);
    border-radius: 10px;
    transition: outline-width 0.2s ease-in-out  ;
    padding: 10px;
    background: rgba(240, 240, 240, 1);
}
.faq div:hover{
outline-width: 6px;
}
.faq div{
    margin-left: 5px;
    width: auto;
    padding: 1vw;
}
.contact-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(230, 230, 230, 1);
    height: 26vh;
    box-sizing: border-box;
}
.contact-form div form{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
}
.contact-form div form input{
    border: 10px;
    border-radius: 4px;
    margin-right: 10px;
    padding: 10px;
    width: 10vw; 
}
.contact-form div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact-form div a h2{
    border: solid 2px var(--black);
    text-decoration: none;
    color: var(--black);
    border-radius: 3px;
    padding: 1px;
    margin: 10px 0px 0px 0px;
    font-size: 1.5rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.contact-form div a h2:hover{
    box-shadow: inset 10em 0 0 0 var(--black);
    color: var(--white);
}
.about-masthead{
    padding: 1rem;
    display: flex;
    justify-content: center;
    background: rgba(20, 11, 115, 0.125);
}
.about-masthead div h2{
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    padding: 0 1rem;
    border-left: solid 4px #0e0e0e;
    border-right: solid 4px #0e0e0e;
    border-radius: 20px;
}
.entries-container{
    display: flex;
    padding: 0rem 8rem;
    justify-content: center;
    flex-direction: column;
    background: -moz-linear-gradient(rgba(20, 11, 115, 0.125), rgba(20, 11, 115, 0.25));
    background: -webkit-linear-gradient(rgba(20, 11, 115, 0.125), rgba(20, 11, 115, 0.25));
    background: linear-gradient(rgba(20, 11, 115, 0.125), rgba(20, 11, 115, 0.25));
}
.entries-container div{
    margin: 1rem;
    border-bottom: #0e0e0e 4px solid;
}
.entries-container div h2{
    text-decoration: underline;
}
.entries-container div a{
    color: var(--green);
}