/* Sanitize.CSS Library */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}
:where(body) {
  margin: 0;
}
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}
:where(nav li)::before {
  content: "\200B";
  float: left;
}
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}
:where(b, strong) {
  font-weight: bolder;
}
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
:where(small) {
  font-size: 80%;
}
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}
:where(iframe) {
  border-style: none;
}
:where(svg:not([fill])) {
  fill: currentColor;
}
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}
:where(button, input, select) {
  margin: 0;
}
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
  appearance: button;
}
:where(fieldset) {
  border: 1px solid #a0a0a0;
}
:where(progress) {
  vertical-align: baseline;
}
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}
:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  appearance: textfield;
  outline-offset: -2px; /* 2 */
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}
:where(dialog:not([open])) {
  display: none;
}
:where(details > summary:first-of-type) {
  display: list-item;
}
:where([aria-busy="true" i]) {
  cursor: progress;
}
:where([aria-controls]) {
  cursor: pointer;
}
:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}
:where([aria-hidden="false" i][hidden]) {
  display: initial;
}
:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* Kirby following your mouse */
#mouseGif {
  position: absolute;
  height: auto;
  transition: transform 0.2s;
  z-index: 2;
  cursor: pointer;
}

/* Custom Fonts */
@font-face {
  font-family: "Helvetica Rounded Black";
  src: url("../fonts/helvetica-rounded-black.otf") format("opentype");
}

/* Defaults */
body {
  background: url("../images/background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #698aff;
  font-family: arial, serif;
  cursor: url("../images/cursor.cur"), auto;
  font-size: 15px;
  height: 100vh;
}
h1,
h2,
h3,
h4 {
  margin: 0px;
}
h2,
h3,
h4,
h5 {
  background-color: #698aff;
  background-image: linear-gradient(
      30deg,
      #7c97fa 12%,
      transparent 12.5%,
      transparent 87%,
      #7c97fa 87.5%,
      #7c97fa
    ),
    linear-gradient(
      150deg,
      #7c97fa 12%,
      transparent 12.5%,
      transparent 87%,
      #7c97fa 87.5%,
      #7c97fa
    ),
    linear-gradient(
      30deg,
      #7c97fa 12%,
      transparent 12.5%,
      transparent 87%,
      #7c97fa 87.5%,
      #7c97fa
    ),
    linear-gradient(
      150deg,
      #7c97fa 12%,
      transparent 12.5%,
      transparent 87%,
      #7c97fa 87.5%,
      #7c97fa
    ),
    linear-gradient(
      60deg,
      #7c97fa77 25%,
      transparent 25.5%,
      transparent 75%,
      #7c97fa77 75%,
      #7c97fa77
    ),
    linear-gradient(
      60deg,
      #7c97fa77 25%,
      transparent 25.5%,
      transparent 75%,
      #7c97fa77 75%,
      #7c97fa77
    );
}
h2 {
  background-size: 78px 137px;
  background-position: 0 0, 0 0, 39px 68px, 39px 68px, 0 0, 39px 68px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #6c86e6;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
  margin-bottom: 8px;
  font-size: 1.3em;
}
h3 {
  background-size: 78px 137px;
  background-position: 0 0, 0 0, 39px 68px, 39px 68px, 0 0, 39px 68px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #6c86e6;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
  margin-bottom: 8px;
  font-size: 1.1em;
}
h4 {
  background-size: 78px 137px;
  background-position: 0 0, 0 0, 39px 68px, 39px 68px, 0 0, 39px 68px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #6c86e6;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0px 10px;
  margin-bottom: 8px;
  font-size: 1em;
}
h5 {
  background-size: 78px 137px;
  background-position: 0 0, 0 0, 39px 68px, 39px 68px, 0 0, 39px 68px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #6c86e6;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0px 10px;
  margin: 0px;
  font-size: 0.95em;
}
a {
  color: #1d38ff;
  cursor: url("images/pointer.cur"), pointer;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p {
  color: #2b2b2b;
  line-height: 27px;
  margin: 5px 4px 10px 4px;
}

/* Disable non-JS Content by default */
.non-js-content {
  display: none;
}

/* Main Container */
#websiteContainer {
  max-width: 980px;
  max-height: 991px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#websiteSpacerTop {
  height: 15px;
}
#websiteSpacerBottom {
  height: 15px;
}

/* Header */
#header {
  background-color: #3a55cb;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  border-right: 3px solid #3146a5;
  border-left: 3px solid #5872e4;
  border-top: 3px solid #5872e4;
  border-top-right-radius: 60px;
  border-top-left-radius: 60px;
  display: flex;
  align-items: center;
  padding: 7px 20px 0px 20px;
}
.logo {
  width: 114px;
  margin: 2px 20px -10px 0px;
}
#header div {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
}
#header h1 {
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0%, #e1e1d8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fcfcf2;
  font-family: "Helvetica Rounded Black", Verdana, Tahoma, sans-serif;
  font-size: 2em;
  margin-top: -5px;
}
.header-motto {
  background: #dddada;
  background: linear-gradient(to bottom, #dddada 48%, #d1d1c9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #dddada;
  font-family: "Helvetica Rounded Black", Arial, sans-serif;
  font-size: 1.2em;
  margin: -14px 0px 0px -3px;
  padding: 1px 0px 2.5px 5px;
}

/* Left Aside */
#leftSiteContent {
  background-color: #3149b2;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  border-left: 3px solid #485fc5;
  border-bottom: 3px solid #485fc5;
  border-bottom-left-radius: 10px;
  padding: 18px 8px 0px 8px;
  width: 150px;
  height: 866px;
  float: left;
}
/* Left Navigation */
#leftNav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#leftNav a {
  font-size: 12px;
}
#leftNav hr {
  border: none;
  border-bottom: 3px solid #23337c;
  border-radius: 5px;
  margin: 0px;
}
.nav-categories {
  background-color: #3149b2;
  border: 3px solid #213380;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border-top-left-radius: 9px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 3px;
  display: flex;
  flex-direction: column;
  padding: 3px;
}
.nav-categories span {
  background-color: #3a55cb;
  border: 3px solid #253b9b;
  border-top-left-radius: 8px;
  color: #f2f2f2;
  text-align: center;
  display: block;
  font-size: 12px;
}
.nav-items {
  display: flex;
  align-items: center;
  padding: 2.1px;
}
.nav-icons {
  width: 19px;
  margin: 0px 5px 0px 3px;
}
.nav-links {
  color: #e5e5f5;
}
.nav-links:hover {
  color: #e5e5f5;
  text-decoration: underline !important;
}
.nav-links-external {
  color: #f5e729;
}
.nav-links-external:hover {
  color: #f5e729;
}
/* Nav Music Player */
.nav-music-div {
  background-color: #213380;
  border-radius: 5px;
  padding: 7px 0px;
  text-align: center;
}
.nav-music-marquee {
  background-color: #3a55cb;
  border: 3px solid #253b9b;
  color: #e5e5f5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 130px;
  margin: auto;
}
.nav-music-marquee span {
  white-space: nowrap;
  -moz-animation: marquee 15s linear infinite;
  -webkit-animation: marquee 15s linear infinite;
  animation: marquee 15s linear infinite;
  font-size: 12px;
}
.nav-music-marquee a {
  color: #f5e729;
  text-decoration: underline;
}
@keyframes marquee {
  0% {
    transform: translateX(110%);
  }
  100% {
    transform: translateX(-430%);
  }
}
/* Media controls */
.nav-music-div button {
  background-color: #3a55cb;
  border: 3px solid #253b9b;
  color: #e5e5f5;
  width: 66px;
  margin-top: 4px;
  font-size: 12px;
}
.nav-music-div button:hover {
  background-color: #3257fa !important;
  cursor: pointer;
}
#navMusicPlay.active {
  background-color: #3257fa;
}
#navMusicPause.active {
  background-color: #3257fa;
}
/* JS disabled */
#navMusic {
  width: 100%;
}
/* Nav buttons pannel */
.nav-buttons {
  background-color: #213380;
  border-radius: 5px;
  padding: 4px 0px 7px 2px;
  text-align: center;
}
.nav-buttons img {
  margin-top: 3px;
  height: 23px;
}

/* Right Aside  */
#rightSiteContent {
  background-color: #6780ee;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  border-right: 3px solid #4a5eb8;
  border-bottom: 3px solid #4a5eb3;
  border-bottom-right-radius: 10px;
  padding: 17px 5px 0px 7px;
  width: 154.8px;
  height: 867px;
  float: right;
}
.aside-ads-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.aside-ads-container span {
  background-color: #6780ee;
  border: 3px solid #485cb1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: #f2f2f2;
  text-align: center;
  font-size: 12px;
  padding: 2px 0px 1px 0px;
  width: 90.1%;
}
.aside-ads-container img {
  background-color: #566ccc;
  padding: 3px;
  border: 3px solid #485cb1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  width: 87%;
}
.aside-ad-png {
  border: none !important;
  box-shadow: none !important;
  width: 99% !important;
}

/* Middle container in Index */
#middleContent {
  background-color: #aabdfb;
  background-image: linear-gradient(
    to right,
    #b2c3fd,
    #b2c3fd 5px,
    #aabdfb 5px,
    #aabdfb
  );
  background-size: 10px 100%;
  border-bottom: 3px solid #8090c0;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  height: 884px;
  overflow: auto;
}
#middleContent iframe {
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* Main containers in the different HTML pages */
#contentContainer {
  background-color: #aabdfb;
  background-image: linear-gradient(
    to right,
    #b2c3fd,
    #b2c3fd 5px,
    #aabdfb 5px,
    #aabdfb
  );
  background-size: 10px 100%;
  color: black;
  scrollbar-color: #798dd8 #b3c3fd;
  padding: 15px;
  height: 854px;
  max-width: 650px;
  margin: auto;
  overflow: auto;
}

/* Main text background pattern */
.text-containers-main-bg {
  background-color: #aabdff;
  background-image: repeating-linear-gradient(
      45deg,
      #a0b3fa 25%,
      transparent 25%,
      transparent 75%,
      #a0b3fa 75%,
      #a0b3fa
    ),
    repeating-linear-gradient(
      45deg,
      #a0b3fa 25%,
      #aabdff 25%,
      #aabdff 75%,
      #a0b3fa 75%,
      #a0b3fa
    );
  background-position: 0 0, 26px 26px;
  background-size: 52px 52px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #8699df;
}
/* Secondary text background pattern */
.text-containers-secondary-bg {
  background-color: #aabdff;
  background-image: linear-gradient(135deg, #a0b3fa 25%, transparent 25%),
    linear-gradient(225deg, #a0b3fa 25%, transparent 25%),
    linear-gradient(45deg, #a0b3fa 25%, transparent 25%),
    linear-gradient(315deg, #a0b3fa 25%, #aabdff 25%);
  background-position: 19px 0, 19px 0, 0 0, 0 0;
  background-size: 38px 38px;
  background-repeat: repeat;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  border: 3px solid #8699df;
}

/* Responsiveness */

/* Height */
@media (min-height: 1035px) {
  #websiteSpacerTop {
    display: none;
  }
  #websiteSpacerBottom {
    display: none;
  }
}

/* Width */
@media (max-width: 1150px) {
  #websiteContainer {
    width: 900px;
  }
}
@media (max-width: 980px) {
  #websiteContainer {
    width: 800px;
  }
  #rightSiteContent {
    display: none;
  }
  #middleContent {
    border-right: 3px solid #9babdd;
    border-bottom-right-radius: 10px;
  }
}
@media (max-width: 850px) {
  p {
    line-height: 27px;
  }
  #websiteContainer {
    width: 680px;
  }
  .logo {
    width: 102px;
    margin: 3px 20px -10px 0px;
  }
  #leftSiteContent {
    width: 110px;
  }
  #leftNav a {
    font-size: 11px;
  }
  .nav-categories a {
    margin-left: 10px;
  }
  .nav-icons {
    display: none;
  }
  .nav-music-marquee {
    width: 94px;
  }
  .nav-music-div button {
    width: 100px;
  }
  .nav-buttons img {
    height: 30px;
  }
  #esheepButton {
    display: none;
  }
}
@media (max-width: 700px) {
  body {
    font-size: 15px;
  }
  #websiteContainer {
    width: 100%;
  }
  #header {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  }
  #websiteSpacerTop,
  #websiteSpacerBottom {
    display: none;
  }
  #leftSiteContent {
    border-bottom-left-radius: 0px;
  }
  #middleContent {
    border-bottom-right-radius: 0px;
  }
}
@media (max-width: 500px) {
  #websiteContainer {
    width: 100%;
  }
  .logo {
    width: 72px;
  }
  #header h1 {
    font-size: 20px;
  }
  #header h1 {
    line-height: 18px;
  }
  .header-motto {
    color: #e8e7e7;
    font-size: 1.2em;
    margin: 0px 0px 0px -4px;
  }
}
@media (max-width: 400px) {
  body {
    font-size: 11.5px;
  }
  p {
    line-height: 23px;
  }
  #websiteContainer {
    width: 100%;
  }
  .logo {
    width: 72px;
  }
  #header h1 {
    font-size: 20px;
  }
  #header h1 {
    line-height: 18px;
  }
  .header-motto {
    color: #e8e7e7;
    font-size: 1.2em;
    margin: 0px 0px 0px -4px;
  }
  #leftSiteContent {
    width: 80px;
  }
  #leftNav span {
    font-size: 9px;
  }
  #leftNav a {
    font-size: 8.5px;
  }
  .nav-categories a {
    margin-left: 5px;
  }
  .nav-music-marquee {
    width: 65px;
  }
  .nav-music-div button {
    width: 70px;
  }
  .nav-buttons img {
    height: 24px;
  }
}