/* 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." */

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
}

/* LINKS */

a {
  cursor: pointer;
  font-style: italic;
  color: dimgray;
}

a:hover {
  color: darkgray;
}

a:active{
 color: white 
}

.navi:hover {
  text-decoration: underline dashed;
  border-bottom: 2px solid white;
  border-top: 2px solid white;
  border-left: 2px solid white;
  padding-top: 3px;
  padding-left: 8px;
  padding-bottom: 3px;
  color: white;
  width: 140px;
}


/* BANNER */

header {
  margin-left: auto;
  margin-right: auto;
}

.logo {
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  filter: drop-shadow(-1px 1px 10px white);
  height: 100px;
}

.flexbox {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}


/* BODY */

body {
	background-color: snow;
	color: black;
	background-image: linear-gradient(to top right, rgba(88, 88, 89, 0.3) 37%, rgba(194, 117, 129, 0.3) 44%, rgba(234, 224, 134, 0.3) 51%, rgba(233, 234, 235, 0.3) 58%, rgba(137, 192, 222, 0.3) 65%, rgba(91, 171, 130, 0.3) 72%, rgba(88, 88, 89, 0.3) 79%), url('images/twig_bg.webp');
	font-family: 'IBM Plex Mono', monospace, Verdana, Geneva, Tahoma, sans-serif;
}

.container {
	width: 637px;
	margin: auto;
}

.nav {
	width: 137px;
	float: left;
}

.navi {
	display: block;
	font-family: 'IBM Plex Mono', monospace, Verdana, Geneva, Tahoma, sans-serif;
  font-style: normal;
	background: black;
	color: white;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}

.right {
  float: right;
  width: 120px;
  font-size: 12px;
  font-weight: 600;
}

.logs{
  width: 135px;
  height: 194px;
  background-color: floralwhite;
  border: 2px dashed black;
  padding: 5px;
  margin-bottom: 10px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: black floralwhite;
  -ms-overflow-style: none;
}

.logs::-webkit-scrollbar {
  display: none;
}

.logs ul {
	padding-left: 10px;
}

.mood{
  background-color: floralwhite;
  border: 2px dashed black;
  padding: 5px;
  margin-bottom: 10px;
  width: 135px;
}

.decor{
  width: 135px;
  text-align: center;
}

.text-box {
  width: 370px;
  height: 500px;
  background-color: floralwhite;
  padding: 20px;
  border: 2px dashed black;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: black floralwhite;
  scrollbar-gutter: auto;
  margin-bottom: 61px;
}

.text-boxx {
  width: 235px;
  background-color: floralwhite;
  /*! margin-left: auto; */
  /*! margin-right: auto; */
  padding: 20px;
  border: 2px dashed black;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: black floralwhite;
  scrollbar-gutter: auto;
  margin-bottom: 20px;
  float: left;
  margin-left: 50px;
  margin-top: 232px;
}

hr {
  border-style: dashed;
  margin-top: 10px;
}

.stats {
	border: 2px dashed black;
	width: 210px;
	background-color: floralwhite;
	font-size: 13px;
	padding: 7px;
	margin-bottom: 5px;
}

table, td, th {
  border: 1px solid;
  border-collapse: collapse;
  padding: 5px;
  text-align: center;
}

th {
  background-color: black;
  color: white;
  border: floralwhite;
  font-family: 'Protest Riot';
  letter-spacing: 0.7px;    
}

/* Tooltip container */
.tooltipList {
  position: relative;
  display: list-item;
  border-bottom: 2px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltipList .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 3px;
  border-radius: 3px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipList:hover .tooltiptext {
  visibility: visible;
}

#upBtn {
  display: block;
  position: fixed; /* Fixed/sticky position */
  bottom: 45px; /* Place the button at the bottom of the page */
  right: 353px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: outset black;;
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  padding-top: 5px;
  border-radius: 7px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#upBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#upBtn:active {
  border: inset #555;
  background-color: #555;
  font-size: 17px;
}


/* BOX TITLES */

#video-rec {
	width: 274px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#CSP {
	width: 145px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#credits {
	width: 100px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#resources {
	width: 130px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#tumblr {
	width: 100px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#YT {
	width: 115px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}

#mylist {
	width: 285px;
	height: 30px;
	transform: skew(10deg);
	background: #000;
  color: white;
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
	padding-left: 10px;
	margin-left: 75px;
}


/* FONTS */

.hi {
  background-color: gainsboro;
  outline: 4px solid gainsboro;
}

small {
  font-size: 0.7em;
  font-weight: 400;
}

h1, h2 {
  font-family: 'Protest Riot', Verdana, Geneva, Tahoma, sans-serif;
  }

h1 {text-align: center;
  font-size: 30px;
}

h2 {
  letter-spacing: 0.5px;
  font-size: 22px;
}
  
h3 {
  font-family: 'Balsamiq Sans', monospace, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 17px;
  margin-bottom: 15px;
}

h4 {
  margin-top: 1px;
  margin-bottom: 0;
}

p {
  font-family: 'IBM Plex Mono', monospace, Verdana, Geneva, Tahoma, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
}

.text-boxx dl a {
	font-size: 13px;
	font-style: normal;
	color: mediumslateblue;
	font-weight: bold;
}

dd {
  font-size: small;
  margin-bottom: 3px;
  margin-left: 18px;
  font-weight: 500;
}

ul {
  font-size: 14px;
}

li {
  font-weight: 500;
  margin-bottom: 5px; 
}

.logs ul {
  font-size: 12px;
  font-weight: 600;
}

.logs li {
  margin: 0;
}


strong {
  font-weight: 700;
}

b {
  font-weight: 600;
}

.right p {
  font-weight: 600;
  margin-top: 8px;
  font-size: 12px;
}

.right b {
	font-size: 13px;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: #404040;
}

::selection {
  color: white;
  background: #404040;
}



/* FONT FACES */

/* Protest Riot */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Protest Riot';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/protest-riot.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* balsamiq-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Balsamiq Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/balsamiq-sans-bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  src:url('fonts/ibm-plex-mono-v19-latin_latin-ext-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-300italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-500italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-600italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-mono-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/ibm-plex-mono-v19-latin_latin-ext-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}