@import url(https://fonts.googleapis.com/css?family=ABeeZee);
@import url(https://fonts.googleapis.com/css?family=Audiowide);

html {
  text-size-adjust: 100%;
}

body {
 padding: 0 0;
 margin: 0 0;
 height: auto;
 width: 100%;
}

::-webkit-autobar {
 display: none; 
}

* {
 box-sizing: border-box;
 font-family: "ABeeZee", Arial, sans-serif;
 color: black;
 text-decoration: none;
 cusor: none;
 autobar-width: none;
 -ms-overflow-style: none;
 scrollbar-width: none;
 background: white;
}

:root {
  --main-ct: rgba(30,136,229,10%);
  --main-c: rgb(30,136,229);
  --tempral-bc: white;
  --tempral-ic: black;
  --tempral-ict: rgba(30, 30, 30, 14%);
  --tempral-bct: rgba(240, 240, 240, 14%);
}

@media (prefers-color-scheme: dark) {

  * {
    background: rgb(9,9,9);
    color: white;
  }
  
  :root {
    --main-ct: rgba(30,136,229,10%);
    --main-c: rgb(30,136,229);
    --tempral-bc: rgb(7,7,7);
    --tempral-ic: white;
    --tempral-ict: rgba(240, 240, 240, 8%);
    --tempral-bct: rgba(30, 30, 30, 14%);
  }
  
  .Side-nav > nav {
    box-shadow: 2px 0 24px rgb(70,70,70) !important;
  }
  
  .Slide-show {
    background-image: url("https://lh3.googleusercontent.com/d/13tMYNcC4G2-v3TusYBSu-oSaLCxbURdC=w350"), url("https://lh3.googleusercontent.com/d/141OYYdwrB8fPlStw_5tHpqgWMhdMlKRD=w350"), url("https://lh3.googleusercontent.com/d/17MbtFD6K9AOvcrUtJCQwONAUDsFX9fec=w350") !important;
  }
  
  
  .Icon {
    fill: white !important;
  }
  
  footer > .Wrap-1 > section:nth-child(1) > .Socials .st3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: rgb(7,7,7) !important;
  }
  
}

  
main {
  display: none;
  height: auto;
  min-height: 60vh;
  width: 100%;
}

main > * {
  padding-inline: min(13px, 2vw);
}

svg, a, span, img, strong, article *, footer *, nav * {
 background: transparent; 
}

hr {
  border-color: var(--tempral-ic);
  border-width: 0.50px;
}

li, ol {
  padding-block: 6px;
}

article a {
  color: var(--main-c);
}

p, p *, ul *, a {
  font-size: medium;
}

.Icon {
 height: 23px;
 width: 23px;
 height: 23px;
 width: 23px;
 fill: black;
}

.Content-loader {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--tempral-bc);
}

.Content-loader > .Content-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: rgba(30,136,229,30%);
}

.Content-loader > .Content-wrapper > .Spine {
  position: absolute;
  height: 70px;
  width: 70px;
  border-top: 3px solid rgb(52,148,239);
  border-right: 5px solid rgb(52,148,239);
  border-left: 1.50px solid rgb(52,148,239);
  border-bottom: 8px solid transparent;
  outline: 8px solid var(--tempral-bc);
  border-radius: 100rem;
  animation-name: spine;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spine {
  
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }

}

.Content-loader > .Content-wrapper > .Logo {
  height: 70px;
  width: 70px;
  padding: 8px;
  border-radius: 100rem;
  z-index: 1;
  background: transparent;
}

.Alert {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 9;
  background: transparent;
}

.Alert > .Close {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--tempral-ict);
  animation-name: alertCls;
  animation-duration: 800ms;
  animation-iteration-count: 1;
}

@keyframes alertCls {
  
  0% {
    background: transparent;
  }
  
  100% {
    background: var(--tempral-ict);
  }
  
}

.Alert > .Content-wrapper {
  height: auto;
  width: 86%;
  padding: 18px 26px;
  max-width: 400px;
  border-radius: 12px;
  outline: 4px solid rgba(30, 136, 229, 8%);
  border: 1px solid rgba(30, 136, 229, 15%);
  z-index: 1;
  animation-name: alertCnt;
  animation-duration: 400ms;
  animation-iteration-count: 1;
}

@keyframes alertCnt {
  
  0% {
    transform: scale(0);
  }
  
  100% {
    transform: scale(1);
  }
  
}

.Alert > .Content-wrapper > h3 {
  margin: 0 0;
  text-align: center;
}

.Alert > .Content-wrapper > p {
  line-height: 22px;
  word-wrap: break-word;
  text-align: center;
}

.Alert > .Content-wrapper > .Nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.Alert > .Content-wrapper > .Nav > button {
  padding: 9px 38px;
  font-weight: 800;
  border: 1px solid rgba(30, 136, 229, 15%);
  border-radius: 6px;
  background: var(--main-ct);
}

.Alert > .Content-wrapper > .Nav > a {
  display: block;
  padding: 8px 22px;
  font-weight: 800;
  font-size: small;
  border: 1px solid rgba(30, 136, 229, 15%);
  border-radius: 6px;
  background: var(--main-ct);
}

.Uploading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  height: auto;
  width: 260px;
  padding: 18px 0;
  margin: auto;
  margin-block: 60px;
  border-radius: 8px;
  background: var(--main-ct);
}

.Uploading-indicator > div {
  height: 24px;
  width: 24px;
  border-radius: 100rem;
  background: var(--tempral-bc);
  border-top: 2px solid rgba(30, 136, 229, 70%);
  border-right: 3px solid rgba(30, 136, 229, 70%);
  border-left: 1px solid rgba(30, 136, 229, 70%);
  border-bottom: 5px solid transparent;
  outline: 8px solid var(--tempral-bc);
  animation-name: uNavigator;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  @keyframes uNavigator {
    
    0% {
      transform: rotate(0deg);
    }
    
    100% {
      transform: rotate(360deg);
    }
    
  }
  
.Uploading-indicator > strong {
  color: rgba(30, 136, 229, 70%);
}

.Page-Loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
}

.Page-Loader > .Content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding: 15px;
  border-top: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-right: solid 8px var(--main-c);
  border-left: solid 8px var(--main-c);
  border-radius: 100rem;
}

.Page-Loader > .Content-wrapper > .Spine {
  position: absolute;
  height: 70px;
  width: 70px;
  border-top: solid 3px rgb(52,148,239);
  border-right: solid 5px rgb(52,148,239);
  border-left: solid 1.50px rgb(52,148,239);
  border-bottom: solid 8px transparent;
  outline: solid 8px var(--main-c);
  outline-offset: 8px;
  border-radius: 100rem;
  animation-name: spine2;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spine2 {
  
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }

}

.Page-Loader > .Content-wrapper > .Logo {
  height: 70px;
  width: 70px;
  padding: 8px;
  border-radius: 100rem;
  z-index: 1;
  background: transparent;
}