@font-face {
    font-family: 'TT Norms Pro';
    src: url('./TTNormsPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body{margin: 0; font-family: 'TT Norms Pro'; color: #F4F3EC;}
a{color: #F4F3EC; text-decoration: none; border-bottom: 1px solid; transition: 300ms;}
a:hover{border-bottom-color: transparent}
.video{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-position: 50% 95%;
    background-repeat: no-repeat;
    background-size: cover;
}
.video video{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.frame{
    position: fixed;
    top: calc(40 / 1800 * 200vh); left: 0;
    width: 100%;
    bottom: calc(40 / 1800 * 200vh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
    z-index: 10;
    font-size: calc(28 / 1800 * 200vh);
}
.middle{
    display: flex;
    flex-direction: column;
    gap: calc(60 / 1800 * 200vh);
    text-transform: uppercase;
    text-align: center;
    font-size: calc(32 / 1800 * 200vh);
}
.middle svg{
    margin: 0 auto;
    width: calc(219 / 1800 * 200vh);
    height: calc(325 / 1800 * 200vh);
}
.flex{
    display: flex;
    align-items: center;
    gap: calc(14 / 1800 * 200vh);
}
.flex svg{
    width: calc(2 / 1800 * 200vh);
    height: calc(31 / 1800 * 200vh);
    position: relative;
    top: calc(3 / 1800 * 200vh);
}

@media (min-width: 767px) and (orientation: portrait) {
    .frame{
        top: calc(40 / 2048 * 200vh);
        bottom: calc(40 / 2048 * 200vh);
        font-size: calc(28 / 2048 * 200vh);
    }
    .middle{
        gap: calc(60 / 2048 * 200vh);
        font-size: calc(32 / 2048 * 200vh);
    }
    .middle svg{
        width: calc(219 / 2048 * 200vh);
        height: calc(325 / 2048 * 200vh);
    }
    .flex{
        gap: calc(14 / 2048 * 200vh);
    }
    .flex svg{
        width: calc(2 / 2048 * 200vh);
        height: calc(31 / 2048 * 200vh);
        top: calc(3 / 2048 * 200vh);
    }
}
@media (max-width: 767px) and (orientation: portrait) {
    .frame{
        top: calc(40 / 1136 * 200vh);
        bottom: calc(40 / 1136 * 200vh);
        font-size: calc(12 / 1136 * 200vh);
    }
    .middle{
        gap: calc(60 / 1136 * 200vh);
        font-size: calc(16 / 1136 * 200vh);
    }
    .middle svg{
        width: calc(112 / 1136 * 200vh);
        height: calc(166 / 1136 * 200vh);
    }
    .flex{
        gap: calc(14 / 1136 * 200vh);
    }
    .flex svg{
        width: calc(2 / 1136 * 200vh);
        height: calc(31 / 1136 * 200vh);
        top: calc(3 / 1136 * 200vh);
    }
}

@media (orientation: landscape) {
    .video {
        background-image: url("./1.webp");
    }
}

@media (orientation: portrait) {
    .video {
        background-image: url("./2.webp");
    }
}