/*
  _      _   _____   ___   __  __  ___  _  _____ 
 | |    /_\ | _ \ \ / /_\ |  \/  |/ _ \| ||_   _|
 | |__ / _ \|   /\ V / _ \| |\/| | (_) | |__| |  
 |____/_/ \_\_|_\ \_/_/ \_\_|  |_|\___/|____|_|  
                                                 
thanks for checking out my source code :)
i hope you find what you're looking for

*/

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(spyder.gif);
  z-index: -1;
}

body {
  background-image: url(spyder.gif);
  background-attachment: fixed;
  color: #b9c9c6;
  font-family: sans-serif;
  font-size: 1em;
  }

a:link {
  color: #ff3fbc;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #ff3fbc;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: lime;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #34a36e;
  text-decoration: none;
}
  
h1 {
  background-color: #1a1a1a;
  color: #ff3fbc;
  font-family: "Google Sans Code", monospace;
  }

.bbh-bartle-regular {
  font-family: "BBH Bartle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

// <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name

.google-sans-code-<uniquifier> {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.title {
  box-sizing: border-box;
  width: 70%;
  background-color: black;
  color: #b9c9c6;
  font-family: "BBH Bartle";
  text-align: center;
  font-weight: bold;
  font-size: 3em;
  margin: auto;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 0px;
}

.label {
 box-sizing: border-box;
 width: 70%;
 color: #b9c9c6;
 font-family: "Google Sans Code", monospace;
 text-align: left;
 font-size: 1.2em;
 margin: auto;
 background-color: black;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-left: 8px;
 padding-top: 5px;
}

.block {
  box-sizing: border-box;
  width: 70%;
  background-color: #23192f;
  color: #fff;
  text-align: left;
  line-height: 1.3;
  font-size: 1em;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px 30px 5px 30px;
}

.links {
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
  width: 70%;
  background-color: black;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  margin: auto;
  padding-top: 0px;
  padding-bottom: 10px;
}

#introimg {
  width: 10%;
  float: left;
  margin-right: 20px;
}

#otherimg {
  width: 20%;
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
}

#divider {
 display: block;
 width: 70%;
 margin: 10px auto 10px auto;
 padding: 0px;
}

#wire {
  display: block;
  background-color: black;
  width: 70%;
  margin: auto;
  margin-top: 0px;
  padding: 0px;
}

#filmnav {
 box-sizing: border-box;
 display: block;
 background-color: black;
 width: 70%;
 text-align: center;
 margin: auto;
 margin-top: 0px;
}

#warning {
 width:40%;
 text-align:center;
 background-color: black;
 font-size:0.8em;
 color:white;
 margin-top:10px; 
}

.outro {
  width: 30%;
  background-color: black;
  font-size: 1em;
  text-align: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.backimg {
  width: 50%;
  position: absolute;
  z-index: -1;
  bottom: 0px;
  right: 0px;
  margin: 0px;
}

.sideimg {
  width: 80px;
  position: fixed;
  z-index: 0;
  bottom: 50px;
  left: 20px;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav {
  width: 80px;
  position: fixed;
  z-index: 1;
  bottom: 20px;
  left: 10px;
  background: #000;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.1em;
  color: #ff3fbc;
  display: block;
}

.sidenav a:hover {
  color: white;
}

.main {
  box-sizing: border-box;
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  margin-right: 140px;
  font-size: 1em; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

#noai {
  width:15%;
}

ul.no {
  list-style: none; /* Remove HTML bullets */
  padding: 0;
  margin: 0;
}

li.no { 
  padding-left: 16px; 
}

li.no::before {
  content: "✕";
  padding-right: 8px;
  color: red;
}

ul.yes {
  list-style: none; /* Remove HTML bullets */
  padding: 0;
  margin: 0;
}

li.yes { 
  padding-left: 16px; 
}

li.yes::before {
  content: "✓";
  padding-right: 8px;
  color: green;
}

@media (max-width: 600px) {
  .title {width:100%}
  .links {width:100%}
  .label {width:100%}
  .block {width: 100%}
  .outro {width:80%}
  #introimg {float:left;width:30%;margin-right:20px;}
  #otherimg {float:right;width:100%;}
  #banner {width:90%}
  #art {width:45%}
  #mini {width:15%}
  #email {width:100%}
  #warning {width:80%}
  #divider {width:80%}
  #mobiletable {width:100%;font-size:0.8em}
  #noai {width:15%}
}