@font-face {
  font-family: kallistomed; /* set name */
  src: url(/fonts/Kallisto_Medium.otf); /* url of the font */
}

@font-face {
  font-family: kallistobold; /* set name */
  src: url(/fonts/Kallisto_Bold.otf); /* url of the font */
}

@font-face {
  font-family: kallistoheavy; /* set name */
  src: url(/fonts/Kallisto_Heavy.otf); /* url of the font */
}

@font-face {
  font-family: kallistomedit; /* set name */
  src: url(/fonts/Kallisto_Medium_Italic.otf); /* url of the font */
}

@font-face {
  font-family: kallistoboldit; /* set name */
  src: url(/fonts/Kallisto_Bold_Italic.otf); /* url of the font */
}

@font-face {
  font-family: kallistoheavyit; /* set name */
  src: url(/fonts/Kallisto_Heavy_Italic.otf); /* url of the font */
}

@font-face {
  font-family: hyperionova; /* set name */
  src: url(/fonts/Hyperionova.otf); /* url of the font */
}


body {
  background:#060116;
  font-family: kallistomed;
  font-size:14px;
  color:#fff;
  letter-spacing:1px;
  line-height:18px;
}

a:link, a:visited, a:active {
  font-family: kallistomedit;
  color:#ffde3a;
  text-decoration:none;
}
a:hover { color:#ed9935; font-family:kallistoboldit;}

b { color:#fff; }
i { color:#fff; }
u { color:#fff; }

::-webkit-scrollbar-thumb {
  background:#160538;
  border:1px solid #301466;
}
::-webkit-scrollbar {
  width:7px;
  background:transparent;
}

#layout {
  max-width:fit-content;
  margin:auto auto;
  max-height:fit-content;
}

#columns {
  display: -webkit-flex;
  display: flex;
  overflow: auto;
  background:#160538;
  border-radius: 32px;
}

#header {
  height:64px;
  background:#160538;
  border-radius: 64px;
  padding-bottom: 8px;
}

#sitename a {
  font:32px kallistoheavy;
  color:#ffde3a;
  text-transform:uppercase;
  letter-spacing:2px;
  background:#301466;
  border-radius:10em;
  padding:8px 16px;
}
#sitename a:hover {
  font:32px kallistoheavy;
  color:#301466;
  text-transform:uppercase;
  letter-spacing:2px;
  background:#ffde3a;
  border-radius:10em;
  padding:8px 16px;
}

#menu {
  position: sticky;
  top:0;
  height:24px;
  line-height:24px;
  text-align:center;
  margin: 8px;
  background:#060116;
  border-radius: 16px;
  padding: 8px;
}

#menu a {
  font:14px kallistomed;
  text-transform:uppercase;
  padding:4px;
  margin-right:10px;
  letter-spacing:1px;
  color:#834aed;
}
#menu a:hover { color:#ffde3a; font-family:kallistobold}

#sidel {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex:  1;
  width:auto;
  background:#301466;
  color:#c48eff;
  border-radius: 16px;
  margin: 32px;
  padding: 16px;
}

#sider {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex:  1;
  width:auto;
  background:#301466;
  color:#c48eff;
  border-radius: 16px;
  margin: 32px;
  padding: 16px;
}

#content1 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex:  3;
  width: auto;
  background:#301466;
  color:#c48eff;
  border-radius: 16px;
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 16px;
}

#list {
  height:fit-content;
  width:fit-content;
  background:#160538;
  border-radius: 8px;
  padding: 16px;
  line-height: 150%;
}

#image {
  background:#160538;
  border-radius:2em;
  margin:8px;
  padding:16px;
  max-height: 550px;
  max-width: none;
}

#smol {
  position:fixed;
  bottom:0;
  right:0;
  max-height:200px;
  z-index:1;
}

#doodle {
  background:#160538;
  border-radius:2em;
  margin:0px;
  padding:16px;
  max-height: none;
  max-height: 180px;
}

#glyph {
  height:48px;
}

.input {
  background:#160538;
  font-family: kallistobold;
  color: #fff;
  border-radius:1em;
  margin:4px;
  padding:8px;
  border-width: 0px;
  max-width: 80px;
  text-align: center;
}

.title {
  font:18px kallistobold;
  color:#ffde3a;
  letter-spacing:1px;
  margin-bottom:5px;
}

.scrollbox {
  background:#160538;
  height:100px;
  overflow:auto;
  overflow-x:hidden;
  margin-top:4px;
}
.divider {
  background:#834aed;
  height:3px;
  overflow:auto;
  overflow-x:hidden;
  margin-top:12px;
  margin-bottom:16px;
  border-radius: 10em;
}