@font-face {
  font-family: arialRounded;
  src: url("/fonts/Arial Rounded MT Regular/Arial Rounded MT Regular.ttf");
}
@font-face {
  font-family: michroma;
  src: url(/fonts/Michroma/Michroma-Regular.ttf);
}
@font-face {
  font-family: microgramma;
  src: url(/fonts/Microgramma/microgrammanormal.ttf);
}
/* ||  || --------------------------------*/
/* || UNIVERSAL || --------------------------------*/
body {
  background-color: black;
}

a {
  font-family: microgramma;
  font-size: 17px;
  text-decoration: none;
  color: rgb(255, 255, 255);
  letter-spacing: 2px;
}

p, td, summary, th, li {
  font-family: michroma;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 2;
}

summary {
  max-width: 160px;
}

summary:before {
  content: "";
  border-width: 0.4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: 0.2rem 50%;
  transition: 0.25s transform ease;
}

.item {
  --c: $color;
  --r: 27px; /* control the inner radius */
  --b: 20%; /* control the border thickness*/
  -o-border-image: radial-gradient(rgba(0, 0, 0, 0) calc(71% - var(--b)), #00ffff calc(72% - var(--b))) 49.9%/var(--r);
     border-image: radial-gradient(rgba(0, 0, 0, 0) calc(71% - var(--b)), #00ffff calc(72% - var(--b))) 49.9%/var(--r);
  z-index: 4;
}

/* || HEADER || --------------------------------*/
.header {
  color: white;
  background: #fbc710;
  text-align: center;
  vertical-align: middle;
  text-decoration-line: none;
}

/* || FLEXBOX || --------------------------------*/
.container {
  display: grid;
  grid-template-columns: repeat(12, 125px);
  grid-template-rows: repeat(8, 107.86px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  height: 100%;
  color: rgb(255, 255, 255);
  padding-top: 50px;
}

.emptyleft {
  grid-area: 1/1/10/3;
}

.emptyright {
  grid-area: 1/11/10/13;
}

.emptybot {
  grid-area: 8/3/10/11;
}

.media {
  grid-area: 1/3/8/11;
  box-sizing: border-box;
  border: 8px solid #00ffff;
  border-radius: 25px;
  box-shadow: 0px 0px 15px #00ffff;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(103, 103, 103, 0.75);
  box-shadow: 0px 0px 5px #00ffff;
}

.content {
  grid-area: 1/1/8/10;
}

/* || MAIN CONTENT || --------------------------------*/
.content {
  overflow: hidden;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
}

.content::-webkit-scrollbar {
  display: none; /* Older Safari and Chromium */
}

object {
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
}

object::-webkit-scrollbar {
  display: none; /* Older Safari and Chromium */
}

.content object {
  padding-top: 13px;
  display: block;
  width: 100%;
  height: 550px;
  overflow: auto;
}

.landing {
  padding-left: 10px;
  padding-right: 10px;
  flex-wrap: wrap;
  width: 97%;
}
.landing table {
  display: inline-block;
}
.landing img {
  width: 100%;
  height: 100%;
}

.topic {
  padding-left: 10px;
  padding-right: 10px;
}

/* || INDEX|| --------------------------------*/
/* || SIDEBAR || --------------------------------*/
.sidebar {
  grid-area: 1/10/8/13;
}

.sidemenu {
  table-layout: fixed;
  width: 100%;
  height: 95%;
  box-sizing: border-box;
  list-style: none;
  padding-inline-end: 40px;
}
.sidemenu li {
  text-align: center;
  display: table-row;
}
.sidemenu li span {
  display: table-cell;
  vertical-align: middle;
}
.sidemenu li span a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 20px 0px;
  text-shadow: rgb(104, 104, 104) 1px 0 10px;
  padding-right: 5px;
}

/* || BOTTOM BAR WIDGETS || --------------------------------*/
.widget {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  overflow-wrap: break-word;
}

.pagewidget a {
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  text-decoration: none;
}
.pagewidget a img {
  width: 75%;
  height: 75%;
  -o-object-fit: contain;
     object-fit: contain;
}
.pagewidget a img:hover {
  transform: scale(1.1);
}

.widget1 {
  grid-area: 8/1/10/3;
}

.widget2 {
  grid-area: 8/3/10/5;
}

.widget3 {
  grid-area: 8/5/10/7;
}

.widget4 {
  grid-area: 8/7/10/9;
}

.status {
  grid-area: 8/9/10/13;
}

.status {
  display: grid;
  grid-template-columns: repeat(5, 62px);
  grid-template-rows: repeat(3, 40px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.status1 {
  grid-area: 1/1/2/3;
  overflow: auto;
}

.status2 {
  grid-area: 1/4/2/6;
  overflow: auto;
}

.status3 {
  grid-area: 3/1/4/3;
  overflow: auto;
}

.status4 {
  grid-area: 3/4/4/6;
  overflow: auto;
}

.status5 {
  grid-area: 2/3/3/4;
  overflow: auto;
}

.statusbutton {
  margin-top: 20px;
  margin-left: 18px;
}

.statusbutton:hover {
  background: rgb(0, 231, 231);
}

.nothing {
  display: none;
}

/* || JAVASCRIPT STUFF || --------------------------------*/
.topic {
  display: none;
}

.topic.active {
  display: block;
}

.widget {
  display: none;
}

.widget.active {
  display: flex;
}

.hidden {
  display: none;
}

.sidemenu {
  display: none;
}

.sidemenu.active {
  display: table;
}

.crt {
  position: relative;
  z-index: 2;
}

.landing {
  display: none;
}

.landing.active {
  display: block;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
    opacity: 0.1;
  }
  5% {
    opacity: 0.2;
  }
  10% {
    opacity: 0.1;
  }
  15% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.1;
  }
  25% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.2;
  }
  35% {
    opacity: 0.1;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 10s infinite;
}

/* || CSS SHAPES || --------------------------------*/
.top-tab {
  --r: 25px; /* control the radius */
  margin-left: -33px;
  line-height: 1.7; /* control the height */
  padding-inline: 0.5em;
  border-bottom: var(--r) solid rgba(0, 0, 0, 0);
  border-radius: var(--r)/0 var(--r) calc(2 * var(--r)) 0;
  -webkit-mask: radial-gradient(var(--r) at 100% 100%, rgba(0, 0, 0, 0) 98%, #000 101%) 0 100%/var(--r) 100% no-repeat, conic-gradient(#000 0 0) padding-box;
          mask: radial-gradient(var(--r) at 100% 100%, rgba(0, 0, 0, 0) 98%, #000 101%) 0 100%/var(--r) 100% no-repeat, conic-gradient(#000 0 0) padding-box;
  background: #00ffff; /* border-box is needed for a gradient coloration */
}

.mid-tab {
  --r: 25px; /* control the radius */
  margin-left: -33px;
  line-height: 1.7; /* control the height */
  padding-inline: 0.5em;
  border-block: var(--r) solid rgba(0, 0, 0, 0);
  border-radius: 0 var(--r) var(--r) 0/calc(2 * var(--r));
  -webkit-mask: radial-gradient(var(--r) at 100% var(--r), rgba(0, 0, 0, 0) 98%, #000 101%) 0 calc(-1 * var(--r))/var(--r) 100% repeat-y, conic-gradient(#000 0 0) padding-box;
          mask: radial-gradient(var(--r) at 100% var(--r), rgba(0, 0, 0, 0) 98%, #000 101%) 0 calc(-1 * var(--r))/var(--r) 100% repeat-y, conic-gradient(#000 0 0) padding-box;
  background: #00ffff; /* border-box is needed for a gradient coloration */
}

/* HTML: <div class="vertical-rounded-tab"></div> */
.bot-tab {
  --r: 25px; /* control the radius */
  margin-left: -33px;
  line-height: 1.7; /* control the height */
  padding-inline: 0.5em;
  border-top: var(--r) solid rgba(0, 0, 0, 0);
  border-radius: var(--r)/0 calc(2 * var(--r)) var(--r) 0;
  -webkit-mask: radial-gradient(var(--r) at 100% 0, rgba(0, 0, 0, 0) 98%, #000 101%) 0 0/var(--r) 100% no-repeat, conic-gradient(#000 0 0) padding-box;
          mask: radial-gradient(var(--r) at 100% 0, rgba(0, 0, 0, 0) 98%, #000 101%) 0 0/var(--r) 100% no-repeat, conic-gradient(#000 0 0) padding-box;
  background: #00ffff; /* border-box is needed for a gradient coloration */
}

.botright {
  aspect-ratio: 2.385;
  clip-path: shape(from 100% 0%, vline by 46.65%, curve by -27.07% 53.35% with 0% 35.2%/-12.18% 53.35%, hline by -72.93%, curve by 46.81% -100% with 25.84% 0%/46.81% -38.89%, hline by 53.19%, close);
  background: #00ffff;
  transform: scale(1.2);
  transform-origin: bottom right;
}

.topleft {
  aspect-ratio: 2.385;
  clip-path: shape(from 0% 100%, vline by -46.65%, curve by 27.07% -53.35% with 0% -35.2%/12.18% -53.35%, hline by 72.93%, curve by -46.81% 100% with -25.84% 0%/-46.81% 38.89%, hline by -53.19%, close);
  background: #00ffff;
  transform: scale(1.2);
  transform-origin: top left;
}

.topright {
  aspect-ratio: 2.385;
  clip-path: shape(from 100% 100%, vline by -46.65%, curve by -27.07% -53.35% with 0% -35.2%/-12.18% -53.35%, hline by -72.93%, curve by 46.81% 100% with 25.84% 0%/46.81% 38.89%, hline by 53.19%, close);
  background: #00ffff;
  transform: scale(1.2);
  transform-origin: top right;
}

.botleft {
  aspect-ratio: 2.385;
  clip-path: shape(from 0% 0%, vline by 46.65%, curve by 27.07% 53.35% with 0% 35.2%/12.18% 53.35%, hline by 72.93%, curve by -46.81% -100% with -25.84% 0%/-46.81% -38.89%, hline by -53.19%, close);
  background: #00ffff;
  transform: scale(1.2);
  transform-origin: bottom left;
}

.center {
  aspect-ratio: 1;
  clip-path: shape(from 50% 100%, curve by -50% -49.99% with -27.57% 0%/-50% -22.42%, smooth by 50% -50.01% with 22.43% -50.01%, smooth by 50% 50.01% with 50% 22.44%, smooth by -50% 49.99% with -22.43% 49.99%, close);
  background: #00ffff;
  transform: scale(2.3);
  transform-origin: center;
}/*# sourceMappingURL=AAAswagstyle.css.map */