/*roots*/
/*haha like deltarune*/
/*dark. darker, yet darker. photon readings negative*/
/* very, very interesting */
/*i dont know anything else in entry 17*/
/* #fakefan */

:root {
    --black: #4C4963;
    /* ----------------------- shadows */
    --shad1: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black), 1px -1px var(--black), -1px 1px var(--black), 1px 1px var(--black), -1px -1px var(--black);
    --shad2: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black);
    --shad3: 0 1px white, 1px 0px white, 0 -1px white, -1px 0px white;
    --outline1: drop-shadow(0px 1px var(--black)) drop-shadow(0 -0.5px var(--black)) drop-shadow(1px 0 var(--black)) drop-shadow(-0.5px 0 var(--black));
    --outline2: drop-shadow(0px 1px white) drop-shadow(0 -0.5px white) drop-shadow(1px 0 white) drop-shadow(-0.5px 0 white);
    --outline3: drop-shadow(0px 2px white) drop-shadow(0 -1px white) drop-shadow(2px 0 white) drop-shadow(-1px 0 white);
}

/*basics*/


.inconsolata-p {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

* {
  font-family:inconsolata;
  box-sizing: border-box;
  image-rendering: pixelated;
}

body {
  background: url(https://nilaish.neocities.org//images/background.jpg);
  background-size: 400px;
  
  font-size:16px;
  text-align:center;
  
  margin:0;
  min-height: 100vh;
  padding: 90px;
  padding-top:70px;
  font-family: inconsolata-p;
  
  display: flex;
  justify-content: center;
  
  color: var(--black);
}


/*borders*/
.border-side {
  border-left:1px dotted;
}

.border-bottom {
  border-bottom: 1px dotted;
}

.lace_wrapper {
  border: 20px solid;
  border-image: url(https://nilaish.neocities.org//images/lace.png) repeat;
  border-image-slice: 80;
  border-image-outset: 10px;
  padding:2px;
}


/*main*/
.container {
  border: 1px dashed;
  padding: 20px;
  background: url(https://nilaish.neocities.org//images/plaidbkg.jpg);
  background-size: 350px;
  filter: brightness(1.5);
  outline-color: white;
  outline:2px;
  
  width: 1000px;
  max-width: 100%;
}

/*grid*/
.main {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr) 210px;
  gap: 20px;
}


/* header*/
.header {
  position: relative;
  display: flex;
  height: 160px;
  border-radius: 6px 6px 60px 6px;
  overflow: hidden;
  align-items: flex-end;
  object-fit: cover;
}

.nav {
  flex-direction: column;
  width: 40px;
  height:100%;
  display: flex;
  border-right: 2px solid black; /* connects to header border */
  position: relative;
  z-index: 2;
}

.navbtn {
  flex: 1;   
  display:flex;
  width: 100%;
  border: 1px solid black;
  background: #9DB9E0;
  cursor: pointer;
  align-items: center;
}

.navbtn + .navbtn {
  border-top: none;
}

.head-img {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;              
  background: url("https://nilaish.neocities.org//images/banner.gif");
  filter: brightness(0.4);
  fit: fill;
  object-fit: cover;

  z-index: 0;
}

#title {
  display:flex;
  justify-content: flex-end;
  position: relative;
  z-index: 200;
  margin-top:auto;
  margin-left:auto;
  color:black;
  padding-right: 15px;
  
  
  font-family: 'instrument-serif';  
  letter-spacing: 5px;
  font-weight:lighter;
  font-size:130px;
  text-shadow: 0 3px #77BBFF, 3px 0 #77BBFF ;
  filter: drop-shadow(0.5px 0.5px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0.5px white) drop-shadow(0.5px 0.5px 1px white) drop-shadow(0.5px 0.5px 1px black) ;
  
  background:none;
  border: none;
  }

/*partitions left and right*/

.part {
  background: url(/images/monstertexture.jpg) repeat;
  background-size: auto;
  border:ridge 4px;
  outline: solid 4px black;
  border-radius: 10px;
}

#left {
  padding:0px;
  padding-top:0px;
  border-radius: 6px 6px 6px 20px;
}

#right {
  padding:0px;
  padding-top:0px;
  border-radius:6px 6px 60px 6px;
}

.sidebox {
  text-align: left;
  border: solid 6px black;
  background: url(/images/sideboximage.jpg);
  outline: ridge black;
  border-radius: 6px;
  margin:auto;
  margin-top:10px;
  margin-bottom:10px;
  width:145px;
  padding:0px;
  color: #DDEEFF;
  text-shadow: 1px 1px 0 #4C4963;
}

.link {
  width: 90%;
  margin-top: 4px;
  margin-left: 2px;
  margin:10px; 
  
  border-radius: 4px;
  background: linear-gradient(180deg, gray 0%, white 45%, gray 47%, gray 60%, lightgray 100%);
  padding-left: 5px;
  border: solid 2px gray;
  filter:drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray)drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) ; 
}

/*items*/

.calendar {
  width: 200px;
  height: 180px;
}


.marquee {
  width:100%;
  border-radius: 4px;
  background: linear-gradient(180deg, gray 0%, white 45%, gray 47%, gray 60%, lightgray 100%);
  padding-left: 5px;
  border: solid 2px gray;
  filter:drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray)drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) ;
}

.updates {
  position: relative;
  text-align: left;
  margin: 10px auto;
  width: 145px;
  background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%);
  border: 1.5px solid #c9c9c9;
  border-radius: 6px;
  outline: 2px ridge black;
  padding: 0;
  box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada;
}

.updates-scroll {
  overflow-y: auto;
  height:100px;
}

#music-player {
  position: fixed;
  width:100px;

  z-index: 9999;
  
  animation: float 3s ease-in-out infinite;
}

#ds {
  width:350px;
  height: auto;
  
  position: fixed;
  top:290px;
  left:520px;
}

#headphones {
  position:fixed;
  width:150px;
  
  top:10%;
  left:30px;
  
  z-index: 9999;
  
  animation: float 3s ease-in-out infinite;
}

#freaking-headphones {
  width: 300px;
  height:auto;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}


/*text*/

h1 {
  color: white;
  margin: 0;
  font-size: 18px;
  text-shadow: var(--shad2);
  letter-spacing: 3px;
  border-color: var(--black);
  font-family: instrument-serif;
}

h2 {
  color: white;
  margin: 0;
  font-size: 17px;
  text-shadow: var(--shad2);
  letter-spacing: 3px;
  border-color: var(--black);
}

h3 {
  color:white;
  margin:5px;
  margin-bottom: 7px;
  padding-left: 5px;
  text-shadow: 0 0 3px black;
  
  border-radius: 4px;
  background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:solid 2px gray;
  filter:drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray)drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) ;
}

p {
  margin: 0;
  letter-spacing:1.5px;
  font-size:15px;
}

a:hover {
  font-style: italic;
}

.backlink {
  font-size: 11px;
  font-weight: bold;
}

/*scrollbar*/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2F4163;
    box-shadow: inset 1px 1px 2px #4C4963, inset -1px -1px 2px #2F4163;
}


@media (max-width: 800px) {

  .main-content {
      grid-template-columns: 1fr;
  }
  
  #left,
  #middle,
  #right {
      width: auto;
  }
    
}