@font-face {
    font-family:arsenal;
    src:url(riotAssets/fonts/Arsenal-Bold.ttf) format(truetype);
}

@font-face {
    font-family:expose;
    src:url(riotAssets/fonts/Expose-Regular.otf) format(opentype);
}


/*!THIS IS WHERE THE ACTUAL WEBSTUFF STARTS!*/

html {
    width:100%;
    height:100%;

    margin:0;
    padding:0;

    filter:saturate(1.2);
}

body {
    display:flex;
    flex-direction:column;

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    background-color:rgb(255, 169, 39);

    text-align:center;
    font-family:arsenal;

    filter:blur(.5px);
    
    overflow-y:auto;
}

button {
    background-color:black;
    color: red;
    border:solid red 2px;
    font-family:expose;
    font-size:x-large;
    margin:.25em;
}

button:hover {
    background-color:red;
    color:black;
    border: solid black 2px;
}

p {
    margin:0;
    padding:0;
}

#topBanner {
    background-color:black;
    border-bottom: solid red 3px;
    color:red;

    text-shadow:red
        0 2px 5px,
        0 0 3px;

    width:100%;
    height:2.5em;

    padding-top:.8em;
    margin-bottom:.5em;

    flex-shrink:0;

    white-space:0;
}

#bottomBanner {
    background-color:black;
    border-top: solid red 3px;
    color:red;
    
    text-shadow:red
        0 2px 5px,
        0 0 3px;

    width:100%;
    height:2.5em;

    padding-top: .8em;

    flex-shrink:0;
}

#viewport {
    background-image:url(riotAssets/backgrounds/city.png);
    background-size:cover;

    justify-content:center;
    
    display: flex;
    flex-direction:column;
    height:100%;
}

#title {
    color:red;
    border: solid red 3px;
    background-color:rgba(0, 0, 0, 0.627);
    text-shadow: .1em .1em .1em black;

    width:fit-content;
    height:1.2em;

    padding-bottom:.2em;
    padding-left:.3em;
    padding-right:.3em;
    margin:1px auto;

    flex-shrink:0;

    font-family:expose;
    font-size:xxx-large;
}

#midsection {
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin:.8em;
    width:100%;
    height:100%;
}

#myThings {
    background-color:rgb(78, 78, 78);
    width:75%;
    height:100%;
    margin:1em auto;
    margin-top:0;
    margin-bottom:0;
    border-left:solid black 2px;
    border-right:solid black 2px;

    overflow-y:auto;

    z-index:5;
}

#display {
    background-image:url(riotAssets/backgrounds/roses_1.jpg);
    animation: rollUp 20s linear infinite;

    border: solid black 12px;
    outline: solid red 4px;

    
    padding:0;

    width:40%;
    height:25em;

    z-index:1;
}

#leftPanel {
    background-image:url(riotAssets/backgrounds/chain-link-fence.jpg);
    animation: rollDown 20s linear infinite;

    color:red;

    border: solid black 8px;
    outline: solid red 3px;
    border-radius:3px;


    padding:0;

    width:12%;
    height:20em;

    margin-top:2em;
    margin-right:-2em;

    z-index:2;
}

#rightPanel {
    background-image:url(riotAssets/backgrounds/chain-link-fence.jpg);
    animation: rollDown 20s linear infinite;

    border:solid black 8px;
    outline: solid red 3px;
    border-radius:3px;

    width:12%;
    height:20em;

    margin-top:2em;
    margin-left:-2em;


    z-index:2;
}

.panelContrast {
    background-color:rgba(0, 0, 0, 0.432);

    border:solid black 2px;

    width:80%;
    height:100%;

    margin:1em auto;
    margin-top:0;
    margin-bottom:0;
}

#jukebox {
    background-color:rgb(255, 169, 39);

    border:solid black 8px;
    outline:solid red 3px;
    border-radius:20px;

    padding:.5em;
    width:fit-content;
    margin:.5em auto;
    margin-bottom:1em;

    height:fit-content;
    width:fit-content;

    flex-shrink:0;

}

#scanlines {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(riotAssets/scanlines/Horizontal_5.png);
    background-repeat:repeat;
    animation: rollUp 2s linear infinite;
    opacity:.4;
    background-size:cover;
    z-index:9998;
    pointer-events:none;
}


/*!KEYFRAMES ZONE*/

@keyframes rollUp {
   
    from {
        background-position: 0 0;
    }
    to {
        background-position:0 -100%;
    }

}

@keyframes rollDown {

        from {
        background-position: 0 0;
    }
    to {
        background-position:0 100%;
    }

}

@keyframes textRoll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}