@font-face {
    font-family: "resting-vcr";
    src: url(resting-vcr.otf) format('OpenType');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
    background-color: black;
    padding: none;
    margin: 0;

    font-family: "resting-vcr", Times, serif;
    
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    
}

/*------------------------------------------*//*------------------------------------------*/
/*scrollbar*/

::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track {
    display: none;
}


::-webkit-scrollbar-thumb {
    display: none;
}

/*------------------------------------------*//*------------------------------------------*/
/*------------------------------------------*//*------------------------------------------*/
/*------------------------------------------*//*------------------------------------------*/
/*effects*/

#bluroverlay {
    background-color: transparent;
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;
    
    z-index: 5;
    
    backdrop-filter: 
        blur(10px);
    
    opacity: 0.7;
    transition: opacity ease-in 0.9s;
}

#vhssnow{
    background-image: url("../images/vhssnow.gif");
    background-repeat: repeat; 
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;

    z-index: 6;
    
    mix-blend-mode: color;

    opacity: 0.7;
    transition: opacity ease-in 0.9s;
}

#crtdisplay{
    background-image: url("../images/crtdisplay.png");
    background-repeat: repeat; 
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;

    z-index: 6;
    
    mix-blend-mode: overlay;
    
    opacity: 0;
    transition: opacity ease-in 0.9s;
}

#noise{
    background-image: url("../images/static.gif");
    background-repeat: repeat; 
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;

    z-index: 6;
    
    mix-blend-mode: overlay;
    
    filter: blur(1px);
    opacity: 0;
    transition: opacity ease-in 0.9s;
}

#colornoise{
    background-image: url("../images/colornoise.gif");
    background-repeat: repeat; 
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;

    z-index: 6;
    
    mix-blend-mode: overlay;
    
    opacity: 0;
    transition: opacity ease-in 0.9s;
}

#interference{
    background-image: url("../images/interference.gif");
    background-repeat: repeat; 
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;
    
    position: absolute;
    
    pointer-events: none;

    z-index: 11;
    
    mix-blend-mode: lighten;
    
    filter: blur(1px);
    opacity: 0;
    transition: opacity ease-in 0.3s;
}

#pagefadein {
    background-color: black;
    width: 100vw;
    height: 100vh;
    
    position: absolute;
    top: 0;
    bottom: 0;
    
    opacity: 1;
    transition: opacity 0.8s;
    pointer-events: none;
    
    z-index: 10;
}

#snow {
    position: fixed;
    inset: 0;
    
    width: 100vw;
    height: 100vh;
    
    pointer-events: none;
    z-index: 2; 
    
    opacity: 1;
    transition: opacity ease-in 0.9s;
}

/*------------------------------------------*//*------------------------------------------*/
/*content*/

#leftbar {   
    background-color: black;
    
    width: 8vw;
    top: 0;
    bottom: 0;
    left: 0;
    
    position: absolute;
    cursor: pointer;
    
    z-index: 10;

    -webkit-box-shadow:0px 0px 15px 15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 15px 15px rgba(0,0,0,1);
    box-shadow: 0px 0px 15px 15px rgba(0,0,0,1);
}

#rightbar {
    background-color: black;
    
    width: 8vw;
    top: 0;
    bottom: 0;
    right: 0;
    
    position: absolute;
    cursor: pointer;
    
    z-index: 10;
        
    -webkit-box-shadow:0px 0px 15px 15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 15px 15px rgba(0,0,0,1);
    box-shadow: 0px 0px 15px 15px rgba(0,0,0,1);
}

#maincontainer {
    width: 100vw;
    height: 100vh;
    
    top: 0;
    bottom: 0;
    
    overflow: scroll;
    transition: background ease-in 0.9s;
}


.row {
    min-height: 3vh;
    display: flex;
    flex-direction: row;
    
    justify-self: center;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 3vh;
 
    flex: 1;
}

.censored {
    filter: blur(10px);
}

.hidden {
    display: none;
    pointer-events: none;
}
/*------------------------------------------*//*------------------------------------------*/
/*animations*/