@font-face {
    font-family: 'Exo2';
    src: url('/fonts/Exo2-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    min-height: 100%;
    margin: 0;
}
#container {
    overflow: auto;
    height: 100vh;
    background-image: url("/media/titleHP.png");
    background-size: cover;
    display: flex;
    justify-content: center;   
}
.mirror {
    position: fixed;
    width: 70%;
    margin-top: 140px;
    transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}   
.mirror img {
    width: 100%;
    display: block;
}
.mirror::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100%;
    height: 100%;
    background: url("/media/logo.png") bottom center / cover no-repeat;
    transform: scaleY(-1.4);
    opacity: 0.4;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
.mirror.menuOpen {
    opacity: .18;
    filter: blur(2px);
    transform: scale(.98);
}





@media screen and (max-width: 800px) {
    #container {
        background-image: url("/media/titleHPmobile.png");
    }
    .mirror {
        margin-top: 50%;
    }
    .mirror::after {
        display: none;
    }
}