/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SPACER :) ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* ========================================================== */
/*           LINKED HTML: SITEMAP, RESOURCES, CREDITS         */
/*                        ONE MAIN BODY                       */
/* ========================================================== */
/* --- ▪▪▪ CUSTOM CURSOR ▪▪▪ ---  */
* {cursor: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/glove.cur), auto !important;} 

.floatright{float:right;
  padding-right:10px;}

.button{background-color:#e7dada;
border:solid 1px;
border-radius:5px;
width:30px;}
  
/* --- ▪▪▪ HOLDS ALL BOX1 COLUMNS  ▪▪▪ ---  */
.box1 {  
  display: flex;
  flex-wrap: wrap;
max-width:950px;
    margin:0 auto;}

/* --- ▪▪▪ TOP TITLE BAR ▪▪▪ ---  */  
.col1 {
  flex: 100%;
  height:35px;
  background-color: #23588d;
  background-image:linear-gradient(#69dbce, #2a82aa);
  padding-left: 10px;
  margin-top:70px;
    border-style:groove;
    border-color:#000;
     font-size: 20px;
  border-top-right-radius:8px;
  border-top-left-radius:8px;
  border-bottom:none;
}
#col1text {
  font-size:24px;
  font-family: "texty";
  color:#fff;
  }

/* --- ▪▪▪ MAIN BOX ▪▪▪ ---  */ 
.col2 {
  flex: 100%;
  background-color: #f1f1f1;
 /*background-image:url(#);*/
  padding: 10px;
  border-style:groove;
  border-color:#000;
    font-size: 20px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
}
#col2text {
  font-size:20px;
  padding-top:4px;
  }

/* FLOATING IMAGE / COMPUTER */
#floatingimg {
  position: absolute;
  left:900px;
  top:160px;
  z-index: 2;
  background-image: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/images/pc.png);
  width: 460px;
  height: 430px;
/*--- FLOATING ANIMATION ---*/
animation: float 3s ease-in-out infinite;}
@keyframes float {
 0% {transform: translateY(0);}
50% {transform: translateY(-5px);}
100% {transform: translateY(0);}
}
 /* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ EFFECTS & ANIMATIONS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* --- ▪▪▪ BACKGROUND ANIMATION ▪▪▪ ---  */
html {
  height: 100%
}
body {
   background: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/star-colors.jpg) repeat 0 0;
   background-color:#f8ffc4;
    height: 100%;
/*-webkit-animation: bg-scrolling-reverse 3.5s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 40px 40px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
   background-position: 40px 40px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
   background-position: 40px 40px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
 background-position: 40px 40px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 40px 40px;
  }
}*/
  
/* --- NAVIGATION TREE ---*/
ul{
margin: 3px; 
list-style: none; line-height: 1.5em; font-family: "texty";
li{
font-size: 20px;
position: relative;
&:before{
position: absolute;
left: -15px;
content: '';
display: block;
border-left: 1px solid #000;
height: .8em;
border-bottom: 1px solid #000;
width: 10px;
  }

&:after{
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid #000;
height: 100%;}
&.root{
margin: 0px 0px 0px -20px;
&:before{display: none;}

&:after{
display: none;
}
}

&:last-child{
&:after{ display: none }
}
}
}