@font-face {
font-family: 'neoblock';
src: url(https://file.garden/aC08SIKuVwsQ8go5/NeoblockdemoRegular-gwAO4.otf);
}

@font-face {
  font-family:'playwrite';
  src: url(https://file.garden/aC08SIKuVwsQ8go5/Playwrite_AU_QLD.zip);
  }

body {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/wine.png');
  background-size: 25%;
  background-color: #282f32;
  color: #282f32;
  font-size: 14px;
}

/*please dont look at my code its insane and barely works*/


     
        
 /* loading screen - taken out due to ironically causing the page to load slower
 body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://file.garden/aC08SIKuVwsQ8go5/load.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
} 
end loading screen */

/*link behavior*/
/* unvisited link */
a:link {
  color: #44505a;
}

/* visited link */
a:visited {
  color: #44505a;
}

/* mouse over link */
a:hover {
  color: #acb3b4;
}

/* selected link */
a:active {
  color:#acb3b4;
}

/*outside*/

  
#computer {
  min-width: 928px; 
  margin: auto;
  }
#checker {
  position: sticky;
  top: 0;
 width: 100%;
 margin: auto;
}


/*main grid*/
  .lcectn {
    width: 968px;
    height: 1780px;
    background-image:url('https://file.garden/aC08SIKuVwsQ8go5/IMG_3184.png');
    background-size: 100%;
   position: relative;
   margin: auto;
   margin-top: 50px;
   padding: 40px;
   z-index: 1;
    }
    
  .container {
    background-image: url("https://file.garden/aC08SIKuVwsQ8go5/dmndbg.png");
    background-size: 25%;
    background-color: #282f32;
    position: relative;
    background-repeat: repeat;
        border-top: 3.5px solid ;
        border-left: 3.5px solid ;
        border-right: 3.5px solid ;
        border-bottom: 3.5px solid ;
   border-width: 6px;
   border-color: black;
   border-radius: 25px;
    height: 1740px;
    width: 928px;
    margin: auto;
    overflow: hidden;
    display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}

.item1 {
  
  grid-area:1/1/span 6/span 15;
}
#banner {
  margin: auto;
  margin-top: 5px;
  width: 98%;
  height: 90%;
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/nbanner.png');
  background-size:cover;
  border-style: solid;
  border-color:black;
  border-radius: 25px;
}
#title {
  font-family: 'neoblock';
    font-style: italic;
    color: #acb3b4;
    font-size: 75px;
    opacity: .75;
  margin-top:0;
  margin-left:2px;
  z-index: 5;
     }

.item2 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/sidebar.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 40px;
  grid-area: 4 / 1 / span 20/ span 4;
}
.item3 {
  background-image:url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonbgsmall.jpeg');
  background-size: cover;
  border-style: solid;
  border-color: black;
  border-width: 7px 2px 4px 2px;
  border-radius: 7% 7% 1% 1%;
  text-align: center;
  position: relative;
  overflow: auto;
  padding: 30px;
  grid-area: 7 / 5 / span 7 / span 6;
}
.item4 {
  background-image:url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonbgsmall.jpeg');
  background-size: cover;
  border-style: solid;
  border-color: black;
  border-width: 4px 2px 7px 2px;
  border-radius: 1% 1% 7% 7%;
  text-align: center;
  position: relative;
  overflow: auto;
  padding: 30px;
  grid-area: 14 / 5 / span 7 / span 6;
}
.item5 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/sidebar.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px;
  padding-top:120px;
  grid-area: 4 / 11 / span 20/ span 4;
}

.bat{
  width: 20px;
  grid-area: 24/3/span 1 /span 1;
  }
  
.item6 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonhorizontal.jpg');
  background-size: cover;
  border-style: solid;
  border-color: black;
  position:relative;
  overflow: hidden;
  grid-area: 24/ 1 / span 3 / span 15;
}
.item7 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonbgsmall.jpeg');
  background-size: contain;
  border-style: solid;
  border-color: black;
  overflow: hidden;
grid-area: 27 / 2 / span 6 / span 6;
}
.item8 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonbgsmall.jpeg');
  background-size: contain;
  border-style: solid;
  border-color: black;
grid-area: 27 / 8 / span 6 / span 6;
}
.item9 {
  background-image: url('https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/moonbgsmall.jpeg');
  border-style: solid;
  border-color: black;
  overflow: hidden;
grid-area: 33 / 1 / span 3 / span 15;
}
.item10 {
  background-color: #82B2C0;
  border-style: solid;
  border-color: black;
grid-area: 36 / 2 / span 7 / span 12;
}
#rogue {
 height: 20px;
  width: 20px;
  grid-area: 21/8;
 z-index: 5;
  
}
/*inner lace borders*/
#lace1 {
  position: absolute;
  top: 0;
  left: 0;
  }
#bottomlace1 {
 position: absolute;
 bottom: 0;
 left: 0;
  }
#lace2 {
  position: absolute;
  top: 0;
  left: 0;
  }
#bottomlace2 {
  position: absolute;
  bottom:0;
  left: 0;
}
#bl3 {
  position:absolute;
  bottom: 0;
  right: 0;
}
#smalllacetop {
  position: absolute;
  top: 0;
  left: 0;
}

#sltop2 {
  position: absolute;
  top: 0;
  left: 310px;
}
#sltop3 {
  position: absolute;
  top: 0;
  right: 0;
}


/*sidebars*/
.scrub{
  width: 150px;
  height: 400px;
  display: flex;
  flex-direction: column;
  padding-top: 80px;

}
.bb {
  width: 150px;
  height: 28px;
  background: linear-gradient(#5c6269, #000000);
  border-style: solid;
  border-radius: 10px;
  border-color: #282f32;
  background-size: contain;
  background-color: #282f32;
  color: #acb3b4;
  padding: 1px;
  margin-top:10px;
  overflow: contain;
  
}
.bigbb {
  width: 150px;
  height: 80px;
  background: linear-gradient(#5c6269, #000000);
  border-style: solid;
  border-radius: 10px;
  border-color: #282f32;
  background-size: contain;
  background-color: #282f32;
  line-height:normal;
  color: #acb3b4;
  padding: 4px;
}

 .todo {
  width: 150px;
  height: 160px;
  border-style: solid;
  border-radius: 10px;
  border-color: black;
  color: #282f32;
  padding: none;
  background-image: url("https://file.garden/aC08SIKuVwsQ8go5/graphics/backgrounds/greenbg.webp");
  overflow:auto;
  ::-webkit-scrollbar 
    display: none;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
}
.todoentry {
  padding: 10px;
}
.titlebx {
  background-color: #282f32;
  color:#acb3b4;
  top: 0;
  border-style: solid;
 border-radius: 7px 7px 0 0;
 border-width: 1px 0 3px 0;
  border-color: black;
  text-align: center;
  font-size: 12px;
 height: 25px;

  
}
  
.flex-container {
  width: 150px;
  height: 400px;
  display: flex;
  flex-direction: column;
  padding-top: 200px;
  justify-content: space-evenly;
  }
  
#rightbox1 {
  border-style: solid;
  border-radius: 10px;
  width: 150px;
  height:100px;
  margin: 4px;
  line-height: 75px;
  }
#rightbox2 {
  border-style: solid;
  border-radius: 10px;
  width: 150px;
  height: 100px;
  margin: 4px;
  line-height: 75px;
  }
#rightbox3 {
  border-style: solid;
  border-radius: 10px;
  width: 150px;
  height: 200px;
  margin: 4px;
  line-height: 75px;
}

/* i was just testing shit with this 
#virus {
  float:inline-end;
  position: absolute;
  top: 50px;
  left:10px;
  
}*/
/*stamp animation*/
.skrull-content {
  list-style:none;
  height: 100%;
  display:flex;
  animation: scrolling 10s linear infinite;
}
  @keyframes scrolling {
    0% { transform: translateX(0px); }
    100% { transform: translateX(-900px); }
  }
  
  
.blink-content {
  list-style:none;
  height: 100%;
  display:flex;
  animation: scrolling 10s linear infinite;
}
/*stamp slide in item 7*/
.vertiscrl {
    top: 6em;
    display: flex;
    flex-direction: column;
    height: 900px;
    position: relative;
    box-sizing: border-box;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0%   { top:   15em }
    100% { top: -20em }
}


/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol62.cur), auto !important;} /* End https://www.cursors-4u.com */
/* random animation ripped of youtube that i couldnt get to work
:root {
    --slide-count: 3;
    --slide-height: 100px;
    --gap: 2px;
  }
  
#vertiscrl {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: moveUP calc(var(--time) * var(--slide-count)) linear infinite;
}

@keyframes moveUP {
  0% {
    transform: translateY(0);
  }
  100% {
   transform: translateY(calc(-1 * var(--slide-count) * var(--slide-height) + var(--gap) * 2)));
    }
  } */