:root {
  --docbg: #f2f3f5;
  --doctext: #151f3b;
  --docshadow: black;
  --mainbg: rgba(0, 0, 0, 0.8);
  --maintext: #d1e1ff;
  --mainshadow: #6c748a;
  --blackbarbg: black;
  --listgradient: linear-gradient(to right, black, transparent);
  --listshadow: black;
  --heregradient: linear-gradient(to right, #0e1b40, transparent);
  --hereborder: #0e1b40;
  --htmlstart1: #0e1b40;
  --htmlstart2: #ffffffc7;
  --scrollbartrack: #ccd8e1;
  --scrollbarthumb: #638bb9;
  --scrollbarthumbhover: #274e7e;
  --selectionbg: black;
  --selectiontext: #d1e1ff;
  --textshadow: black;
  --textshadowlight: white;
  --lastshadow:black;
  --listcolor:white;
  --titlecolor:black;
}
.normalflex {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  position: relative;
}
.document.secret {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  z-index: 1;
  filter: brightness(0.8);
}
.document {
  padding: 20px;
  position: relative;
  background: var(--docbg);
  color: var(--doctext);
  max-width: 600px;
  margin-top: -10px;
  z-index: 2;
  transform: rotate(-2deg);
  box-shadow: 8px 8px 8px var(--docshadow);
  min-width:300px;
  line-height: 1.5;
}
.document h1, .document h2, .document h3, .document h4, .document h5 {
  font-style:italic;
}
.document.seconddocument {
  transform: rotate(7deg);
}
.alltogether {
  display: flex;
  flex: 1;
  align-items: center;
}
main {
  padding: 30px;
  background: var(--mainbg);
  font-size: clamp(20px, 6vw, 30px);
  color: var(--maintext);
  overflow-y: auto;
  height: 85vh;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 20px 7px var(--mainshadow);
}
.contentalmost {
  display: flex;
  gap: 5px;
}
.all {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 1 635px;
}
.blackbar {
  background: var(--blackbarbg);
  height: clamp(0px, 3vw, 250px);
  width: 100%;
}
.sidebar {
  display: flex;
  align-items: center;
  max-width: fit-content;
  margin-top: -10px;
  position: sticky;
  top: 0;
  padding-right: 20px;
}
ul.list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.list li {
  padding: 10px 10px 10px var(--listpaddingleft);
  display: flex;
  align-items: center;
  background: var(--listgradient);
}
.list li img {
  max-width: 40px;
  max-height: 40px;
}
.list li a, .title {
  margin: 0;
  margin-left: 10px;
  font-size: clamp(40px, 10vw, 70px);
 text-shadow: 1.6px 0 var(--textshadow), 0 1.6px var(--textshadow), 1.6px 1.6px var(--textshadow), 0 2px 2px var(--lastshadow);
  padding: 20px;
  color: var(--listcolor);
  line-height: 0.75;
  padding-left: 0;
  text-decoration: none;
  transition: 0.1s ease;
}
.title {
      COLOR: var(--titlecolor);
    text-shadow: 1.6px 0 var(--textshadowlight), 0 1.6px var(--textshadowlight), 1.6px 1.6px var(--textshadowlight), 0 2px 2px var(--lastshadow);
    font-size: clamp(60px, 10vw, 140px);
    margin-top: -20px;
}
.list li img {
  filter: invert(1);
}
.list li:hover a, .list li:hover img {
  padding-left: 0.1em;
}
.list li a:hover {
  text-decoration: underline;
}
.list li:hover {
  filter: drop-shadow(2px 4px 6px var(--listshadow)) brightness(5);
}
.two, .seven { 
  padding-left: calc(var(--listpaddingleft) + 15px) !important; 
}
.three, .six { 
  padding-left: calc(var(--listpaddingleft) + 40px) !important; 
}
.four, .five { 
  padding-left: calc(var(--listpaddingleft) + 60px) !important; 
}
body {
  margin: 0;
  --listpaddingleft: clamp(10px, 5vw, 50px);
}
.list .here {
  background: var(--heregradient);
  border-top: 4px double var(--hereborder);
  border-bottom: 4px double var(--hereborder);
}
.here img {
  transform: scale(4) rotate(45deg);
  margin-right: 10px;
  position: absolute;
  left: 0px;
}
.here a {
      background-clip: text;
    color: transparent;
    filter: drop-shadow(1.6px 0 black) drop-shadow(1.6px 0 black) drop-shadow(0 1.6px black) drop-shadow(0 1.6px black) drop-shadow(0 2px 2px #00000040);
    background-image: linear-gradient(white);
    text-shadow: none !important;
}
.here:hover img {
  padding-left: 0px !important;
}
html {
  position: relative;
  background-color: var(--htmlstart1);
}
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(331deg, var(--htmlstart1), var(--htmlstart2)), url(/p/globel/antarctica/Peninsula.jpg);
  background-size: cover;
}
@media (max-width: 1399px) {
  .sidebar {
    zoom: 0.45;
  }
  main {
    font-size: clamp(16px, 4.5vw, 24px);
  }
}
@media (max-width: 2100px) {
  .document {
    transform: rotate(0deg) !important;
    flex: 1;
  }
  .document.secret {
    display: none;
  }
  .normalflex {
    flex-wrap: wrap;
  }
  #banner {
    margin-bottom: 20px !important;
  }
}
@media (max-width: 767px) {
  .sidebar, .antarctica {
    zoom: initial;
  }
  .title {
    margin-top: 10px;
  }
  .alltogether {
    flex-wrap: wrap;
  }
  main {
    font-size: clamp(14px, 4.5vw, 20px);
    height:auto;
  }
  .document.seconddocument {
    margin-top:initial;
}
}
::selection {
  background: var(--selectionbg);
  color: var(--selectiontext);
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--scrollbartrack);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbarthumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbarthumbhover);
}