@font-face {
    font-family: 'Fira Code';
    src: url("woff2/FiraCode-Light.woff2?ver=1") format("woff2"), url("woff/FiraCode-Light.woff?ver=1") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url("woff2/FiraCode-Regular.woff2?ver=1") format("woff2"), url("woff/FiraCode-Regular.woff?ver=1") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url("woff2/FiraCode-Medium.woff2?ver=1") format("woff2"), url("woff/FiraCode-Medium.woff?ver=1") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url("woff2/FiraCode-SemiBold.woff2?ver=1") format("woff2"), url("woff/FiraCode-SemiBold.woff?ver=1") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url("woff2/FiraCode-Bold.woff2?ver=1") format("woff2"), url("woff/FiraCode-Bold.woff?ver=1") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code VF';
    src: url("woff2/FiraCode-VF.woff2?ver=1") format("woff2"), url("woff/FiraCode-VF.woff?ver=1") format("woff");
    font-weight: 700;
    font-style: normal;
}

html {
    background: #191919;
    color: #FFF5EE;
    font-family: Fira Code;
    font-weight: 300;
    font-size: 12px;
}

body {
    text-align: center;
    height: 100%;
}

.pre-logo {
    text-align: center;
    position: absolute;
    display: block;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 25px;
}

.pre-logo pre {
    display: inline-block;
    text-align: left;
}

.logo {
    display: inline-block;
    text-align: left;
    color: #B3B6B7;
    user-select: none;
    font-size: 24px;
    font-weight: 1000;
}

@media screen and (orientation:portrait) {
    .logo {
        font-size: 14px;
    }
}

.sub-logo {
    text-align: left;
    color: #B3B6B7;
    user-select: none;
    font-size: 18px;
    margin-top: -40px;
}

@media screen and (orientation:portrait) {
    .sub-logo {
        font-size: 13px;
    }
}

.root {
    display: inline-block;
    max-width: 100%;
    text-align: left;
    height: 100%;
    margin: 0;
}

.bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

.linktree {
    display: block;
    width: 100%;
}

.linktree-inner {
    display: inline-flex;
    margin-top: -35px;
    
}

.linktree img {
    width: 45px;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

@media screen and (orientation:portrait) {
    .linktree img {
        width: 35px;
    }
}

.linktree img:hover {
    opacity: 0.9;
}

.space-vert {
    height: 50px;
}

.space-hor {
    width: 30px;
}

@media screen and (orientation:portrait) {
    .space-vert {
        height: 30px;
    }

    .space-hor {
        width: 20px;
    }
}

.gang-row {
    display: flex;
    gap: 50px;
    padding-bottom: 20px;
    font-weight: bold;
}

.gang-row .gang-col1 {
    flex: 1;
    text-align: right;
    align-content: center;
}
.gang-row .gang-col2 {
    flex: 1;
    text-align: left;
    align-content: center;
}