/* fonts */
@font-face {
  font-family: 'ABC';
  src: url(/fonts/abc.woff);
  }

@font-face {
  font-family: 'CallingCode';
  src: url(/fonts/callingcode.woff);
  }

/* blue layout */
body.blue, body.blue .sidebar_top { background-color: #2952a3; }
body.blue .text_box, body.blue .solid_tab p { background-color: rgb(255, 255, 255, 0.99) }
body.blue .text_box hr { background-color: #193167 }
body.blue .text_box, body.blue .text_box a, body.blue .solid_tab p { color: #193167 }
body.blue .text_box h1, body.blue .text_box h2, body.blue .text_box h3, body.blue .text_box h4, body.blue .text_box h5, body.blue .text_box h6 { color: #193167 }
body.blue .text_box a:hover { color: #0a1329 }
body.blue .opaq_box, body.blue .opaq_tab p { background-color: rgb(255, 255, 255, 0.1) }
body.blue .text_box.inner_border {border: #2952a3} /* ??? */
body.blue .timetable tr:nth-child(even) {background-color: rgb(41, 82, 163, 0.15) }
body.blue .timetable tr:nth-child(odd) {background-color: rgb(255, 255, 255, 0.15) }
body.blue hr, body.blue .page_content:after { background-color: white }
body.blue, body.blue a { color: white }
body.blue a:hover { color: #c1d0f0 }
body.blue .side_yellow { display:none; }

/* yellow layout */
body.yellow, body.yellow .sidebar_top { background-color:#f3ad1d; }
body.yellow .text_box, body.yellow .solid_tab p { background-color: rgb(103, 37, 5, 0.99) }
body.yellow .text_box hr { background-color: #f3ad1d }
body.yellow .text_box, body.yellow .text_box a, body.yellow .solid_tab p { color: #f3ad1d }
body.yellow .text_box h1, body.yellow .text_box h2, body.yellow .text_box h3, body.yellow .text_box h4, body.yellow .text_box h5, body.yellow .text_box h6 { color: #f3ad1d }
body.yellow .text_box a:hover { color: #f7c96e }
body.yellow .opaq_box, body.yellow .opaq_tab p { background-color: rgb(103, 37, 5, 0.1) }
body.yellow .text_box.inner_border {border: #f3ad1d} /* ??? */
body.yellow .timetable tr:nth-child(even) {background-color: rgb(243, 173, 29, 0.15) }
body.yellow .timetable tr:nth-child(odd) {background-color: rgb(103, 37, 5, 0.15) }
body.yellow hr, body.yellow .page_content:after { background-color: rgb(103, 37, 5) }
body.yellow, body.yellow a { color: rgb(103, 37, 5) }
body.yellow a:hover { color: #311202 }
body.yellow .side_blue { display:none; }

/* note to self: make a green layout, pink layout ♡♡✤✤ */
/* to be funny, add any additional layout colors as a third button with a ? that just randomizes which color scheme is used */

body {
  margin: 0;
  font-family: ABC, Verdana, Arial;
  font-size: 16px;
  }

/* adds a fade effect when changing layout colors */
body, a, p, hr, span, h1, h2, h3, h4, h5, h6, table, tr, td { transition: all 1s; }
div.text_box, div.opaq_box, div.sidebar_top, div.page_content:after { transition: all 1s; }

/* sidebar */
div.sidebar_left, div.sidebar_top { font-family: CallingCode, Courier, Arial; font-size: 14px; }

div.sidebar_left {
  position: fixed;
  top:0;
  padding: 0 0 0 10px;
  width: 140px;
  height: 100%;
  overflow:auto;
  scrollbar-width: none;
  text-align:left;
  }
div.sidebar_left hr, div.sidebar_top hr { width:95%; height:2px; border-width:0; }
div.sidebar_left hr { margin:-13px 0; }
div.sidebar_top hr { margin: 20px auto 0 auto; }

p.color_buttons button { width:40px; height:40px; border:2px solid; border-radius:5px; font-family:Arial; font-size:22px; line-height:1; cursor:pointer; padding:0; }
.side_yellow, .side_blue { font-size:50px; }
.side_symbol { text-align:center; margin:0 0 -15px 0 }

div.sidebar_top {
  text-align:center;
  position:sticky;
  top: 0;
  padding-top:0;
  display:none;
  max-height:110px;
  overflow-y:scroll;
  overflow-x:visible;
  scrollbar-width: none;
  }
.sidebar_top p.color_buttons { position: fixed; top:75px; left:5px; }

p.topbar_links {
  max-width:280px;
  min-height:73px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-left:auto;
  margin-right:auto;
  }
p.topbar_links span { padding:0 3px;}

/* page configuration */
div.page {margin-left: 160px;}
div.page_content {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  }
/* divider between page content & sidebar */
div.page_content:after { content:''; height:80%; width:2px; position:fixed; left:0; margin-left:160px; top:10%; }

/* default text boxes */
div.opaq_box, div.text_box, div.win_box {
  margin: 0 10px;
  border-radius: 10px;
  }
div.trans_box, div.opaq_box, div.text_box, div.win_box {
  padding:10px;
  text-align: justify;
  }
div.footer { text-align: center }

div.trans_box hr, div.opaq_box hr, div.text_box hr {
  width:60%; height:2px; border-width:0;
  }

/* tab titles for boxes, has three arguments: regular tab/opaque tab; left/right; top/bottom */
div.border_tab, div.opaq_tab, div.solid_tab {
  display:block;
  text-align:right;
  margin: 0 30px 0 30%;
  font-weight:bold;
  }
div.border_tab p, div.opaq_tab p, div.solid_tab p {
  display:inline-block;
  padding: 3px 20px;
  margin:0;
  }

div.right_tab { text-align:right; margin: 0 30px 0 30%; }
div.left_tab { text-align:left; margin: 0 30% 0 30px; }
div.border_tab.top_tab p { border:2px solid; border-bottom-style: none }
div.top_tab p { border-radius: 10px 10px 0 0; }
div.border_tab.bottom_tab p { border:2px solid; border-top-style: none }
div.bottom_tab p { border-radius: 0 0 10px 10px; }
div.bottom_tab a { text-decoration:none; }

/* other textboxes */
div.win_box {
  border-image-source: url("/imgs/layout/notepad100.png");  
  border-image-repeat: repeat;
  border-image-slice: 20% 20% 15% 50% fill;
  border-image-width: 60px 60px 45px 150px;
  min-height:120px;
  padding:4px 25px 25px 10px;
  color:black;}
div.win_box a {color:blue}
.win_box p:nth-child(1) { /* makes the first p act like a title */
  margin:0 0 22px 14px;
  font-family: CallingCode, Courier, Arial;
  color:white;}

/* footer; default place for page credits */
div.footer { font-family: CallingCode, Courier, Arial; font-size: 14px; }
div.footer hr  { width:60%; height:2px; border-width:0; margin-bottom:-10px; }

/* other styling */
h1, h2, h3, h4, h5, h6 { text-align:center; font-family: CallingCode, Courier, Arial; }
s, del { opacity:0.5 }

.hr_underline { margin-top:-18px }

li.list_title { list-style-type:none ;margin:0; padding:0; text-align:center; font-weight:bold; }
li.list_hidden { opacity:0; }
li {padding:3px 0;}

div.inner_border { border:2px solid; border-radius:5px;}
.inner_border p {padding:0 5px;}

.timetable {
  width:100%;
  border-collapse: collapse;
  font-family: CallingCode, Courier, Arial; font-size: 14px;
  }
.timetable td {padding:2px 5px;}

.timetable td:nth-child(1) { width:85px; text-align:right; vertical-align:top; font-weight:bold; }
.timetable td:nth-child(2) { min-width:0px; }

.buttons_container { text-align:center; width:100%; }
.buttons_container img { border:2px outset; }
.buttons_container img:active { border:2px inset; }

/* split textbox content into 1-3 centered columns */
.content_split {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  }
.content_split p:nth-child(1) {padding-right:5px}
.content_split p:nth-last-child(1) {padding-left:5px}
.content_split ul:nth-child(1) {padding-right:20px}
.content_split ul:nth-last-child(1) {padding-left:20px}

/* page specific stuff */
.recent_art img {border-radius:5px;max-height:700px;max-width:100%;}

/* mobile layout transition */
div.mobile_warning { display:none }

@media screen and (max-width: 620px) {
  div.sidebar_top {display:block}
  div.sidebar_left {display:none}
  div.page {margin-left:0}
  div.page_content:after {display:none}
  div.mobile_warning {display:block}
  }
    
div.heeelp { justify-content:center; align-items:center; height:100vh; text-align:center; display:none }
@media screen and (max-width: 150px) {
  div.sidebar_left {display:none}
  div.sidebar_top {display:none}
  div.page {display:none}
  div.heeelp {display:flex}
  }