@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');

* {
  box-sizing: border-box;
}

:root {
 --background-image: url(./stars.png);
 --background: #2f3c45;
 --main-bg: #DAE6EC;
 --side-bg: #8198AB;
 --color: #ffffff;
 --main-color: #000000;
  
 --obsidian-color: #F3F3F3;
 --obsidian-bg: #000000;
 --pomegranate-color: #FFFFFF;
 --pomegranate-bg: #F7044D;
 --citrine-color: #FFFFFF;
 --citrine-bg: #FF6E3E;
 --apricot-color: #3D0701;
 --apricot-bg: #FFB653;
 --zesty-color: #140D04;
 --zesty-bg: #FADB00;
 --emerald-color: #0D3738;
 --emerald-bg: #6BEB3A;
 --malachite-color: #FFFFFF;
 --malachite-bg: #24D253;
 --apatite-color: #FFFFFF;
 --apatite-bg: #39C6A5;
 --frost-color: #21163E;
 --frost-bg: #66A7FF;
 --indigo-color: #EDF8FF;
 --indigo-bg: #5C74FF;
 --bramble-color: #FFFFFF;
 --bramble-bg: #B857FF;
 --facade-color: #FFFFFF;
 --facade-bg: #F034C7;
 --rowan-color: #441127;
 --rowan-bg: #FF8FAD;
 --champagne-color: #3D2F29;
 --champagne-bg: #E0DAD3;
 font-size: 14px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--side-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--obsidian-bg), var(--pomegranate-bg), var(--citrine-bg), var(--apricot-bg), var(--zesty-bg), var(--emerald-bg), var(--malachite-bg), var(--apatite-bg), var(--frost-bg), var(--indigo-bg), var(--bramble-bg), var(--facade-bg), var(--rowan-bg), var(--champagne-bg));
  border-radius: 4px;
}

::-moz-selection {
  color: var(--color);
  background: var(--background);
}

::selection {
  color: var(--color);
  background: var(--background);
}


html, body {
 min-height: 100vh;
 min-width: 100%;
 display: flex;
 flex-direction: column;
 background-color: var(--background);
 background-image: var(--background-image);
 background-attachment: fixed;
 margin: 0;
 color: var(--color);
 font-family: 'Roboto Mono', "courier new", "courier", monospace;
 scrollbar-color: var(--main-bg) var(--background);
}

.container {
 flex: 1;
 margin: 1rem auto 4rem auto;
 width: 95%;
 flex-direction: column;
 display: flex;
}

.top {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 3rem 0rem 3rem;
}

.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: var(--main-color);
  position: relative;
}

.rainbow {
 filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)); 
}

.content {
 background-color: var(--main-bg);
 display: flex;
 flex: 1;
 padding: 1rem;
 z-index: 5;
 flex-direction: column;
 border-radius: 0 0 4px 4px;
}

.toggle {
 text-align: center;
 background-color: var(--side-bg);
 display: block;
 font-family: 'Roboto Mono', "courier new", "courier", monospace;
 padding: 0.75rem 1rem;
 font-weight: bold;
 border-radius: 4px 4px 0 0;
 z-index: 4;
 cursor: pointer;
}

#nav-toggle {
 display: none; 
}

.nav {
  display: none;
  flex-direction: column;
  position: relative;
}

.nav::before {
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: 3;
 content: "";
 margin: -3px;
 background: linear-gradient(var(--obsidian-bg), var(--pomegranate-bg), var(--citrine-bg), var(--apricot-bg), var(--zesty-bg), var(--emerald-bg), var(--malachite-bg), var(--apatite-bg), var(--frost-bg), var(--indigo-bg), var(--bramble-bg), var(--facade-bg), var(--rowan-bg), var(--champagne-bg));
 border-radius: 4px;
 filter: blur(5px) opacity(0.6);
} 

#nav-toggle:checked ~ .nav {
 display: flex;
}

img {
  width: 100%;
  height: auto;
}

.prism {
  font-family: 'Roboto Mono', "courier new", "courier", monospace;
  font-weight: bold;
  z-index: 4;
  flex: 1;
}

.prism a {
  display: inline-block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition: letter-spacing 0.3s ease;
}

.prism a:hover {
 letter-spacing: 1.5px;
}

.glass {
 color: var(--obsidian-color);
 background-color: var(--obsidian-bg);
}

.pomme {
 color: var(--pomegranate-color);
 background-color: var(--pomegranate-bg);
}

.burns {
 color: var(--citrine-color);
 background-color: var(--citrine-bg);
}

.peach {
 color: var(--apricot-color);
 background-color: var(--apricot-bg); 
}

.lemon {
 color: var(--zesty-color);
 background-color: var(--zesty-bg); 
}

.pine {
 color: var(--emerald-color);
 background-color: var(--emerald-bg); 
}

.copper {
 color: var(--malachite-color);
 background-color: var(--malachite-bg); 
}

.appetite {
 color: var(--apatite-color);
 background-color: var(--apatite-bg); 
}

.cloud {
 color: var(--frost-color);
 background-color: var(--frost-bg); 
}

.nebula {
 color: var(--indigo-color);
 background-color: var(--indigo-bg); 
}

.vapor {
 color: var(--bramble-color);
 background-color: var(--bramble-bg); 
}

.jevil {
 color: var(--facade-color);
 background-color: var(--facade-bg); 
}

.rose {
 color: var(--rowan-color);
 background-color: var(--rowan-bg); 
}

.dust {
 color: var(--champagne-color);
 background-color: var(--champagne-bg); 
}

.linkies {
 text-align: center; 
}

h2, h3, h1 {
  margin: 0.5rem 0;
}

.linkies h1 {
  text-shadow: 0 0 7px rgba(0,0,0,0.65);
}

.content a {
 text-decoration: none;
 font-weight: bold;
 color: var(--main-color);
}

.content a:hover {
 animation: rainbow 7s infinite;
}

@keyframes rainbow {
  0% {
    color: var(--obsidian-bg);
  }
  7.14% {
    color: var(--pomegranate-bg);
  }
  14.28% {
    color: var(--citrine-bg);
  }
  21.42% {
    color: var(--apricot-bg);
  }
  28.56% {
    color: var(--zesty-bg);
  }
  35.7% {
    color: var(--emerald-bg);
  }
  42.84% {
    color: var(--malachite-bg);
  }
  49.98% {
    color: var(--apatite-bg);
  }
  57.12% {
    color: var(--frost-bg);
  }
  64.26% {
    color: var(--indigo-bg);
  }
  71.4% {
    color: var(--bramble-bg);
  }
  78.54% {
    color: var(--facade-bg);
  }
  85.68% {
    color: var(--rowan-bg);
  }
  92.82% {
    color: var(--champagne-bg);
  }
  100% {
    color: var(--obsidian-bg);
  }
}


@media (min-width: 650px) {
  .container {
    width: 77%
  }
  
  .main {
   flex-direction: row; 
  }
  
 .nav {
   display: flex;
   width: 12rem;
 }
 
 .nav::before {
  display: none; 
 }
 
 .top {
    padding: 1.5rem 3rem 0 18rem;
 }
 
 .toggle {
   display: none; 
  border-radius: 0;
 }
 
 .content {
   border-radius: 0 4px 4px 0;
 }
 
 .glass {
  border-radius: 4px 0 0 0; 
 }
 
 .dust {
   border-radius: 0 0 0 4px;
 }
 
 .main::before {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   z-index: 3;
   content: "";
   margin: -3px;
   background: linear-gradient(var(--obsidian-bg), var(--pomegranate-bg), var(--citrine-bg), var(--apricot-bg), var(--zesty-bg), var(--emerald-bg), var(--malachite-bg), var(--apatite-bg), var(--frost-bg), var(--indigo-bg), var(--bramble-bg), var(--facade-bg), var(--rowan-bg), var(--champagne-bg));
   border-radius: 4px;
   filter: blur(5px) opacity(0.6);
 }
}

@media (min-width: 1100px) {
  .container {
    width: 55%;
    max-width: 900px;
  }
  
  .nav {
   width: 15rem; 
  }
}