@font-face {
  font-family: Vipnagorgialla;
  src: url("/Resources/Font/vipnagorgialla%20rg.otf");
}

@font-face {
  font-family: Vipnagorgialla;
  font-weight: bold;
  src: url("/Resources/Font/vipnagorgialla%20bd.otf");
}

@font-face {
  font-family: NiseSonicBattle;
  src: url("/Resources/Font/NiseSonicBattle.TTF");
}

@font-face {
  font-family: "BN Elements";
  src: url("/Resources/Font/Elements.ttf");
}

:root {
  --SA2Plate1: url("/Resources/UI/plate_square.png");
  --SA2Plate2: url("/Resources/UI/plateB_square.png");
  --SA2Plate2B: url("/Resources/UI/plateB_square_inactive.png");
  --SA2Plate3: url("/Resources/UI/FileSelect_Plate.png");
  --SA2Plate4: url("/Resources/UI/plate_circle_active.png");
  --SA2Plate4B: url("/Resources/UI/plate_circle_inactive.png");
  --SA2Plate5: url("/Resources/UI/missionbox_sonic.png");
  --SA2Plate6: url("/Resources/UI/BlueSelect_Plate.png");
  --SA2Plate7: url("/Resources/UI/brd_bossat.png");
  
  --SectionPadding1: 7.5em;
}


/* Border Styles */
.border1 {
  border: 10px solid transparent;
  border-image: var(--SA2Plate5);
  border-image-slice: 10 fill;
  display: flex;
  justify-content: center;
}
.border2 {
  border: 10px solid transparent;
  border-image: var(--SA2Plate3);
  border-image-slice: 10 fill;
  display: flex;
  justify-content: center;
}
.border3 {
  border: 10px solid transparent;
  border-image: var(--SA2Plate6);
  border-image-slice: 10 fill;
  display: flex;
  justify-content: center;
}


/* Font Styles */
.SA2font1 {
  font-family: "Vipnagorgialla";
  font-weight: bold;
}
.SA2font2 {
  font-family: "Comic Sans MS";
}
.SA2font3 {
  font-family: "NiseSonicBattle";
}
.SA2font4 {
  font-family: "BN Elements";
}


/* Text Styles */
.textStyle1 {
  color: white;
  -webkit-text-stroke: 2px black;
  text-shadow: 4px 4px black;
}
.textStyle2 {
  color: white;
  text-shadow: 2px 2px black;
}
.textStyle3 {
  color: transparent;
  text-shadow: 0px 0px #00000096;
}
.textStyle3:hover {
  text-shadow: -6px 0px white, 0px 0px #00000096;
}


/* Button Types */
.buttonType1 {
  border: 0.5em solid transparent;
  padding: 0em .5em 0em .5em;
  border-image: var(--SA2Plate2B);
  border-image-repeat: stretch repeat;
  border-image-slice: 10 fill;
  margin-right: 0.2em;
}
.buttonType1:hover {
  border-image: var(--SA2Plate2) stretch;
  border-image-repeat: stretch repeat;
  border-image-slice: 10 fill;
}
.buttonType1 a {
  text-decoration: none;
}

.fade {
  background-color: #000;
  opacity: 0;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.fade-out{
  opacity: 0;
  transition: 1s opacity linear;
}

.fade-in{
  opacity: 1;
  transition: 1s opacity linear;
}

/* CRT Effect comes from Oudkee's Corner (https://oudkee.neocities.org) */

.crt::before {
  content: " ";
  display: block;
  position: fixed;
  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.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  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 0.15s infinite;
}