*:not(i)
{
    font-family : 'Comfortaa', cursive;
}

body
{
    width      : 100%;
    margin     : 0;
    color      : white;
    overflow-x : hidden;
}

header
{
    z-index : 1;
    width   : 100%;
    height  : 0;
    padding : 0 0 6rem;
}

.header.active
{
    position         : fixed;
    transition       : all 1s ease-in;
    background-color : #2E3191;
}

nav
{
    position        : relative;
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    width           : 100%;
    height          : 6rem;
}

header .logo
{
    width       : 12rem;
    margin-left : 4.7rem;
}

.options
{
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    margin-top      : 0.6rem;
    padding         : 0rem 0.4rem;
    list-style      : none;
}

.options li
{
    display        : flex;
    align-items    : center;
    flex-direction : column;
    margin-right   : 1rem;
    margin-left    : 1rem;
    font-size      : 1.1rem;
    font-weight    : 500;
    color          : white;
}

.options a
{
    text-decoration : none;
    color           : white;
}

.onHover
{
    visibility       : hidden;
    width            : 3.8rem;
    height           : 1.7rem;
    margin-top       : -1.2rem;
    margin-bottom    : 1rem;
    transition       : opacity 0.5s;
    transform        : rotate(180deg);
    opacity          : 0;
    background-color : #FFCA05;
    clip-path        : polygon(50% 0, 100% 100%, 0 100%);
}

.socialMediaIcons
{
    display        : flex;
    flex-direction : row;
    margin-top     : 2.2rem;
    margin-right   : 1rem;
    padding        : 0rem 1rem;
    list-style     : none;
    font-size      : 1.2rem;
}

.socialMediaIcons li
{
    margin-right : 0.5rem;
    margin-left  : 0.5rem;
}

.options li:hover .onHover
{
    visibility : visible;
    opacity    : 1;

}

.options a:hover,
.socialMediaIcons li:hover
{
    cursor      : pointer;
    transition  : all 0.2s;
    font-weight : 700;
    color       : #FFCA05;
}

.checkButton
{
    display      : none;
    float        : right;
    margin-right : 2rem;
    cursor       : pointer;
    font-size    : 2rem;
    line-height  : 6rem;
}

#check
{
    display : none;
}

.curve
{
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

.Intro
{
    top              : 0;
    width            : 100%;
    height           : 55.3rem;
    background-image : url('../images/test.svg');
}

.section01
{
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
}

.section01 img
{
    width        : 33rem;
    height       : 33rem;
    margin-top   : 7rem;
    margin-right : 5rem;
}

.section01Contents
{
    display        : flex;
    flex-direction : column;
    margin-right   : -1rem;
    margin-left    : 5rem;
    padding-top    : 3rem;
    line-height    : 1.8rem;
}

.Intro h1
{
    margin-top : 5rem;
    font-size  : 3rem;
}

.Intro p
{
    margin-top : -0.5rem;
    font-size  : 1rem;
}

.searchBox
{
    width         : 28rem;
    margin        : 2rem 0;
    padding       : 0.4rem;
    border        : 1px solid white;
    border-radius : 30px;
    background    : none;
}

.searchBox:hover + .searchButton
{
    color      : #2F3640;
    background : white;
}

.searchInput
{
    float       : right;
    width       : 22.5rem;
    padding     : 0 6px;
    font-size   : 16px;
    line-height : 40px;
    color       : white;
    border      : none;
    outline     : none;
    background  : none;
}

.searchInput::placeholder
{
    font-size   : 1.3rem;
    font-weight : 500;
    line-height : 80px;
    color       : #FFCA05;
}

.searchInput:focus::placeholder
{
    margin-right : 15rem;
    color        : transparent;
}

.searchBox button
{
    margin-top  : 0.4rem;
    margin-left : 1.7rem;
    border      : none;
    background  : none;
}

.searchBox button:hover
{
    cursor    : pointer;
    transform : scale(1.1);
}

.fa-search
{
    font-size : 1.4rem;
    color     : #E7C132;
}

section
{
    margin-bottom : 3rem;
}

.animate
{
    transition : 1s all ease;
    transform  : translateY(150px);
    opacity    : 0;
}

.animate.active
{
    transform : translateY(0px);
    opacity   : 1;
}

@media (max-width : 1020px)
{
    .section01Contents h1
    {
        line-height : 4rem;
    }
    .section01Contents
    {
        width      : 27rem;
        margin-top : -2rem;
    }
    .section01 img
    {
        width : 30rem;
    }
}

@media (max-width : 952px)
{
    img.logo
    {
        width       : 8rem;
        height      : 5rem;
        margin-left : 1rem;
    }

    .searchBox
    {
        width   : 22rem;
        padding : 0.4rem;
    }

    .searchInput
    {
        width : 15.5rem;
    }

    .searchInput::placeholder
    {
        font-size : 1.2rem;
    }

    .searchBox button
    {
        margin-top  : 0.4rem;
        margin-left : 2rem;
        border      : none;
        background  : none;
    }

    .section01 img
    {
        width : 25rem;
    }

    nav ul
    {
        font-size : 1.5rem;
    }
}

@media (max-width : 858px)
{
    .checkButton
    {
        display : block;
    }

    .options
    {
        position         : fixed;
        top              : 5.5rem;
        display          : none;
        width            : 94.7%;
        height           : 100vh;
        padding          : 0;
        transition       : all 0.5s;
        text-align       : center;
        background-color : rgba(44, 49, 129, 0.9);
    }

    .options li
    {
        display : block;
        width   : 100%;
    }

    #check:checked + .options
    {
        display    : block;
        margin-top : 0.5rem;
        transition : all 5s;
        color      : black;
    }

    .socialMediaIcons
    {
        display : none;
    }

    .options li:hover .onHover
    {
        visibility : hidden;
        color      : rgb(231, 193, 50);
    }

    .Intro h1
    {
        font-size : 2rem;
    }

    .section01
    {
        align-items    : center;
        flex-direction : column;
        width          : 100%;
    }

    .section01 img
    {
        width        : 30rem;
        margin-top   : -8rem;
        margin-right : -20rem;
    }

    .section01Contents
    {
        margin-left : -15rem;
        padding-top : 0rem;
    }

    .searchBox
    {
        height : 1.5rem;
        margin : 1rem 0;
    }

    .searchInput
    {
        margin-top   : -0.5rem;
        margin-right : 2rem;
    }

    .searchInput::placeholder
    {
        font-size : 1.1rem;
    }

    .searchBox button
    {
        margin-top  : 0rem;
        margin-left : -0.2rem;
    }

    .fa-search
    {
        padding-top  : 0.2rem;
        padding-left : 0.5rem;
        font-size    : 1.1rem;
    }
}

@media (max-width : 650px)
{
    .options
    {
        padding : 0 1rem;
    }
    .Intro
    {
        margin-bottom : 6rem;
    }
    .section01Contents
    {
        width       : 22rem;
        margin-left : 0;
    }
    .section01 img
    {
        width        : 28rem;
        height       : 28rem;
        margin-top   : 1rem;
        margin-right : 0;
    }
    .searchBox
    {
        width : 20rem;
    }
    header
    {
        width : 100%;
    }
    .searchInput
    {
        width : 15rem;
    }
}

@media (max-width : 500px)
{
    .options
    {
        padding : 0 0.21rem;
    }
}