.faviconAnimation{
    position: fixed;
    width: 30px;
    height: 30px;
    background: url("../images/favicon.ico");
    background-repeat: no-repeat;
    background-size: cover;
    top: calc(40vh - 15px);
    left: calc(50vw - 15px);
    animation: pulse 1s infinite;
    transition: opacity .5s ease-in-out;
}
@keyframes pulse{
    0%{
        transform: scale(0.8);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(0.8);
    }
}


.homepageScreen{
    position: relative;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
}

.verticalLine{
    width: 1px;
    background-color: var(--homepageLines);
    display: none;
}
.horizontalLine{
    height: 1px;
    background-color: var(--homepageLines);
    display: none;
}


#topLeftLine{
    position: absolute;
    right: 50vw;
    top: 40px;
    animation: horizontal1 .3s forwards ease-in-out;
}
@keyframes horizontal1{
    from{
        width: 0px;
    }
    to{
        width: calc(50vw - 40px);
    }
}
#bottomLeftLine{
    position: absolute;
    left: 40px;
    bottom: 40px;
    animation: horizontal2 .3s .6s forwards ease-in-out;
    transition: opacity .2s;
}
@keyframes horizontal2{
    from{
        width: 0px;
    }
    to{
        width: calc(50vw - 40px);
    }
}

#bottomRightLine{
    position: absolute;
    left: 50vw;
    bottom: 40px;
    animation: horizontal3 .3s forwards ease-in-out;
    transition: opacity .2s;
}
@keyframes horizontal3{
    from{
        width: 0px;
    }
    to{
        width: calc(50vw - 40px);
    }
}

#topRightLine{
    position: absolute;
    right: 40px;
    top: 40px;
    animation: horizontal4 .3s .6s forwards ease-in-out;
}
@keyframes horizontal4{
    from{
        width: 0px;
    }
    to{
        width: calc(50vw - 40px);
    }
}


#leftLine{
    position: absolute;
    left: 40px;
    top: 40px;
    animation: leftLine .3s .3s forwards ease-in-out;
}
/* @keyframes leftLine{
    from{
        height: 0px;
    }
    to{
        height: calc(100vh - 80px);
    }
} */

#rightLine{
    position: absolute;
    right: 40px;
    bottom: 40px;
    animation: leftLine .3s .3s forwards ease-in-out;
}
@keyframes leftLine{
    from{
        height: 0px;
    }
    to{
        height: calc(100vh - 80px);
    }
}

.centerLine{
    width: 1px;
    background-color: var(--homepageLines);
}

#topLine{
    position: absolute;
    top: 40px;
    left: calc(50vw - 0.5px);
    animation: topLine .2s .9s forwards ease-in-out;
}
@keyframes topLine{
    from{
        height: 0px;
    }
    to{
        height: calc(25vh - 40px);
    }
}

#bottomLine{
    position: absolute;
    bottom: 40px;
    left: calc(50vw - 0.5px);
    animation: topLine .2s .9s forwards ease-in-out;
}
@keyframes topLine{
    from{
        height: 0px;
    }
    to{
        height: calc(25vh - 40px);

    }
}



.homepageText{
    width: 620px;
    height: 150px;
    position: absolute;
    left: calc(50vw - 310px);
    top: calc(45vh - 75px);

}
.homepageText .hello{
    position: relative;
    font-family: 'Abhaya Libre', serif;
    font-style: normal;
    font-weight: 800;
    font-size: 64px;
    line-height: 75px;
    /* identical to box height */
    /* text-align: center; */
    color: var(--white);
    width: 350px;
    margin-left: auto;
    margin-right: auto;

}


.homepageText .iAm{
    position: relative;
    font-family: 'Abhaya Libre', serif;
    font-style: normal;
    font-weight: 800;
    font-size: 64px;
    line-height: 75px;
    /* identical to box height */
    /* text-align: center; */
    color: var(--green);
    margin-left: auto;
    margin-right: auto;
}



#meetButton{
    position: absolute;
    top: 60vh;
    left: calc(50vw - 95px);
    display: flex;
    /* animation: meetButton .5s 4s forwards; */
    opacity: 0;
}
@keyframes meetButton{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;

    }
}


#meetButton p{
    position: relative;
    margin: 0px;
    left: 25px;
    font-size: 18px;
    line-height: 48px;
    font-family: 'Roboto Mono', monospace;
}
#meetButton .arrow{
    position: relative;
    top: calc(50% - 10px);
    left: 13px;
}



.langToggle{
    color: white;
    position: fixed;
    right: 10px;
    top: 10vh;
    display: flex;
    font-family: 'Roboto Mono', monospace;
    flex-direction: column;
    transition: transform .2s;
    z-index: 5;
    transform: translateX(50px);
}