@font-face{
    font-family: 'Aeonik Fono';
    src: url('../font/AeonikFonoTRIAL-Regular.otf');
}

*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html
{
    height:100vh;
}

body{
    background-color: #F7F5F4;
    user-select: none;
    text-rendering: optimizeLegibility;
    font-family: 'Aeonik Fono';
    color: #1A1A1A;
    display: flex;
    align-items: center;
    flex-direction: column;
    height:100%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.bodyHome{
    cursor: none;
    transition: all 200ms ease-out;
    position: relative;
    /* margin-top:-100px; */
    justify-content: center;
}

.mouseCursor{
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
}

.cursor {
    text-align: center;
    display: flex;
    align-items: center;
}

.cursorMobile{
    display: none;
}

.cursor img[alt="Pause"]{
    display: none;
    transition: all 200ms ease-out;
}

.black .cursor img[alt="Pause"]{
    display: block;
}

.black .cursor img[alt="Lecture"]{
    display: none;
}

.cursor p{
    padding: 0%;
    margin: 0%;
    margin-right: 5px;
}

.black{
    background-color: #1A1A1A;
    color: #F7F5F4;
}

.logo svg{
    fill:#202020;
    width: 350px;
    max-width: 100%;
    transition: all 200ms ease-out;
}

.logo{
    margin-bottom: 85px;
    /* margin-top: 100px; */
}

.black .logo svg{
    fill:white;
}

.progressbar{
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 0px;
    background-color: #F7F5F4;
    transition: all 1000ms ease-out;
}

.text{
    text-align: center;
    transition: all 200ms ease-out;
}

.text p, .text h1, .text h2{
    margin: 12px;
}

.text h1{
    font-weight: 400;
    font-size: 32px;
}

.text h2{
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}

.btn{
    color: #F7F5F4;
    background-color: #1A1A1A;
    border: 0;
    border-radius: 0;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.black .btn{
    color: #1A1A1A;
    background-color: #F7F5F4;
}

.email-form{
    margin-top: 102px;
    display: flex;
    transition: all 200ms ease-out;
    flex-wrap: wrap;
    justify-content: center;
}

.email-form .input-text{
    background-color: transparent;
    border: 1px solid #1A1A1A;
    border-radius: 0;
    padding: 16px 24px;
    width: 306px;
    max-width: 100%;
    font-family: 'Aeonik Fono';
    font-size: 16px;
    font-weight: 400;
    outline: none;
}

/* , input:-ms-input-placeholder, input::-ms-input-placeholder */
.email-form .input-text::placeholder{
    color:#1A1A1A;
    opacity: 1;
}

.black .email-form .input-text::placeholder{
    color:#F7F5F4;
}

.black .email-form .input-text{
    border: 1px solid #F7F5F4;
    color:#F7F5F4;
    font-weight: 400;
}

.footer{
    text-transform: uppercase;
    text-align: center;
    /* position: fixed; */
    position: absolute;
    bottom: 0;
    cursor:auto;
}

.footer p{
    cursor:auto;
    font-size: 12px;
}

a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* #canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    transform: rotate(180deg);
} */

.email-form:hover ~ .cursor{
   display: none;
}

.footer:hover ~ .cursor{
    display: none;
    cursor: pointer !important;
}

.legal-text{
    max-width: 480px;
    width: 100%;
    text-align: left;
    font-size: 12px;
    margin-bottom: 90px;
    line-height: 13.68px;
}

.text-title{
    font-weight: 700;
}

.text-content a{
    text-decoration: underline;
}

.returnBtn{
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 90px;
}

@media screen and (max-width: 767px) {
    html
    {
        height:90vh;
    }
    .bodyHome{
        padding: 0 15px;
    }
    .hideForMobile{
        display: none;
    }
    .blockForMobile{
        display: block;
    }
    .cursorMobile{
        display: flex;
    }
    .mouseCursor{
        display: none;
    }
    .logo{
        margin-bottom: 25px;
    }
    .cursorMobile{
        margin-bottom: 35px;
    }
    .text h1{
        padding: 0 20px;
    }
    .email-form{
        margin-top: 50px;
    }
    .btn{
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .footer{
        position:initial;
    }
}