/* ========== Root ========== */
:root {
  --gap: .1em;
  --fontsize: 8pt;
  --vpwidth: 55vw;
  --vpheight: 95vh;
  --border: 2px var(--mainbackground);
  --borderstyle: outset;
  --innerborderstyle: inset;
  --mainbackground: rgb(219, 219, 219);
  --background: solid black;
  --iframebuttonheight: 25px;
  --linkcolor: rgb(0, 66, 99);
  --secondarycolor: #ff0090;
  --contentbg: white;
  --black: rgb(25, 27, 32);
  --asideLheight500: calc(var(--vpheight) * .2);
  --main_frame_height: 81vh;
  --logbooklineheight: 1.2em;
  --grey: rgb(183, 183, 183);
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-text-size-adjust: none;
}

*::-webkit-scrollbar {
  display: none;
}

::selection {
  color: white;
  background-color: var(--secondarycolor);
}

/*FONTS================================*/

@font-face {
  font-family: "Dudu";
  src: url("fonts/Dudu_Calligraphy.ttf") format("truetype");
}

/* ========== Global ========== */
body {
  color: black;
  font-size: var(--fontsize);
  font-family: "Verdana", sans-serif;
  background-image: url(backgrounds/scrapback.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}

ul {
  padding: 0;
  list-style-type: none;
}

ol {
  padding: 0 0 0 1.5em;
  margin: 0
}

img {
  width: 100%;
}

.center {
  text-align: center;
}

textarea {
  width: 100%;
  font-size: 1em;
}

/* span*/
.inset-text {
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 -0.5px 0 rgba(0, 0, 0, 0.3);
}

.normal-text {
  text-shadow: none;
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.pink {
  color: var(--secondarycolor);
}

.grey {
  color: grey
}

.mini-title {
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 -0.5px 0 rgba(0, 0, 0, 0.3);
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
}

.text.tab.pink {
  color: var(--secondarycolor);
}

/* effects */
.div-inset {
  border: var(--border);
  border-style: var(--innerborderstyle);
  background-color: black;
  box-sizing: border-box;
}

/* layout */
.viewport {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: var(--vpwidth);
  min-width: var(--vpwidth);
  max-height: none;
}

.top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: var(--vpwidth);
  overflow: hidden;
  border: var(--border);
  border-style: var(--borderstyle);
  background-color: var(--mainbackground);
}


/* Container for banners side by side */
.bottom_banners_container {
  display: flex;
  flex-direction: row;
  height: auto;
  width: var(--vpwidth);
  justify-content: center;
  border: var(--border);
  border-style: var(--borderstyle);
}

.bottom_banners_container .banner_space,
.bottom_banners_container a {
  height: 51px;
  width: 100%;
  object-fit: fill;
  display: flex;
  align-items: stretch;
}

.everything {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: var(--vpwidth);
  background-color: var(--mainbackground);
  border: var(--border);
  border-style: var(--borderstyle);
  border-top-right-radius: 25px;
  max-height: none;
}

.main {
  flex: 3;
  gap: var(--gap);
  margin: 0;
  min-height: 0;
  overflow: visible;
  word-wrap: break-word;
}

.navbar {
  width: 100%;
  margin-left: 0;
  border: none;
}

/* Aside L*/
.asideL {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  max-width: calc(100% / 3);
  overflow-y: hidden;
}

.asideL_header {
  margin: var(--gap);
  margin-bottom: 0;
  border: var(--border);
  border-style: var(--innerborderstyle);
  background-color: black;
}

.asideL_content {
  display: flex;
  flex-direction: column;
  flex: 90%;
  margin: var(--gap);
  background-color: var(--mainbackground);
}

.inset-box {
  padding: 0.3em;
  border: var(--border);
  border-style: var(--innerborderstyle);
  overflow-wrap: break-word;
  word-break: break-word;
  background-color: var(--contentbg);
  text-align: left;
}

.inset-box.no-padding {
  padding: 0;
}

.pfp {
  width: 70px;
  margin-right: 5px;
  aspect-ratio: 1/1;
}

.mini-profile {
  min-width: 175px;
  display: grid;
  grid-template-columns: 1fr 3fr
}

#online {
  width: 8px;
  image-rendering: crisp-edges;
}

.socbuttons {
  margin: var(--gap) 0 var(--gap) 0;
  grid-template-columns: 1fr 1fr;
}

.socbutton {
  border-radius: 3px;
  display: flex;
  align-items: center;
  font-weight: bold;
  overflow-wrap: break-word;
  padding: 3px;
  border: var(--border);
  border-style: var(--borderstyle);
}

.socbutton:hover {
  background-color: rgb(222, 222, 222);
  filter: brightness(1.1);
}

.socbutton:active {
  border-style: inset;
  filter: brightness(0.9);
}

.asideL_content .socbuttons img {
  width: 15px;
  padding-right: 3px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}


.main_frame {
  display: grid;
  width: auto;
  height: var(--main_frame_height);
  background-color: white;
  border: var(--border);
  border-style: var(--innerborderstyle);
}

/*TABS*/
.tabs {
  background: linear-gradient(180deg,rgb(216, 216, 216) 0%, rgba(116, 116, 116, 1) 100%);
}

.tabs ul {
  display: flex;
  margin: 0;
  position: relative;
  top: -5.5px;
  height: 17px;
  min-width: 356px;
}

.tabs h2 {
  position: relative;
  top: -4px;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 -0.5px 0 rgba(0, 0, 0, 0.3);
}

.tabs .active h2 {
  top: -3px;
}

.active {
  display: inline-block !important;
}

.tab:hover {
  cursor: pointer;
}

.tab.active {
  background-color: var(--mainbackground);
  color: var(--linkcolor);
  height: 14px;
  filter: none;
  position: relative;
  bottom: 3px;
  -webkit-box-shadow: none; 
  box-shadow: none;
}

.tab {
  color: rgb(118, 120, 135);
  background-color: var(--mainbackground);
  padding: 4px 6px 6px 5px;
  border-radius: 5px 5px 0 0;
  height: 11px;
  border: var(--border);
  border-style: var(--borderstyle);
  border-bottom: none;
  filter: grayscale(100%);
  -webkit-box-shadow: inset -1px -22px 8px -18px  rgba(0, 0, 0, 0.2); 
  box-shadow:inset -1px -22px 10px -18px rgba(0, 0, 0, 0.2);
}

.text.tab {
  padding: 0;
  background-color: transparent;
  border-style: none;
  filter: none;
  font-weight: bold;
  color: var(--linkcolor);
  -webkit-box-shadow: none; 
  box-shadow: none;
}

.text.tab.active {
  position: static;
  height: 0;
}

.tab-content {
  display: none;
  overflow: scroll;
  max-height: var(--main_frame_height);
}

.tabs .search-bar {
  background-color: var(--mainbackground);
  padding: 4px 5px;
}

.tabs .search-bar a {
  filter: saturate(0%);
  font-weight: bolder;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 -0.5px 0 rgba(0, 0, 0, 0.3);
  color: grey;
}


.tabs .search-bar input {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1em;
  width: 70%;
}

/*aside L footer*/

.asideL_footer {
  font-family: monospace;
  text-align: justify;
  line-height: .8em;
  display: block;
  padding: 3px 3px 0 3px;
  font-weight: bold;
}

.asideL_footer p {
  margin: 0;
  text-align: center;
}

/*Sections for tabs*/
:root {
  --padding: 30px;
  --textpadding: 5px;
  --mapmargin: 30px;
  --margin: 20px;
  --black: rgb(25, 27, 32);
}

.blockquote {
  color: rgb(159, 159, 159);
  font-style: italic;
  margin: 15px 0 15px 20px;
  padding-left: 10px;
  border-left: 1px solid rgb(159, 159, 159);
  display: flow-root;
}

.frontpage h2 {
  font-size: 3em;
}

.frontpage h3 {
  font-size: 1.5em;
}

p {
  margin: 0;
}

p+p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.frontpage li {
  margin-top: 1em;
}

.frontpage img {
  width: 100%;
  image-rendering: crisp-edges;
}

.frontpage::selection {
  color: white;
  background-color: var(--secondarycolor);
}

/*Headlines-----------------------------------------------------------------------------*/

.article .thumbnail {
  position: relative;
}

.article .thumbnail img {
  width: 100%;
  height: 100%;
}

.article .thumbnail .text {
  text-transform: lowercase;
  position: absolute;
  width: 100%;
  font-weight: bold;
  bottom: 0;
  left: 0;
  color: white;
}

.article .thumbnail .text .tag {
  background-color: rgb(255, 255, 255);
  position: relative;
  font-weight: bold;
  color: rgb(0, 0, 0);
  z-index: 1;
  max-width: min-content;
  white-space: nowrap;
  padding: var(--textpadding);
}

.article .thumbnail .text .titledater {
  text-align: left;
  align-items: flex-end;
  padding-bottom: 2px;
  justify-content: space-between;
  display: flex;
  height: 100%;
}

.article .thumbnail .text .titledater .titlebox {
  display: inline;
}


.article .thumbnail .text .titledater .titlebox h2 {
  display: inline;
  background-color: black;
  box-decoration-break: clone;
  padding: 0 var(--textpadding);
}

.article .thumbnail .text .titledater .titlebox h2:hover {
  background-color: var(--secondarycolor);
  color: black;
}


.article .thumbnail .text .titledater .dater {
  text-align: right;
  font-size: 6pt;
  font-weight: lighter;
  padding-right: var(--textpadding);
  min-width: max-content;
}

.article .body {
  padding: var(--padding);
}

.article .flavortext {
  margin-bottom: 1.5em;
  font-size: .8em;
}

.article p.caption,
.article .footer {
  color: rgb(159, 159, 159);
  font-style: italic;
  text-transform: uppercase;
  font-size: .8em;
}

.article p.hashtags {
  color: #36c;
}

.article p.hashtags a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.article .floater {
  width: 50%;
}

.article .floater.left {
  float: left;
  margin: 1em;
  margin-left: 0;
}

.article .floater.right {
  float: right;
  margin: 1em;
  margin-right: 0;
}

.article .footer {
  font-style: normal;
  height: auto;
  padding-top: 50px;
  text-align: right;
  width: 100%;
  justify-content: end;
}

/*Log*/

.log {
  font-family: 'Dudu', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2em;
  background-image: linear-gradient(90deg,
      transparent 29px,
      #abced4 30px,
      #abcde4 30px,
      transparent 30px,
      transparent 33px,
      #ffc5d2 33px,
      #ffc5d2 33px,
      transparent 34px),
    linear-gradient(#f7f7f7 1px,
      transparent 0px);
  background-size: 100% var(--logbooklineheight);
  padding: calc(var(--logbooklineheight)* 3.1);
  padding-left: calc(var(--margin) * 3.5);
  line-height: var(--logbooklineheight);
}


.log .bigtitle {
  background-image: url();
  margin-bottom: var(--logbooklineheight);
}

.log p {
  margin-top: var(--logbooklineheight);
}

.log .heading {
  display: flex;
  font-size: 1.3em;
  width: 100%;
  justify-content: space-between;
  font-weight: bold;
}

.log .date {
  color: #abced4;
  font-weight: normal;
  align-self: flex-end;
  text-align: end;
  margin-left: 30px;
}

.log .entry {
  margin-bottom: calc(var(--logbooklineheight) * 2);
}


.log .entry:last-child {
  margin-bottom: 0em;
}

.log img {
  width: 30%;
  box-shadow: 1px 1px 2px 0px rgba(3, 3, 3, 0.3);
}

.log img.left {
  float: left;
  margin: 1em;
  margin-left: 0;
}

.log img.right {
  float: right;
  margin: 1em;
  margin-right: 0;
}

/*Rabbit holes aka
Krisipedia ------------------------------------------------------------------------------*/
:root {
  --linecolor: rgb(218, 218, 218);
}

.krisipedia {
  background-color: white;
  margin: var(--margin);
  font-family: Arial, Helvetica, sans-serif;
}

.krisipedia i {
  color: black;
}

.krisipedia .logo {
  width: 150px;
}

.breaker {
  float: none;
  width: 100%;
  display: flow-root;
  margin-bottom: 10px;
}

.krisipedia .article {
  height: auto;
}

.krisipedia h2 {
  font-size: 1.3em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  height: auto;
  padding-bottom: 10px;
  line-height: 1em;
}

.krisipedia h2::after {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--linecolor);
}

.krisipedia table {
  width: calc(100% / 3);

}

.krisipedia th,
.krisipedia td,
.krisipedia tr {
  vertical-align: top;
  text-align: left;
  border: 0;
}

.L {
  margin-right: 15px;
  float: left;
}

.R {
  margin-left: 15px;
  float: right;
}

.tablewrapper {
  width: 100%;
}

.infobox {
  padding: 1px;
  background-color: rgb(246, 246, 246);
  outline: 1px solid var(--linecolor);
  margin-bottom: 5px;
}

.krisipedia p a {
  font-size: 10pt;
  color: #36c;
  text-decoration: none;
  font-weight: normal;
}

.krisipedia p a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.krisipedia p {
  margin: 0;
}

.krisipedia p+p {
  margin-top: 1em;
}

.krisipedia h2 a {
  color: black;
  font-weight: normal;
  text-decoration: none;
  font-size: 1em !important;
}

.krisipedia a::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url(icons/open.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.krisipedia .content_text {
  margin-bottom: 20px;
  line-height: 1.3;
}

.krisipedia .content_text a {
  font-size: var(--fontsize);
}

.krisipedia em {
  font-weight: bold;
  font-style: italic;
}


/* Neobors------------------------------------------------------------------------------ */
:root {
  --neoborsblue: #3b5998;
}

.neobors {
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

.neobors p {
  margin: 0;
}

.neobors a {
  font-weight: normal;
}

.neobors .tab-header {
  background-color: var(--neoborsblue);
  padding: 30px 20px 10px 20px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: space-between;
}

.neobors h2 {
  color: white;
  font-size: 20pt;
  display: inline-block;
}

.neobors input {
  width: 80px;
  border-radius: 0;
  border: 1px solid rgb(200, 200, 200);
  margin-right: 3px;
  padding: 0 4px;
}

.neobors input[type="email"],
.neobors input[type="password"] {
  font-size: 1em;
}

.neobors .login-grid {
  display: grid;
  gap: 3px;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
}

.neobors .login-grid .username-label {
  grid-column: 1;
  grid-row: 1;
  color: #94a3c4;
}

.neobors .login-grid .username-input {
  grid-column: 1;
  grid-row: 2;
}

.neobors .login-grid .password-label {
  grid-column: 2;
  grid-row: 1;
  color: #94a3c4;
}

.neobors .login-grid .password-input {
  grid-column: 2;
  grid-row: 2;
}

.neobors .login-grid .login-button {
  grid-column: 3;
  grid-row: 2;
  padding: 5px 8px;
  background-color: white;
  color: white;
  font-weight: bold;
  border: 1px solid #26446E;
  background-image: linear-gradient(#A4B0CA, 10%, #556fa7, #5972A8);
}

a:hover {
  cursor: pointer;
}

.neobors .profile {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 2fr 20px 1fr;
  height: 120px;
}

.neobors .colorbar {
  background-color: #edeff4;
  border-bottom: 1.5px solid #d8dfea;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  width: 100%;
}

.neobors .profile .title {
  grid-column: 2 / 2;
  grid-row: 1;
  display: flex;
  align-items: end;
  font-size: 10pt;
  font-weight: bold;
}

.neobors .profile-pic {
  aspect-ratio: 1/1;
  object-fit: cover;
  box-shadow: 1px 1px 1px #d8dfea89;
}

.neobors .button_container {
  height: min-content;
}

.neobors .profile-pic-container {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 20px 10px 20px 20px;
  width: 80px;
}

.neobors .subhead {
  grid-column: 2;
  grid-row: 2;
  margin: 0 20px 0px 0;
}

.neobors .profile-content {
  width: 90%;
  margin: 0 auto 0 20px;
}

.neobors .userbutton {
  object-fit: contain;
  width: 88px;
  image-rendering: crisp-edges;
}

.neobors .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.neobors .neobor-post {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(218, 218, 218);
}

.neobors .neobor-post:first-child {
  padding-top: 0;
}

.neobors .neobor-post:last-child {
  border-bottom: none;
}

.neobors a.name {
  font-weight: bold;
  color: var(--neoborsblue);
  text-shadow: none;
  top: -3px;
  position: relative;
}

.neobors .description>* {
  margin-bottom: 5px;
}

.neobors blockquote {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--grey);
  padding-left: 10px;
  color: var(--grey);
  font-style: italic;
}

.neobors .datetc {
  color: var(--grey);
}

.neobors .datetc a {
  font-weight: normal;
  text-shadow: none;
  vertical-align: baseline;
  color: inherit;
}

.neobors .datetc a.response-button {
  color: var(--neoborsblue);
}

.neobors .datetc a:hover {
  text-decoration: underline;
}

.neobors .post-attachment::before {
  background-image: url(templates/2_Quadbook/iconsheet.png);
  image-rendering: auto;
  display: inline-block;
  content: '';
  height: 16px;
  width: 16px;
  margin-right: 3px;
  position: relative;
  top: 4px;
}

.pin::before {
  background-position: -121px 203px;
}

.note::before {
  background-position: 3px 184px;
}

/*Aboutme------------------------------------------------------------------------------------------------*/
.aboutme {
  margin: 30px;
}

.aboutme th,
td {
  border-bottom: 1px solid rgb(223, 228, 231);
  padding: 0;
}

.aboutme table {
  width: 100%;
  border-spacing: 0;
}

.aboutme td {
  padding: 10px;
}

.aboutme ul {
  list-style-type: disc;
  margin-left: 10px;
}


/*KrisTV--------------------------------------------------------------------------------------------------*/
.kristv {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 60px auto;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

.kristv * {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.kristv h1 {
  font-size: 1.5em;
  font-weight: bold;
}

.kristv .masthead {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(226, 226, 226);
  padding: 10px 20px;
}

.kristv .kristv-logo {
  position: relative;
  height: 35px;
  width: auto;
  margin-right: 10px;
}

.kristv .kristv-search {
  gap: 0;
  display: flex;
  border-radius: 3px;
  border: 1px inset rgb(226, 226, 226);
}

.kristv button {
  background: linear-gradient(180deg, rgb(248, 248, 248) 0%, rgb(224, 224, 224) 100%);
  border: 1px solid rgb(226, 226, 226);
  border-radius: 2px;
}

.kristv .kristv-search * {
  padding: 2px 5px 2px 4px;
}

.kristv-search button {
  border: 1px solid rgb(226, 226, 226);
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, rgb(248, 248, 248) 0%, rgb(224, 224, 224) 100%);
}

.kristv button:hover {
  filter: brightness(95%);
  cursor: pointer;
}

.kristv button:active {
  border: 1px inset rgb(226, 226, 226);
  background: linear-gradient(180deg, rgb(224, 224, 224) 0%, rgb(250, 250, 250) 100%);
}

.kristv-search input {
  border-radius: 0;
  border: 1px inset rgb(226, 226, 226);
}

.kristv a {
  color: #03c;
}

.kristv a:hover {
  text-decoration: underline;
}

.kristv .masthead-sections ul {
  display: flex;
  flex-direction: row;
}

.kristv .masthead-sections ul li {
  padding: 0 10px;
}

.kristv .masthead-sections ul li:not(:last-child) {
  border-right: 1px solid rgb(226, 226, 226);
}

.kristv .content {
  padding: 15px 20px 10px 20px;
  height: 100%;
}

.kristv h2 {
  margin: 4px 0 8px 0;
}

.kristv p {
  text-align: left;
}

.kristv .video-counter {
  border: 1px solid rgb(226, 226, 226);
  border-radius: 2px;
  padding: 2px 4px;
  margin: 0 4px;
  font-weight: normal;
}

.kristv .video-counter:hover {
  background-color: #d1e1fa;
  border-color: #b6d0f7;
}

.kristv .subscribe-btn {
  padding: 2px 4px;
  margin: 0 4px 0 0;
  font-weight: normal;
}

.tooltip {
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  background-color: black;
  color: white;
  text-align: center;
  padding: 2px 5px;
  border: 1px solid grey;
  border-radius: 3px;
  position: absolute;
  width: max-content;
  box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.75);
}

.tooltip-text.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
}

.tooltip-text.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}

.tooltip-text.tooltip-bottom::before {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

.kristv .watch {
  margin-bottom: 5px;
}

.kristv .watch-panel {
  grid-column: 1;
  margin-bottom: 5px;
}

.kristv .watch-actions {
  display: flex;
  flex-direction: row;
  height: 22px;
}

.spacer {
  flex-grow: 1
}

.like-dislike button {
  padding-left: 2px;
}

.like-dislike button.like {
  border-radius: 2px 0 0 2px;
}

.like-dislike button.like:hover::before {
  background-position: -84px -82px;
}

.like-dislike button.dislike {
  border-radius: 0 2px 2px 0;
}

.like-dislike button.dislike:hover::before {
  background-position: -245px -20px;
}

.watch-actions button,
.like-dislike {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.watch-actions button::before {
  content: '';
  display: inline-block;
  transform: scale(80%);
  height: 18px;
  width: 16px;
}


button.add-to::before {
  background: no-repeat url(spritesheets/www-master-vfl8ZHa_q.png) -16px -144px;
}

.watch-actions button:not(:first-child) {
  margin-right: 5px;
}

button.add-to::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 1px solid transparent;
  border-width: 5px 5px 0;
  border-top-color: #767676;
  margin: 0 2px 0 5px;
}

button.like::before {
  background: no-repeat url(spritesheets/www-master-vfl8ZHa_q.png) -267px -71px;
}

button.dislike::before {
  background: no-repeat url(spritesheets/www-master-vfl8ZHa_q.png) -267px -107px;
}

button.share {
  padding: 5px;
}

button.share::before {
  content: none;
  width: 0;
  height: 0;
}

.kristv .visit-counter {
  height: 20px;
  position: relative;
  top: -12px;
  margin-left: auto;
}

.kristv .watch-info {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.kristv .watch-info .watch-description {
  grid-column: 1/1;
}

.kristv .watch-info .watch-description .uploader-info,
.stats .rating-counter {
  font-size: 0.9em;
  color: grey;
  margin-bottom: 2px;
}

.kristv .watch-info .stats .rating-bar {
  border-radius: 5px;
  height: 3px;
  width: 100%;
  background-image: linear-gradient(90deg, green 100%);
}

.kristv .watch-info .stats .rating-counter {
  font-size: 0.9em;
  margin-top: 2px;
}


/* Aside R*/
.asideR {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.changelog-box {
  height: 80px;
  overflow-y: scroll;
  padding: 0;
}

.changelog table {
  border-collapse: collapse;
  font-size: 1em;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1em;
  margin: 0;
  background-color: rgb(221, 221, 221);
  color: rgb(93, 93, 93);
}

.changelog td {
  padding: 10px;
  border: 0;
  
}
  
.changelog td:first-child {
  font-size: .8em;
  padding: 5px;
  width: 1em;
  vertical-align: top;
  writing-mode: vertical-lr;
  border-right: 1px solid (0, 0, 0, 0.14);
}

.changelog tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.066);
}

.changelog tr:first-child {
  background-color: rgb(239, 239, 239);
  color: rgb(56, 56, 56);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.198);
}

.template-section {
  padding: 0.3em 0;
  text-align: left;
}

.icon {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 3px;
  position: relative;
  top: 4px;
  image-rendering: pixelated;
}

#my-clock {
  align-self: end;
  margin: 1px 1px 1px 2px;
}

/* footer */
.footer {
  display: flex;
  height: 45px;
  justify-content: center;
  gap: var(--gap);
  max-width: var(--vpwidth);
  margin-top: 3px;
  flex-shrink: 0;
}

.footer .button {
  width: fit-content;
  transition: 0.1s ease-in-out;
}

.footer .button:hover {
  transform: scale(95%);
}


/*  Chat */
.chatbox {
  flex-grow: 1;
  border: var(--border);
  border-style: var(--innerborderstyle);
}

/*  Links  */
.template-section a,
.asideL a {
  color: var(--linkcolor);
  font-weight: bold;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  transition: 0.2s ease-in-out;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 -0.5px 0 rgba(0, 0, 0, 0.3);
}

/*  Marquee  */
.marquee {
  position: relative;
  height: 20px;
  display: flex;
  width: 100%;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

.marquee__content {
  display: flex;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100%;
  animation: scroll 80s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100%));
  }
}

/* Iframes */
#flagcount {
  background-color: var(--mainbackground);
  height: 100%;
}

/* Statuscafe */

.statuscafe {
  background-color: rgb(255, 234, 94);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  transform: rotate(3deg);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.47);
  transition: 0.2s ease-in;
  transition: 0.2s ease-out;
}

.statuscafe:hover {
  transform: scale(105%) rotate(-2deg);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.261);
}

.statuscafe::before {
  content: '';
  transform: rotate(-3deg);
  background-image: url(icons/pin.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  position: absolute;
  left: -10px;
  top: -20px;
}

#statuscafe {
  font-family: 'Dudu', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  align-content: center;
  text-align: left;
  padding: 2em;
  color: black;
}

#statuscafe a {
  text-decoration: none;
}

#statuscafe a::after {
  content: ' scribbled...';
}

#statuscafe-username {
  color: rgb(109, 109, 109);
}


#statuscafe-username a::after,
#statuscafe-username a::before {
  color: var(--secondarycolor);
  font-weight: lighter;
}

#statuscafe-username a {
  font-weight: bold;
  color: var(--secondarycolor);
}

/* Media queries */

@media (prefers-color-scheme: dark) {
  body {
    background-image: url(backgrounds/compbg-blank.png);
    background-color: rgb(30, 21, 32);
    background-size: cover;
  }
}

/* tablet idk */
@media (width<=1200px) {
  :root {
    --vpwidth: 90vw;
  }
}

@media (width<=720px) {
  :root {
    --vpheight: 95vh;
  }
}

/* phone */
@media (width<=800px) {
  :root {
    --vpwidth: 100vw;
    --vpheight: 100vh;
    --border: 1.5px rgb(215, 215, 215);

  }

  body {
    overflow: hidden;
  }

  .everything {
    display: block;
  }

  .everything a {
    font-size: var(--fontsize);
  }

  .statuscafe {
    padding: 10px 0;
  }

  .banner_space iframe {
    display: none;
  }

  .asideL {
    max-width: var(--vpwidth);
    max-height: var(--asideLheight500);
    align-items: center;
  }

  .asideL_content {
    flex-direction: row;
    width: 99%;
    overflow: auto;
    overflow: hidden;
  }

  .asideL_content #flagcount,
  .chatbox {
    display: none;
  }

  .asideL_content .info {
    padding: 0;
    display: inline-block;
    flex-direction: row;
    flex-grow: 1;
  }

  .info .text {
    padding: 10px;
  }

  .pfp {
    min-width: 100px;
    min-height: 100px;
  }

  .socbutton {
    padding: 0;
  }

  .socbutton img {
    object-fit: contain;
    height: 100%;
  }

  .asideR,
  .asideL_footer {
    display: none;
  }

  .main {
    height: 80vh;
  }

  #bottom_banner {
    display: none;
  }
}