/*-------------------------------------------------
  splatoon fonts
-------------------------------------------------*/

@font-face {
  font-family: Blitzmain;
  src: url("fonts/BlitzMain.otf") format("opentype");
}

@font-face {
  font-family: blitzbold;
  src: url("fonts/BlitzBold.otf") format("opentype");
}

@font-face {
  font-family: alterna;
  src: url("fonts/AlternaScript.ttf") format("truetype");
}

@font-face {
  font-family: hangul;
  src: url("fonts/hangulkerin.ttf") format("opentype");
}


/*-------------------------------------------------
  background animation 
-------------------------------------------------*/
@keyframes bg {
  /* animate the whole background‑position property,
     which can accept the comma‑separated list for multiple
     backgrounds. */
  from {
    background-position: 0px 0px, 16px 16px;
  }
  to {
    background-position: 32px -32px, 48px -16px;
  }
}


/*-------------------------------------------------
  scrollbars (WebKit)
-------------------------------------------------*/

  body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: rgba(245, 40, 145, 0);
}

body::-webkit-scrollbar-thumb {
    background-color: #303787;
    border-radius: 3px;
}

/*-------------------------------------------------
  body styling
-------------------------------------------------*/



h1{
  font-family: blitzbold;
  color: #303787;
  font-size: 70px;
  text-align: center;
}


body {
  background-color: white;
  background-image: radial-gradient(#eaebf3 5%, transparent 15%), radial-gradient(#e4e5ed 5%, transparent 15%);
  background-position: 0px 0px, 16px 16px;
  background-size: 32px 32px, 32px 32px;
  color: black;
  font-family: blitzmain;
  text-align: center;
  animation: bg 2s linear infinite;
  margin: -4px 0 0 0;
  font-size: 16px;
}


h2 {
  font-family: blitzbold;
  color: #303787;
  font-size: 50px;
}

h3 {
  line-height: 4px;
}

.container {
  display: flex; justify-content: center;
}

.container25, .container50, .container37 {
  margin: 0px 4px;
  color: #fff;
}

.container25 {
  width: 150px;
}

.container50 {
  width: 550px;
}

.container37{
  width: 325px;
}

.webring {
  outline: 2px dashed white;
  margin: 0px auto;
  width: 242px;
  max-height: 200px;
  font-size:10px;
}


.box {
  background-color: #303787;
  border-radius: 8px;
  margin: 8px 0px 0px 0px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  padding: 15px;
}

.bg {
  background-color: white;
  outline: 1px solid gray;
}


.centered { text-align: center; }
.justified { text-align: justify; }
.scroller { overflow: auto; height: 320px; }
.alterna {  font-family: alterna;}  .hangul {font-family: hangul;}
.abitbig { font-size: 30px; }
.whitet{color:#fff}