@font-face {
    font-family: 'GhM';
    src: url('GhM.woff2') format('woff2'),
        url('GhM.woff') format('woff'),
        url('GhM.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FTT-Chiaro B';
    src: url('/fonts/TT_Chiaro-B.woff2') format('woff2'),
        url('/fonts/TT_Chiaro-B.woff') format('woff'),
        url('/fonts/TT_Chiaro-B.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BigDots';
    src: url('../fonts/BigDots.woff2') format('woff2'),
        url('../fonts/BigDots.woff') format('woff'),
        url('../fonts/BigDots.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SCDF';
    src: url('../fonts/SCDF.woff2') format('woff2'),
        url('../fonts/SCDF.woff') format('woff'),
        url('../fonts/SCDF.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FTT-RodinNTLG DB';
    src: url('/fonts/TT_RodinNTLG-DB.woff2') format('woff2'),
        url('/fonts/TT_RodinNTLG-DB.woff') format('woff'),
        url('/fonts/TT_RodinNTLG-DB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FTT-DotGothic12 M';
    src: url('/fonts/TT_DotGothic12-M.woff2') format('woff2'),
        url('/fonts/TT_DotGothic12-M.woff') format('woff'),
        url('/fonts/TT_DotGothic12-M.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:black;
    color:white;
    font-family:'FTT-Chiaro B';
    overflow-x:hidden;
}

section{
    background:black;
    border:3px solid red;
}

.container{
    display:flex;
    gap:20px;
    padding:20px;
    flex-direction:row;
}

#bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;

    background:linear-gradient(
        to bottom,
        black 0%,
        hsl(240 100% 25% / 0.3) 100%
    );
}

.line{
    position:absolute;
    left:0;
    width:100vw;
    height:2px;
    transform-origin:center;
    transform:scaleY(0);
    will-change:transform;
}

#header{
    width:260px;
    padding:40px 20px;
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
}

.nav{
    padding:20px;
}

.nav-item{
    padding:12px 24px;
    text-transform:uppercase;
    letter-spacing:2px;
    transition:0.3s;
}

.locked{
    opacity:0.4;
    filter:blur(1px);
    cursor:not-allowed;
}

.unlocked{
    cursor:pointer;
}

.unlocked:hover{
    color:red;
}

#main-content{
    flex:1;
    padding:20px;
}


.content-ribbon{
    padding:40px;
}

#intro{
    text-align:center;
}

#intro h1{
    margin-bottom:20px;
    font-size:3rem;
}

.hidden{
    display:none !important;
}

.hidden-section{
    display:none;
}

.modal{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,0.8);

    z-index:999;
}

.modal-box{
    width:400px;
    padding:30px;
    text-align:center;
}

.modal-box input{
    width:100%;
    margin-top:20px;
    padding:12px;

    background:black;
    color:white;

    border:none;
    outline:none;

    font-family:'FTT-Chiaro B';
}

.modal-buttons{
    margin-top:20px;

    display:flex;
    justify-content:center;
    gap:15px;
}

.modal-buttons button{
    padding:10px 20px;

    background:none;
    color:white;

    border:none;

    cursor:pointer;

    font-family:'FTT-Chiaro B';

    transition:0.3s;
}

.modal-buttons button:hover{
    color:red;
}

span{
    color:red;
    cursor:pointer;
    transition:0.3s;
}

span:hover{
    filter:drop-shadow(0 0 0.75rem red);
}