@font-face {
	font-family: Bohemian;
	src: url("../fonts/Bohemian Typewriter.ttf");
}

@shadow {
	box-shadow: 0px 0px 22px 1px #161616;
}

body {
  background-color: black;
  background-image: url("../images/binary.gif");
}

body#coolweb {
  background-image: url("../images/squiggle_purpleblue.gif");
  font-family: 'Courier New', Courier, monospace;
}

body#fab {
  background-image: url("../images/darkred.GIF");
}

p {
  color: #161616;
  font-size: 18px;
  padding-top: 0;
  font-family: "Arial";
}

a {
  text-decoration: none;
  color: black;
  font-family: Bohemian;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-family: Bohemian;
}

img#home-mary {
	width: 960px;
	height: auto;
	align-self: end;
}

.divider {
	width: 100%;
	height: auto;
	text-align: center;
}

.title {
  color: #1e3243;
  font-size: 40px;

  text-align: center;
}

.scrollable {
  max-height: 30%;
  overflow-y: scroll;
  text-align: justify;
  margin: 5px;
}

.container {
  text-shadow: 0.5px 0px 1.5px #172939e4;

  margin: auto;

  margin-top: 30px;
  margin-bottom: 30px;
  background-color: rgba(246, 246, 246, 0);
  
  width: 80%;
}

.box-main#hub {
	text-align: center;
	padding: 25px 0;
}

.box-main#hub>div {
	background-color: rgba(0,0,0,0);
	border: none;
}

.hub-buttons {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: center;
  text-align: center;
}

.hub-buttons>div {
  width: 300px;
}

.reel {
  width: 100%;
  height: fit-content;

  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;

  padding: 0px 7px;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.reel-item {
  width: auto;
  height: 100px;
  float: none;
  display: inline-block;
}

.caption {
  font-size: 14px;
  padding: 0;
  color: #23445e;
  margin-top: 1.5px;
  text-align: center;
}

.cd {
  max-height: 140px;
  margin: 0;
  padding: 0;
  max-width: min-content;
}

.reel1#movies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3px;
  justify-content: center;
}

.reel1#books {
  width: 100%;
  align-self: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.reel1#movies {
  display: inline-table;
}

.reel1#music {
  text-align: center;
}

.reel1#music>a {
  display: inline-table;
}

.reel1#books {
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: space-evenly;
}

.reel1#movies>a>span>p {
  max-width: 70%;
  text-align: center;
}

.caption#author {
  font-size: 13.5px;
  padding: 0;
  margin-top: -10px;
  margin-bottom: 20px;
  color: #6b8398 !important;
}

details>.reel1#movies>a {
  text-decoration-color: #23445e;
}

details>.reel1#music>a {
  text-decoration-color: #23445e;
}

details>.reel1#books>a {
  text-decoration-color: #23445e;
}

.poster {
  width: 120px;
}

.cover {
  height: 180px;
  width: 120px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.cooltitle {
  color: #aff8ff;
  font-size: 40px;
  text-align: center;
  text-shadow: 0.5px 0px 15px #305fec;
  margin-bottom: 10px;
}

.coolcont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 1%;
  min-width: fit-content;
}

.coolbox {
  background-color: rgba(0, 0, 0, 0.857);
  margin: auto;
  text-align: center;
  border: solid #ffffff 1px;
  font-size: 20px;
}

.coolbox#header {
  width: fit-content;
  padding: 0 5%;
}

.coolbox>ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
  padding: 5px;
  padding-bottom: 20px;
  font-weight: bold;
}

.coolbox>ul>li>a {
  color: #aff8ff;
  text-shadow: 0.5px 0px 15px #305fec;
}

.coolbox>ul>li>a:hover {
  color: #ff65e8;
  text-decoration: none;
  text-shadow: 0.5px 0px 15px #000000;
}

.coolbox#footer {
  margin-bottom: 25px;
  padding: 10px 20px;
  width: min-content;
  font-weight: bold;
}

.coolbox>a {
  color: #aff8ff;
  padding: 0px 10px;
  text-shadow: 0.5px 0px 15px #305fec;
}

.coolbox>a:hover {
  color: #ff65e8;
  text-decoration: none;
  text-shadow: 0.5px 0px 15px #000000;
}

.coolcard {
  background-color: rgba(0, 0, 0, 0.857);
  height: fit-content;
  margin: 1% 5%;
  min-width: 35%;
  max-width: 35%;
  text-align: center;
  border: solid #ffffff 1px;
}

.coolcard>summary {
  font-size: 20px;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  color: #ff65e8;
  cursor: pointer;
}

.coolcard>p {
  color: #f6f6f6dd;
  font-size: 16px;
  margin: 15px;
  font-style: italic;
}

.coolcard>ul {
  padding: 0;
  margin: 0;
  padding-bottom: 20px;
}

.coolcard>ul>li>a {
  color: #aff8ff;
  text-shadow: 0.5px 0px 15px #305fec;
  font-weight: bold;
}

.coolcard>ul>li>a:hover {
  color: #ff65e8;
  text-decoration: none;
}

.book {
  border: solid 1px #2d5b83e4;
  max-width: 90%;
  margin: auto;
  height: 100vh;

  background-image: url("/images/white_fabric.jpg");

  text-shadow: 0.5px 0px 1.5px #172939e4;
  box-shadow: 0px 0px 22px 1px #161616;

  margin-top: 25px;
  margin-bottom: 40px;
  background-color: #f6f6f6;
  padding: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.index {
  padding: 0 5% 0 5%;
  border-right: #161616bc solid 2px;
  min-height: 100%;
  min-width: 37%;
  box-shadow: 20px 0 15px -11px #16161632;

  font-size: 18px;
}

.index .title {
  padding-top: 25px;
}

.index a {
  color: #161616;
}

.index ol {
  margin-left: -19px;
}

.page {
  min-width: 50%;
  box-shadow: -20px 0 15px -11px #16161632;
}

.story {
  background-image: url("/images/white_fabric.jpg");
  padding: 40px;
  text-shadow: 0.5px 0px 1.5px #172939e4;
}

.story>h2 {
  text-align: center;
}

.still {
  position: sticky;
  top: 0;
  height: 99vh;
}

iframe {
  border: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.banner {
  
  height: auto;
  display: inline-block;
  width: 100%;
}

.nav {
  margin: auto;
  border: black solid 1px;
  text-align: center;
  background-color: #000000;
  border-width: 1px 1px 0 1px;
}

.nav>ul {
  list-style-type: none;
  font-size: 20px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav>ul>li>a {
  color: white;
}

.nav-item {
  display: flex;
  padding: 15px 15px 15px 10px;
  border-bottom: black solid 1px;
}

aside ul {
  list-style-type: disc;
}

.box-header {
  padding-top: 20px;
  text-align: center;
}

.box-main {
  color: #161616;
  padding: 15px 0 0 30px;
  background-color: rgba(246, 246, 246, 0.8);
}

.box-main#about {
  padding: 15px;
}

.box-main#home {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, min-content);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	padding: 0;
	background-color: rgba(246, 246, 246, 0.0);
}

.box-main#home>div>h1 {
	text-align: start;
}

div#intro { 
	grid-area: 2 / 1 / 3 / 5;
}
div#news { 
	grid-area: 3 / 1 / 5 / 3; 
}

div#updates { 
	grid-area: 3 / 3 / 5 / 5; 
}

div#highlight { 
	grid-area: 1 / 1 / 2 / 7;
	text-align: center;
}

div#highlight>h1 {
	text-align: center !important;
}

div#recs { 
	grid-area: 2 / 5 / 5 / 7;
	text-align: center !important;
}

div#recs>a>img {
	margin-bottom: 10px;
	max-width: 80%;
}

div#footer {
	grid-area: 4 / 1 / 5 / 7;
}

.box-main>div{
  background-color: rgba(246, 246, 246, 0.8);
  border: dotted 1px black;
  border-radius: 10px;
  padding: 15px;
}


.box-main>ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 18px;
}

.box-footer {
  margin-bottom: 2em;
  text-align: center;
}

.box-footer a {
  color: #4b5f70;
}

.mobilenav {
	display: none;
}

.mobilenav#coolmob>summary {
	font-size: 20px;
	font-weight: bold;
	padding: 15px;
	text-align: center;
	color: #ff65e8;
	cursor: pointer;
	list-style: none;
	margin-bottom: 5px;
}

.mobilenav>details {
	background-color: black;
	color: #f6f6f6;
	margin-top: -5px;
	font-family: Bohemian;
	font-size: 20px;
	text-align: center;
	padding: 7px;
}

.mobilenav>details>summary {
	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
}

.mobilenav>details>ul {
	list-style-type: none;
	text-align: center;
}

.mobilenav>details>ul>li>a {
	color: #f6f6f6;
}

.mobilenav#coolmob>ul {
	list-style: none;
	margin-top: -10px;
	text-align: left;
	margin-bottom: 15px;
}

.mobilenav#coolmob>ul>li>a {
	color: #aff8ff;
	text-shadow: 0.5px 0px 15px #305fec;
}

.itch>iframe {
	background: none;
	max-width: 80%;
	max-height: 165px;
}

@media (max-width: 860px) {
  .coolcont {
	display: block;
	min-width: 300px;
  }
  
  .container {
	  width: 100%;
  }
  
  .coolcard {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	min-width: 250px;
	max-width: 80%;
	padding: 0 15px;
  }
  
  .nav {
	  display: none;
  }
  
  #coolnav {
	  display: none;
  }
  
  .mobilenav {
	  display: block;
  }
  
  .box-main#home {
	  display: block;
  }
  
  .box-main#home > div {
	  margin: 10px;
  }
  
  .box-main#home > div > h1 {
	  font-size: 22px;
  }
}