::-webkit-scrollbar {
  width: 5px;
}
 ::-webkit-scrollbar-track {
  background: var(--veryverydarkred); 
}
 ::-webkit-scrollbar-thumb {
  background: var(--secondary1); 
}
::selection {
  color: white; 
  background: var(--secondary1); 
}
main {
  max-width:1000px;
  width:1000px;
  padding:20px;
  box-shadow: 5px 0px 5px var(--mainshadow);
  background:var(--mainbg);
}
main a {
  background:var(--primary1);
  color:var(--primary2);
  padding:3px;
  height:fit-content;
  text-decoration:none;
}
main a:hover {
  text-decoration:underline;
}
.ihateyou {
  display:flex;
}
    main {
          word-break: break-word;
    }
    aside {
        max-width: 300px;
    /* width: 300px; */
    width: 20%;
    position: sticky;
    flex: none;
    background: linear-gradient(to bottom, var(--complimentary), var(--sidebarbg));
    top: 5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    }
    #beee {
      margin-top:0;
    }
    aside a {
      display:block;
      margin:3px 0px 3px 0px;
      background:var(--linkcolorsidebar);
      color:white;
      padding:2px;
      text-decoration:none;
    }
    aside a:hover {
      text-decoration:underline;
    }
    nav, .linkbar {
      background:linear-gradient(to right,var(--primary2),var(--primary1));
      padding:10px;
      display: flex;
    gap: 10px;
        align-items: center;
    color: var(--secondary1);
        min-height: 2.5rem;
        position:sticky;
        top:0px;
            -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 3px;
    paint-order: stroke fill;
    }
    .linkbar {
      min-height:0.5rem;
      overflow-y:hidden;
          overflow-x: hidden;
    white-space: nowrap;
      padding:2px 10px 2px 10px;
      border-top:2px solid var(--primary1);
      position:sticky;
      top:3.5rem;
    }
    nav .alinks {
      display:flex;
      flex-wrap:wrap;
      gap:5px;
    }
    .sidebarcontent {
      padding:10px;
    }
    nav a, .linkbar a {
      color: var(--secondary1);
      text-decoration:none;
      font-variant: small-caps;
      transition:0.1s;
    }
    .linkbar a {
      font-variant:initial;
      font-weight:bold;
    }
    nav a:hover, .linkbar a:hover {
      filter:invert(1);
      transition:0.1s;
    }
    nav h1 {
      color:var(--secondary1);
      margin:0;
    }
    nav .flag {
      width: 60px;
    height: 36px;
    border: 1px solid var(--flagshadow);
    background: white;
    transition:0.5s;
    color:black;
    box-shadow:4px 4px 2px var(--flagshadow);
    align-items: center;
    justify-content: center;
    display:flex;
    }
    nav .flag:hover {
      transition:0.5s;
      transform: rotate(6deg);
    }
    body {
      --flagshadow:black;
      --mainshadow:lightgrey;
      --mainbg:white;
      --sidebarbg:white;
      --secondary1:black;
      --secondary2:white;
      --primary1:purple;
      --primary2:yellow;
      --primary3:brown;
      --complimentary:#ffe2fc;
      
      --linkcolorsidebar:purple;
background-color: #fffff8;
opacity: 1;
background: radial-gradient(circle, transparent 20%, #fffff8 20%, #fffff8 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fffff8 20%, #fffff8 80%, transparent 80%, transparent) 100px 100px, linear-gradient(#ffff00 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #ffff00 8px, #fffff8 8px) -4px 0;
background-size: 200px 200px, 200px 200px, 100px 100px, 100px 100px;
      /*
      --secondary1:#f7be00;
      --secondary2:#fff1c2;
      --primary1:#bf0b1d;
      --primary2:#84111c;
      --primary3:#501d22;
      */
      margin:0;
      font-family:'Trebuchet MS', sans-serif;
    }
    .coolsidebarheader {
      width:100%;
      margin-top:0;
      background:var(--complimentary);
      padding:5px 0 5px 0;
      text-align:center;
      margin-bottom:0;
    }
    @media only screen and (max-width: 700px) {
      nav .alinks {
      flex-flow: column;
    }
    nav, .linkbar, aside {
      position:relative;
      top:0;
    }
    .coolsidebarheader {
      background:linear-gradient(to bottom,var(--complimentary),transparent);
    }
    aside {
      height:fit-content;
      max-height:none;
      margin-bottom:10px;
      width:100%;
      max-width:100%;
    }
    .ihateyou {
      align-items:center;
      flex-wrap: wrap-reverse;
      place-content: center;
      gap:10px;
    }
    body {
      background:white;
    }
    nav {
      place-content: space-between;
    }
    }
    .eye {
      width:15px;
      height:15px;
      filter:invert(1);
      -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
    }
    .eyee {
      -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
    }