/* fonts */
@font-face {
  font-family: "SpaceMono";
  src: url(assets/fonts/SpaceMono-Regular.woff) format("woff"),
       url(assets/fonts/SpaceMono-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Beech";
  src: url(assets/fonts/Beech.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Newspaper";
  src: url(assets/fonts/newspaper.woff2) format("woff2"),
      url(assets/fonts/newspaper.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Barcode";
  src: url(assets/fonts/LibreBarcode128Text-Regular.woff2) format("woff2"),
      url(assets/fonts/\LibreBarcode128Text-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
/*       */


/*                */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
::selection {
  background-color: #000000;
  color: #FF00FF;
}
/*                */



/* background */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-image: url(assets/hazeflow.gif);
    background-color: BLACK;
    background: linear-gradient();
    
    font-family: SpaceMono;
    min-height: 100%;
}

.overlay {
    position: absolute;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, black, transparent, black)
}
/*            */

/* text */
.beech {
    font-family: Beech;
    font-size: 2.5rem;
}

.colorful {
    text-shadow: 1px 1px cyan, 
                -1px 1px yellow, 
                1px -1px magenta, 
                -1px -1px magenta;
}

.current {
    color: white;
    text-shadow: 1px 1px cyan, 
                 -1px 1px black, 
                 1px -1px magenta, 
                 -1px -1px magenta;
}
/*      */

/* actual stuff */
h1 {
    font-family: Newspaper;
    font-size: 3rem;
    color: #ff0088;
    text-align: center;
}

footer {
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 100px;
    background-image: url(assets/inv-silly.gif);
    background-size: contain; 
    white-space: nowrap;
}

header {
    padding-left: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: magenta 2px solid;
    background-image: url(assets/ripple.gif);
        
    text-shadow: 1px 1px cyan, 
                -1px 1px yellow, 
                1px -1px magenta, 
                -1px -1px magenta;
}

/* header hover thingy */
header a {
    color: black;
    padding-left: 5px;
    padding-right: 5px;
    transition: 0.3s;
}

header a:hover {
    background-color: #000000;
    color: white;
    font-size: large;
}
/*              */

a:hover {
    color: magenta;
    transition: 0.3s;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80vh;
}

.home-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
}

.home {
    justify-items: center;
    justify-content: center;
    
    align-items: center;
    padding: 15px;
    
    border: magenta 2px solid;
    background-image: url(assets/static.gif);
    
    display: flex;
    overflow: clip;
}

.term {
    overflow-x: auto;
    flex-direction: column;
    font-size:smaller;
    
}

.comm {
    display: flex;
    overflow: hidden;
}

.container div {
    margin: 10px;
}

.box {
    align-items: center;
    width: 80%;
    padding: 15px;
    
    border: magenta 2px solid;
    background-image: url(assets/static.gif);
    
    display: flex;
    overflow: scroll;
    overflow-x: auto;
}

.stopplease {
    overflow: clip;
}

.hbox {
    width: 100%;
}

.no {
    background-image: url(assets/static.gif);
    background-color: black;
}

.galerry {
    padding: 10px;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: clip;
}

.caroussel {
    height: 250px;
    overflow: hidden;
    justify-items: center;
    cursor: grab;
}

.imgContainer {
    display: flex;
    flex-direction: row;
    height: 300px;
    width: 300px;
    white-space: nowrap;
         
}

.caroussel:active {
    cursor: grabbing;
}

.imgContainer img{
    height: 300px;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.vemp {
    float: right;
    background-color: black;
    color: white;
    text-shadow: none;
}
/*               */