:root {
  --bg:linear-gradient(#8677FF,#503bff);
  --bg1:#DEDEDE;
  --bg2:#404040;
  --bg3:#262626;
  --bg4:#1a1a1a;
  --bg5:#121212;
  --border:rgb(0, 0, 0, 0.5);
  --outline:#000;
  --text:#9f8cff;
  --text_light:#fff;
  --text_dark:#000;
  --accent:#a7eb28;
a:link { color: #a7eb28; }
a:visited { color:#a7eb28; } 
  
  display:flex;
  justify-content: center;
  align-items: center;
  
  cursor:url('https://quimiri.neocities.org/cursors/touch.png'), auto;
}

body {
  font-family:ms pgothic;
  font-variant:small-caps;
  font-size:0.8em;
  font-weight:bold;
  color:var(--text);
  background-image:var(--bg), url('https://quimiri.neocities.org/images/bg.gif');
  min-height:100vh;
  height:100%;
  background-blend-mode:screen;
}

a {
  transition:letter-spacing 0.1s ease-in-out;
}
a:hover {
  letter-spacing:0.5px;
  transition:letter-spacing 0.1s ease-in-out;
}

a.nospacing:hover {
  letter-spacing:0px !important;
}

.container {
  margin:5px;
  padding:5px;
  border:2px outset var(--border);
  background:var(--bg5);
  width:80vh;
  outline:2px solid var(--outline);
  position:relative;
  display:flex;
}

.small { flex: 1 1 9%; }
.large { flex: 1 1 70%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

.highlight { 
  padding:0px 2px 0px 2px;
	background:var(--text);
  color:var(--text_dark) !important;
}

.highlight2 { 
  padding:0px 2px 0px 2px;
	background:var(--accent);
  color:var(--text_dark) !important;
}

.underline {
  text-decoration:underline;
}

.big-green {
  text-decoration:wavy underline;
  color:var(--accent);
}

.wavy {
  text-decoration:wavy underline;
  
}

.no-underline {
  text-decoration:none !important;
}

p {
 margin:5px; 
font-weight:normal;
}

h1, h2, h3, h4 {
  margin:5px;
  font-weight:normal;
  font-family:AnalogueOS;
}

@font-face {                  
font-family: 'AnalogueOS';
src: url(https://humantooth.neocities.org/fonts/AnalogueOS-Regular.woff) format('woff');
font-weight: normal;
}

a.broken:hover {
   cursor:url('https://quimiri.neocities.org/cursors/no%20touch.png'), auto;
}

a:hover, a:focus, button:hover, button:focus, .checkbox-button:hover, .checkbox-button:focus {  cursor:url('https://quimiri.neocities.org/cursors/question%20touch.png'), auto;
}

header {
 padding:5px;
  color:var(--accent);
 margin:5px;
 height:5vh;
 overflow-wrap: break-word;
 align-items: center;
 justify-content: center;
 text-align:center;
}

.header-button {
background: var(--bg);
border:2px ridge var(--border);
margin:0.3vh;
height:4vh;
width:4vh;
display: flex;
justify-content: center;
align-items: center;
}

.box {
  overflow-wrap: break-word;
  margin:5px;
  padding:5px;
  border:2px solid var(--border);
  outline:2px solid var(--outline);
  border-style: inset;
}

/* backgrounds */
.bg1 {
  color:var(--text_dark);
  background:var(--bg1);
}

.bg2 {
  color:var(--text);
  background:var(--bg2);
}

.bg3 {
  color:var(--text);
  background:var(--bg3);
}

.bg4 {
  color:var(--text);
  background:var(--bg4);
}

.bg5 {
  color:var(--text);
  background:var(--bg5);
}

.bg6 {
  color:var(--text_dark);
  background:var(--accent);
}

div.bg6 a {
  color:var(--text_light) !important;
}

div.bg6 a:hover {
  outline:2px dashed var(--text_dark) !important;
}


.bgtile1{
  background-image: linear-gradient(var(--bg1), var(--bg1)), url('https://i.imgur.com/0ppMbt8.png');
  background-size:5%;
  background-repeat:repeat;
  background-blend-mode:multiply;
}

.bgtile2{
  background-image: linear-gradient(var(--bg3), var(--bg3)), url('https://i.imgur.com/0ppMbt8.png');
  background-size:5%;
  background-repeat:repeat;
  background-blend-mode:multiply;
}

.bgtile3{
  color:var(--text_dark);
  background-image: linear-gradient(var(--accent), var(--accent)), url('https://i.imgur.com/0ppMbt8.png');
  background-size:5%;
  background-repeat:repeat;
  background-blend-mode:multiply;
}

.bgtile4{
  color:var(--text);
  background-image:url('https://i.imgur.com/ktsCvqU.gif');
}

.bgART {
  color:var(--text_dark);
  background:linear-gradient(to bottom,#8677FF,#503bff), url('https://i.imgur.com/uYGnc37.gif'); 
  background-repeat:repeat;
  background-blend-mode:overlay;
}

.bgKF {
  color:var(--text_dark);
  background:linear-gradient(to bottom,#FFD900, #FFAC00, #F97900), url('https://i.imgur.com/ytv0Tf3.gif');
  background-repeat:repeat;
  background-blend-mode:overlay;
}

.bgOW {
  color:var(--text_light);
  background: linear-gradient(to bottom,#000, #B10024, #C5FF67), url('https://i.imgur.com/kcVT9EC.gif');
  background-repeat:repeat;
  background-blend-mode:overlay;
}

.bgHAZARD {
background: linear-gradient(to bottom,#FFF700,#FFB800), url('https://i.imgur.com/TWtdHkQ.gif'); background-repeat:repeat;
background-blend-mode:overlay; 
}
/* backgrounds end */

.divider {
width:99%;
height:0.5vh;
margin:5px;
border-radius:5px;
border:2px outset var(--border);
margin-left:0px;
background-size:15vh !important;
background: linear-gradient(to bottom,#fffdcc,#a6ff00), url('https://i.imgur.com/TWtdHkQ.gif');
background-blend-mode:color;
}

.divider2 {
width:99%;
height:0.5vh;
margin:5px;
border-radius:5px;
border-top:2px outset var(--border);
margin-left:0px;
}

.layer {
  width:80vh;
  display:flex;
  justify-content: center;
}

.name {
  color:var(--accent);
}

.grid {
  display:grid;
}

.grid-row{
  display:flex;
  flex:space-between;
}

.column {
  display: inline-flex;
  flex-direction: column;
}

.row {
  display: row !important;
  flex-direction: row;
}

.inline-row {
  display: inline-flex !important;
  flex-wrap:wrap;
  flex-direction: row;
}

.center {
  justify-content:center;
  object-align:center;
  text-align:center;
}

.left {
  text-align:left;
}

.right {
  text-align:right;
}
/* nav */

.navbar {
  margin:-5px;
  padding:2px;
  margin-bottom:0px;
  width:102%;
  display:flex;
  justify-content:space-between;
  background:var(--bg4);
  border:0px;
  border-bottom: 2px solid var(--border);
  border-style: outset;
}

.dummy-buttons{
  margin-right:4px;
}

nav button, nav button:visited {
  color:var(--accent);
  font-family:ms pgothic;
  font-weight:bold;
  font-variant:small-caps;
  display:inline-block;
  width: fit-content;
  text-align: center;
  object-align:center;
  text-decoration: none !important;
  padding:2px 5px 2px 5px;
  background:var(--bg4);
  border:2px solid var(--border);
  outline:2px solid var(--outline);
  border-style: outset;
}

nav button:hover {
  background:var(--accent);
  color:var(--text_dark) !important;
  border-style:inset;
}

nav button:active {
  background:var(--accent);
  color:var(--text_dark) !important;
  border-style:inset;
}

.button-checkboxes {
  display: flex;
}

.hidden-checkbox {
  display: none;
}

.checkbox-button {
  color:var(--accent);
  font-family:ms pgothic;
  font-weight:bold;
  font-variant:small-caps;
  display:inline-block;
  width: fit-content;
  text-align: center;
  object-align: center;
  justify-content:center;
  text-decoration: none !important;
  padding:3px 5px 2px 5px;
  background:var(bg4);
  border:2px solid var(--border);
  outline:2px solid var(--outline);
  border-style: outset;
}

.checkbox-button:hover {
  background:var(--accent);
  color:var(--text_dark) !important;
  border-style:inset;
}

.hidden-checkbox:checked + .checkbox-button {
  background:var(--accent);
  color:var(--text_dark) !important;
  border-style:inset;
}

.hidden-checkbox:checked + .checkbox-button:hover {
  background:var(--accent);
  color:var(--text_dark) !important;
  border-style:inset;
}

#dropdown-content {
  display:none;
  margin-left:0;
  margin-top:5vh;
  padding:0px;
  width:fit-content;
  height:fit-content;
  position: absolute;
  z-index: 1;
}

#dropdown-content a {
  color:var(--accent);
  display:block;
  background:var(--bg4);
  padding:5px;
  margin:1px;
  width:16vw;
  border:2px outset var(--border);
  outline:2px solid var(--outline);
  text-decoration:none;
  font-style:none;
}

#dropdown-content a:hover {
  color:var(--text_dark) !important;
  letter-spacing:0.5px;
  background:var(--accent);
  border:2px inset var(--border);
  font-style:italic;
  transition: letter-spacing 0.1s ease-out, box-shadow 0.1s ease-out, transform 0.1s ease-out, font-style 0.1s ease-out;
}

/* nav ends */


header {
margin:5px;
padding:5px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom,#8677FF,#8677FF), url('https://images.steamusercontent.com/ugc/991262566628548285/2A23B0BB92EC12348B1180161261CB2DD10AEFED/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false'); background-repeat:repeat;
background-position:center;
background-blend-mode:overlay;
height:8vh;
width:86vh;
border:2px inset var(--border);
outline:2px solid var(--outline);
}

.title {
  mix-blend-mode:exclusion;
  text-shadow:0 0 10px rgb(255, 242, 117, 0.7) !important;
  padding-top:1.3vh;
  color:var(--accent);
  font-size:3em;
  font-family:SectorMono;
}

@font-face {                  
font-family: 'SectorMono';
src: url(https://humantooth.neocities.org/fonts/SectorMono-Normal.woff) format('woff');
font-weight: normal;
}

/* crab */

.crab {
  height:15vh;
  background-repeat: no-repeat;
  background-position:center;
  object-fit:contain;
}
  
img.crab:focus {
  cursor:url("https://quimiri.neocities.org/cusors/heart%20grab.png"), auto;
  animation:;
}

img.crab:hover {
  cursor:url("https://quimiri.neocities.org/cursors/heart%20grab.png"), auto;
  animation-name:crab-touch;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-in-out;
}

@keyframes crab-touch {
   0% {
transform: scale(1, 1)
  }
  
  50% {
 transform: scale(0.9, 1.1)
  }

  100% {
transform: scale(1, 1)
  }
}
  
/* crab ends */

.icon {
  margin:5px;
  scale:1;
  transition:scale 0.1s ease-in-out, letter-spacing 0.1s ease-in-out;
}

.icon:hover {
  outline:1px dashed var(--accent);
  scale:1.05;
  transition:scale 0.1s ease-in-out, letter-spacing 0.1s ease-in-out;
}

.buddy {
  scale:1;
  transition: scale 0.1s ease-in-out;
}
.buddy:hover {
  outline:1px dashed var(--accent);
    scale:1.05;
  transition: scale 0.1s ease-in-out;
}

.ico {
  width:8vh;
}

marquee {
  text-align:center;
  object-align:center;
  justify-content:center;
  padding-top:2px;
}

.wingdings {
  font-family:Wingdings;
}

.webdings {
  font-family:Webdings;
}

.game img{
  height:15vh;
}

.stamp {
  height:56px;
  margin:5px;
}

.blinkie {
height:20px;

}

.list-links li::marker{
  content:"🖇";
}

.list-stars, .list-stars2 li{
  text-align:left;
}

.list-stars li::marker{
  content:"★ ";
}

.list-stars2 li::marker{
  content:"☆ ";
}


/* tree */
.tree_view {
  margin:10px;
}
ul.tree li{
    color:var(--text_light) !important;
}

.tree a {
  color:var(--accent) !important;
  padding:0px 2px 0px 2px;
  text-decoration:none;
  letter-spacing:normal;
  transition:letter-spacing 0.1s ease-in-out;
  font-size:1.1em;
  margin:-7px !important;
  
}

.tree a:hover {
  color:var(--text_dark) !important;
  background:var(--accent);
  text-decoration:none;
  letter-spacing:1px;
  font-style:italic;
  transition:letter-spacing 0.1s ease-in-out;
}

ul.tree, ul.tree ul {
    list-style: none;
     margin: 0px;
     padding: 0px;
   } 
   ul.tree ul {
     margin-left: 70px;
   }
   ul.tree li {
     margin: -3px;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid var(--accent);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:50px;
      color:white;
      border-bottom:1px solid var(--accent);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid var(--accent);   
   }

/* tree */

/* tabs */

.tab button {
  background-color: rgb(0, 0, 0, 0);
  border: none;
  outline: none;
  transition: 0.2s;
  margin:5px;
}

.tab button:hover {
  outline:1px dashed var(--accent);
    scale:1.05;
  transition: scale 0.1s ease-in-out;
}

.tab button.active {
  outline:1px dashed var(--accent);
  scale:1.05;
  transition: scale 0.1s ease-in-out;
  background:linear-gradient(to bottom,var(--text), var(--accent)), url('https://i.imgur.com/uYGnc37.gif'); 
  background-repeat:repeat;
  background-blend-mode:overlay;
}

.tabcontent {
  display: none;
  padding: 5px;
}

/* tabs end */

/* profile */

.profile_img {
  height:20vh;
  width:20vh;
  background-position:center;
  background-size:cover;
  border:2px inset var(--border);
  outline:2px solid var(--outline);
  float:left;
  margin:5px;
}

.tabcontent p, .tabcontent h1, .tabcontent h2,.tabcontent h3{
text-align:left;  
}

.tabcontent p {
font-weight:normal;
}

.note {
font-size:0.9em;
text-align:left !important;
font-variant:lowercase;
font-style:italic;
font-weight:normal;
opacity:70%;
}

.picture {
  border:2px inset var(--border);
  outline:2px solid var(--outline);
}

/* profile ends */

/* better marquee */

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   30em }
    100% { top: -75em }
}

/* better marquee ends */