/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SPACER :) ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* ========================================================== */
/*                     LINKED HTML: INDEX                     */
/*                     HAS BOTH SIDEBARS                      */
/* ========================================================== */
/* --- ▪▪▪ APPLIES TO ALL ▪▪▪ ---  */
* {box-sizing: border-box;}
/* --- ▪▪▪ CUSTOM CURSOR ▪▪▪ ---  */
* {cursor: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/glove.cur), auto !important;}

div {font-family:var(--font);}  /*changes font for all divs*/
.float-right{float:right;}

.grid-wrapper{display:grid;
grid-template-columns: auto auto;
text-align:left;
gap:10px;}

.scrollbox{font-size:18px; 
  color:var(--scrollbox-font);
  padding:10px;
  border: solid var(--scrollbox-border-width); 
  border-color:var(--scrollbox-border-color);
  background-color:var(--scrollbox-bg); 
  height:110px;
  width:340px;
  overflow:auto;
  border-image: var(--scrollbox-border);
}

.statuscafe{background-color:var(--status-bg);
color:var(--status-font);
font-size:17px;
padding-left:10px;
padding-top:5px;
overflow:auto;
height:112px;
border:solid 1px;
border-color:var(--border-hr)}

#paperclip-img {
  position: absolute;
  left: 1030px;
  top: 190px;
  z-index: 1001;
  background-image: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/images/paperclip-2.png);
  width: 80px;
  height: 120px;
}
/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ CONTAIN ALL ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
.contain-all {  
  display: flex;
  flex-wrap: wrap;
  max-width:90%; /* % or px value */
  max-height:100%;
  margin-bottom:none;
  margin:0 auto;}

.imgheader {
background-image: var(--header-image);
    background-color:var(--header-bg);
    /*-- parallax / fixed / sticky image --*/
  /*--background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;--*/
    width:90%;
    height:145px;
    margin: 0 auto;
  margin-top:none;
  border:solid 1px;
  border-bottom:none;
} /*margin-top:60px;*/

.imgheader-text {
  font-family:var(--username-font);
  color:var(--username-color);
  text-align:center;
  padding-top:25px;
  padding-right:30px;
  font-size:var(--username-size);
  filter: drop-shadow(4px 1px 0 var(--username-shadow)) drop-shadow(-1px 1px 0 var(--username-shadow)) drop-shadow(0 -1px 0 var(--username-shadow)) drop-shadow(1px 0 var(--username-shadow));
}
    


/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ NAVBAR / NAVIGATION ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */

/* --- ▪▪▪ NAVBAR ▪▪▪ ---  */
.navmenu {
  position: sticky;
  top: 0;
  z-index:1000;/*keeps navmenu on top of content*/
  flex:100%;
  background-color: var(--navbar-bg);
  border:solid;
  border-width: 1px;
  border-color: var(--border-hr);
  font-size: var(--font-body);
  text-align:left;
  height:40px;
  width:90%;
  margin:0 auto;
  margin-top:none;
}

/* --- ▪▪▪ NAVBAR DROPDOWN ▪▪▪ ---  */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  width:40%;
  border-radius:30px;
  
}

li {
  float: left; /* navmenu buttons left or right */
}

li a, .dropbtn {
  display: inline-block;
  color: var(--navbar-font); /*navmenu buttons font color*/
  text-align: center;
  padding: 8px 8px; /*top padding, text spacing*/
  text-decoration: none;
  
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: transparent;
  color:var(--dropdown-hover);/*navbar hover text*/
} /* button hover color */

li.dropdown {
  display: inline-block;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--dropdown-bg); 
  min-width: 170px;
  z-index: 1;
  font-size:var(--font-small);
  padding:5px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  border:solid 1px;
  border-top:none;
      
} /* dropdown background color, dropdown font size */

.dropdown-content a {
  color: var(--navbar-font);
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}/* dropdown link color*/

.dropdown-content a:hover {background-color: transparent;
color:var(--dropdown-hover);
} /* dropdown background hover color */

.dropdown:hover .dropdown-content {
  display: block;
}
/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SIDEBAR / SIDENAV ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* --- ▪▪▪ BROWSER CONTAINERS ▪▪▪ ---  */
.browser-header{
  flex: 100%;
  height:30px;
  background-color: var(--browser-header);
  border:solid 1px;
  border-color:var(--border-hr);
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom:none;
  width:100%;
}

.browser-header-text {
  font-size:var(--font-header);
  font-family: var(--font);
  color: var(--browser-text);
  padding:5px;
  }

.button-x{
background-color:var(--xbutton-bg);
color:var(--xbutton-color);
font-family:var(--font);
border:solid 1px;
border-radius:3px;
width:30px;
float:right;}

.browser-container{width:100%;
border:solid 1px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
margin-bottom:15px;
padding:10px;
background-color:var(--browser-body);}

/* --- ▪▪▪ PLAIN CONTAINER ▪▪▪ ---  */
.plain-cont{color:var(--plain-color);
border:solid 1px;
border-color:var(--border-hr);
border-radius:5px;
min-height:20%;
padding:20px;
background-color:var(--browser-body);}

/* --- ▪▪▪ COLUMN 1 ▪▪▪ ---  */  
.col1 {flex:20%;
  background-color: var(--col-bg-color);
  background-image:var(--col-bg);
  padding: 10px;
  padding-top:30px;
  border-style:solid;
  border-width:1px;
  border-color:var(--border-hr);
  border-top:none;
  border-bottom:none;
  border-right:none;
  font-size: var(--font-body);
}


/* --- ▪▪▪ COLUMN 2 ▪▪▪ ---  */  
.col2 {
  flex:50%;
  background-color: var(--col-bg-color);
  background-image:var(--col-bg); 
  padding: 10px;
  padding-bottom:30px;
  padding-top:30px;
  padding-left:20px;
  border:solid 1px;
  border-color:black;
  border-top:none;
  border-bottom:none;
  border-left:none;
  border-right:none;
  font-size: var(--font-body);
}

/* --- ▪▪▪ COLUMN 3 ▪▪▪ ---  */  
.col3 {
  flex: 20%;
  background-color: var(--col-bg-color);
  background-image:var(--col-bg);
  padding: 10px;
  padding-top:30px;
  border-style:solid;
  border-width:1px;
  border-color:black;
  border-top:none;
  border-bottom:none;
  border-left:none;
  font-size: var(--font-body);
}


/* --- ▪▪▪ FOOTER ▪▪▪ ---  */  
.footer {
  width:90%;
  margin:0 auto;
  height:40px;
  background-color: var(--navbar-bg);
  /*background-image:url(#);*/
  border:solid 1px;
  border-color:var(--border-hr);
  padding:10px;
  margin-bottom:-5px;
  font-size: var(--font-small);
  color:var(--font-color);
  text-align:center;}

.decor-img{background-image:var(--decor-img);
height:70px;
border-radius:8px;
border:solid 1px;
border-color:var(--border-hr);}

 /* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ NAVBAR ICONS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
.icon-grid{display:grid;
grid-template-columns: 8px auto;
padding-left:10px;
gap:none;}

.icon-webmaster {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-webmaster);}
.icon-blog {background-color:transparent;
  background-size:cover;
  width:21px;
  height:20px;
  background-image:var(--icon-blog);}
.icon-toybox {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-toybox);}
.icon-resources {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-resources);}
/*-----*/
.icon-gallery {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-gallery);}
.icon-tos {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-tos);}
/*-----*/
.icon-follow {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-follow);}
.icon-guestbook {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-guestbook);}
.icon-toyhouse {background-color:transparent;
  background-size:cover;
  width:20px;
  height:20px;
  background-image:var(--icon-toyhouse);}


/* --- ▪▪▪ RESPONSIVE LAYOUT // when screen is less than 700px wide, the columns stack ▪▪▪ ---  */
@media (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
 /* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ EFFECTS & ANIMATIONS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */


/* --- ▪▪▪ BACKGROUND ANIMATION ▪▪▪ ---  */
html {
  height: 100%
}
body {
   background: var(--background-image) repeat 0 0;
   background-color:var(--background);
  height: 100%;}
  /*---
   background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  ---*/
  /*-webkit-animation: bg-scrolling-reverse 4s 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;
  }
}*/
  
.marquee {
  width: 400px;
  line-height: 10px;
  background-color: transparent;
  color: var(--browser-text);
  font-size:16px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}