* {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html{
    background-color: #231F20;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width:100%;
    font-family: 'Montserrat', sans-serif;
}

#contact ::selection {
    color: #EAEAEA;
    background: #231F20;
}

footer ::selection {
    color: #231F20;
    background: #EAEAEA;
}

#main{
    height: 100vh;
    width: 100vw;
    max-width:100%;
    background-color: #231F20;
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.logo svg{
    width: 100vw;
    height: 200vh;
    max-width:100%;
}

.logo{
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    overflow: hidden;
}

#In{
    transform-origin: center;
    animation: circle 15s linear infinite;
}

#Center{
    transform-origin: center;
    animation: circle 30s linear infinite reverse;
}

#Out{
    transform-origin: center;
    animation: circle 50s linear infinite;
}

@keyframes circle {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}


@keyframes fadeInColor {
    from {background-color: rgba(35, 31, 32, 0);}
    to {background-color: rgba(35, 31, 32, 1);}
}

.nav{
    position: fixed;
    top: 0;
    width: 100vw;
    max-width:100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.mainText{
    color: #EAEAEA;
    font-size: 32px;
    opacity: 0.6;
    height: 100%;
    width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainText a{
    text-decoration: none;
    color: #EAEAEA;
}

.textMove{
    opacity: 1;
    pointer-events: auto;
    background-color: #231F20;
}

.navMove{
    animation: fadeInColor 0.2s ease-in;
    background-color: #231F20;
}

.scroll{
    position: relative;
    z-index: 1;
}

.scroll svg{
    height: 100px;
}

#mouse{
    animation: scrollMouse 3s ease-in-out infinite;
}

#arrow{
    animation: scrollArrow 3s ease-in-out infinite;
}


    
@keyframes scrollMouse {
    0%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateY(-5px);
        opacity: 0.5;
    }
    100%{
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes scrollArrow {
    0%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateY(0px);
        opacity: 0.5;
    }
    100%{
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes scrollArrow1 {
    0%{
        transform: translateY(-40px);
    }
    50%{
        transform: translateY(-30px);
        opacity: 0.5;
    }
    100%{
        transform: translateY(-40px);
        opacity: 1;
    }
}

#contact{
    height: calc(100vh - 80px);
    width: 100%;
    background-color: #EAEAEA;
    color: #231F20;
    display: flex;
    flex-direction: column;
    pointer-events:none;
    border: hidden;
    max-width:100%;
}


.tittle{
    flex: 20;
    font-size: 64px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.bottom{
    flex: 80;
    display: flex;
    align-items: center;
    margin: 0 10vw 10vh 10vw;
}

.left{
    flex: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeOut 0.5s ease-in;
}


.mid{
    opacity: 0;
    animation: fadeOut 0.5s ease-in;
}


img {
    width: 450px;
    height: auto;
}

.right{
    flex: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    row-gap: 5px;
    opacity: 0;
    animation: fadeOut 0.5s ease-in;
}


.midMove{
    opacity: 1;
    animation: moveMid 0.5s ease-in;
}


.leftMove{
    opacity: 1;
    animation: moveLeft 0.5s ease-in;
}


.rightMove{
    opacity: 1;
    animation: moveRight 0.5s ease-in;
}

@keyframes moveMid {
    from {clip-path:inset(50% 0% 50% 0%);}
    to {clip-path:inset(0% 0% 0% 0%);}
}

@keyframes moveLeft {
    from {transform: translateX(15%);}
    to {transform: translateX(0);}
}

@keyframes moveRight {
    from {transform: translateX(-15%);}
    to {transform: translateX(0);}
}


#mail{
    pointer-events:auto;
    cursor: pointer;
    color: #231F20;
    text-decoration: none;
}

.tooltiptext {
    font-size: 22px;
    visibility: hidden;
    width: 150px;
    background-color: #231F20;
    color: #EAEAEA;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    opacity: 0.8;
    transform: translateY(220%);
}
  
#mail:hover ~ .tooltiptext {
    visibility: visible;
}

footer{
    height: 15vh;
    width: 100vw;
    max-width:100%;
    background-color: #231F20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #EAEAEA;
    row-gap: 10px;
}

.textBottom{
    color: #EAEAEA;
    text-decoration: none;
}

@media screen and (max-width: 1700px) {
    .left img{
        width: 350px;
    }
}

@media screen and (max-width: 1250px) {
    .right{
        font-size: 26px;
    }
    .bottom{
        margin: 0 5vw 10vh 5vw;
    }
}

@media screen and (max-width: 1024px) {
    .left img{
        width: 300px;
    }

    #mail:hover ~ .tooltiptext {
        visibility: hidden;
    }

    .right{
        font-size: 24px;
    }
    .bottom{
        margin: 0 2vw 10vh 2vw;
    }

    .logo{
        left: -100%;
    }

    .logo svg{
        width: 200vw;
        height: 200vh;
        max-width: 180%;
    }

    #mouse{
        display: none;
    }

    .scroll svg{
        width: 100px;
    }

    #arrow{
        animation: scrollArrow1 3s ease-in-out infinite;
    }

    .mainText{
        font-size: 26px;
    }
}

@media screen and (max-width: 900px) {
    .left, .mid {
        display: none;
    }

    #contact{
        height: calc(85vh - 80px);
    }

    .right{
        font-size: 32px;
    }

    .rightMove{
        opacity: 1;
        animation: fadeIn 0.5s ease-in;
    }
}

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

    .logo{
        left: -100%;
        top: 50vh;
    }

    .logo svg{
        width: 200vw;
        height: 100vh;
        max-width: 180%;
    }

    .mainText{
        font-size: 22px;
    }

    #main{
        padding-bottom: 15vh;
    }
}

@media screen and (max-width: 500px) {
    .right{
        font-size: 26px;
    }

    footer{
        font-size: 16px;
    }

    .tittle{
        font-size: 54px; 
    }
}

@media screen and (max-width: 420px) {
    .right{
        font-size: 22px;
    }

    footer{
        font-size: 14px;
    }

    .tittle{
        font-size: 46px; 
    }
}