/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "Truth and Ideals";
  font-synthesis: weight style small-caps;
  size-adjust: 160%; /* the new TaI looks a lot smaller at 13.5px font-size, but Kissinger 2 and AH Rokajang do not so */
  src: local("Truth and Ideals"), url("https://hoard.astaryuu.cc/astaryuu/fonts/Truth And Ideals-Normal2.ttf") format(truetype);
}

@font-face {
  font-family: "Truth and Ideals - Fighting Ideals";
  size-adjust: 160%; /* the new TaI looks a lot smaller at 13.5px font-size, but Kissinger 2 and AH Rokajang do not so */
  src: local("Truth and Ideals - Fighting Ideals"), url("https://hoard.astaryuu.cc/astaryuu/fonts/Truth And Ideals-Fighting Ideals-Normal2.ttf") format(truetype);
}

@font-face {
  font-family: "AH Rokajang Shika";
  src: local("AH Rokajang Shika"), url("https://hoard.astaryuu.cc/astaryuu/fonts/AHRokajangShika.ttf") format(truetype);
}

@font-face {
  font-family: "Unifont";
  size-adjust: 117%;
  src: local("Unifont"), url("https://hoard.astaryuu.cc/astaryuu/fonts/unifont-15.1.05.otf") format(opentype);
}

@font-face {
  font-family: "Unifont JP";
  size-adjust: 117%;
  src: local("Unifont JP"), url("https://hoard.astaryuu.cc/astaryuu/fonts/unifont_jp-15.1.05.otf") format(opentype);
}

@font-face {
  font-family: "Unifont Upper";
  size-adjust: 117%;
  src: local("Unifont Upper"), url("https://hoard.astaryuu.cc/astaryuu/fonts/unifont_upper-15.1.05.otf") format(opentype);
}

:root {
  background: #222 url("https://hoard.astaryuu.cc/astaryuu/background/saigyou_ayakashi.png"); /*Replace with your own background image.*/
  background-size: cover;
	background-attachment: fixed;
  background-position:center;
	color: white;
	font-size: 13.5px;
	font-family: "Truth and Ideals", "Unifont", "Unifont JP", "Unifont Upper", -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", Ubuntu, "Helvetica Neue", "Lucida Sans Unicode", "Segoe UI", system-ui, sans-serif;
	scroll-behavior: smooth;
}
  
a {
  color: #33c1ff;
  text-decoration: none;
}
  
a:hover {
  color: #95dfff;
  transition: color 0.2s ease-in-out;
}

.image-link {
  transition: transform 0.25s ease, z-index 0.25s ease;
}

.image-link:hover {
  transform: scale(1.1125);
  z-index: 1;
}

.overflow-auto {
  overflow-x: auto;
}

table {
  text-align:center;
  width: 90%;
  margin: auto;
  border-collapse: collapse;
}

.table-super-narrow {
  width: 60%;
}

.table-narrow {
  width: 75%;
}

.table-wide {
  width: 120%;
}

.table-super-wide {
  width: 150%;
}

.table-ultra-wide {
  width: 180%;
}

table tr {
  display: table-row;
  vertical-align: inherit;
}

table td {
  border: 1px solid #ccc;
}

/* Contains the columns */
.row{
  margin-left:-20px;
  margin-bottom:-20px;
  zoom:1;
  display:flex;
}
.row:before,
.row:after{
  content:"";
  display:table;
}
.row:after{
  clear:both;
}

/* Base Column */
.col{
  float:left;
  margin-bottom:0!important;
  padding-left:20px;
  position:relative;
  width:100%;
  flex: 1;
}

/* Size the columns in the row */
.col-90 {flex-basis:90%}
.col-80 {flex-basis:80%}
.col-75 {flex-basis:75%}
.col-66 {flex-basis:66.6666%}
.col-60 {flex-basis:60%}
.col-50 {flex-basis:50%}
.col-40 {flex-basis:40%}
.col-33 {flex-basis:33.3333%}
.col-25 {flex-basis:25%}
.col-20 {flex-basis:20%}
.col-10 {flex-basis:10%}
  
.links {
  border-top: 1px solid #ccc;
  background: rgb(238, 238, 238, 0.05);
  padding-left: 25px;
  padding-right: 25px;
  list-style-type:none;
  text-align: center;
  }
  
/*For the first link in the links bar*/
.link-first {
  display: inline-block;
  border-right: 1px solid #ccc;
  padding: 2px;
  padding-right: 11px;
  padding-bottom: 15px;
  padding-top: 10px;
  text-align: center;
  }
  
.link {
  display: inline-block;
  border-right: 1px solid #ccc;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-top: 10px;
  text-align: center;
  }

.link-active {
  font-weight: bold;
  color: #aaa;
}

.link-active a {
  color: #aaa;
}
  
/*For the last link in the links bar*/
.link-last {
  display: inline-block;
  padding: 2px;
  padding-left: 9px;
  padding-bottom: 15px;
  padding-top: 10px;
  text-align: center;
  }

.main {
  margin: 0 auto;
  width: 500px;
  background: rgb(10, 10, 10, 0.9);
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  /*Quick guide to box-shadow:
    First two numbers are vertical and horizontal offset.
    Third number is how far to spread the fuzzy effect.
    Fourth number is how much solid border/shadow there should be before the fuzzy effect begins.
  */
  box-shadow: 0px 0px 15px 2px #42c6ff;
}

.main-wide {
  margin: 0 auto;
  width: 90%;
  background: rgb(10, 10, 10, 0.9);
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  /*Quick guide to box-shadow:
    First two numbers are vertical and horizontal offset.
    Third number is how far to spread the fuzzy effect.
    Fourth number is how much solid border/shadow there should be before the fuzzy effect begins.
  */
  box-shadow: 0px 0px 15px 2px #42c6ff;
}

.main-inner {
  padding: 25px;
  padding-top: 15px;
  padding-bottom: 15px;
}
  
/*Prevent image overflow*/  
.main img {
  max-width: 100%;
  height: auto;
  }
  
.footer {
  margin: 0 auto;
  padding: 15px;
  padding-top: 0px;
  margin-top: -20px;
  text-align: center;
  text-shadow: 0 0 5px black, 0 0 3px black;
  font-size: 12px;
}

input, .code, .sc-code, .smallcaps-code {
  font-family: "Unifont", "Unifont JP", "Unifont Upper", -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", Ubuntu, "Helvetica Neue", "Lucida Sans Unicode", "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3, h4 {
  font-weight: 700;
}

input #input-search {
  width: 30%;
  -webkit-transition: width 0.15s ease-in-out;
  transition: width 0.15s ease-in-out;
}
 
 /* When the input field gets focus,
      change its width to 100% */
input #input-search:focus {
  width: 70%;
}

/* Only use if AH Rokajang font is wanted; for Rokadong and Liðakuin PUA use .roka and .lida classes */
.rokadong-script {
  font-family: "AH Rokajang Shika", -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", Ubuntu, "Helvetica Neue", "Lucida Sans Unicode", "Segoe UI", system-ui, sans-serif;
}

.sc, .smallcaps, .sc-code, .smallcaps-code { /* */
  font-variant: small-caps;
  text-transform: lowercase;
}

.sc-fi { /* TaI smallcaps */
  font-family: "Truth and Ideals - Fighting Ideals",  "Unifont", "Unifont JP", "Unifont Upper", -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", Ubuntu, "Helvetica Neue", "Lucida Sans Unicode", "Segoe UI", system-ui, sans-serif;
  text-transform: lowercase;
}

/*Mobile compatibility*/
@media(orientation: portrait) {
  .main {
    width: 80%;
  }
    
  .main-wide {
    width: 80%;
  }
  
  .row {
    flex-direction: column;
  }
}