@font-face {
  font-family: Nounty;
  src: url(fonts/Nounty.ttf);
  font-weight:bold;
}

@font-face {
  font-family: Alvera-Square;
  src: url(fonts/AlveraDEMO-BoldSquare.ttf);
}

@font-face {
  font-family: Kagurazaka;
  src: url(fonts/KH-Dot-Kagurazaka-12.ttf);
}

:root {
  --main: rgb(100, 100, 100);
  --focus-out: rgba(22, 22, 22, 0.7);
  --bg: rgb(255, 255, 255);
  --bg-tr: rgba(255, 255, 255, 0.94);
  --accent1: rgb(31, 189, 178);
  --accent2: rgb(166, 205, 221);
  --accent3: rgb(255, 137, 174);
  --accent4: rgb(255, 183, 205);
} 

/* --- Base / Reset --- */
/* A simple reset to start with a clean slate */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Text --- */
h2{
  font-size: 2em;
  z-index: 2;
}

h3 {
  font-size: x-large;
}

b {
  color: var(--accent3);
  font-style:normal;
}

a {
  color: var(--accent1);
}

a:hover {
  color: var(--accent3);
}

p {
  color: var(--main);
}

li{
  list-style: none;
}

.retro-header {
  position: relative;
  display: inline-block;
  font-family: Alvera-Square, Kagurazaka;
  font-weight: bold;
  margin: 0;
  text-transform: lowercase;
}

.retro-header::before {
  content: attr(data-text);  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
	white-space: normal;
	word-break: break-word;
  z-index: 1;
  clip-path: inset(0.6em 0px 0.4em 0px);
}

.pink-box {
  color: var(--accent3);
}
.pink-box::before {
  background-color: var(--accent3);
}

.blue-box {
  color: var(--accent2);
}
.blue-box::before {
  background-color: var(--accent2);
}

/* --- Buttons --- */
button, .button-link{
  background-color: var(--accent4);
  color: var(--bg);
  border: none;
  font-family: Alvera-Square, Kagurazaka;
  font-size: medium;
  padding: 0.3em 1em;
  margin: 0 1em;
}
button:hover{
  background-color: var(--accent3);
}

.back {
	align-self: flex-start;
	width: auto;
	margin: 0px;
}

.languageToggle {
  align-self: flex-end;
  margin-right: 0em;
  margin-bottom: 1em;
}

/* --- Images --- */
img {
  max-width: 15em;
  object-fit: contain;
}

/* --- Screen --- */
body {
  background-size: cover;
  background-image: url("https://xmslvs.com/images/CircuitBoardLight.png");
  background-attachment: fixed;
  margin:auto;
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 600px;
  font-family: Nounty, Kagurazaka;
  line-height: 1.6;
}

/* --- Header --- */
header {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 2em;
}
header h1 {
  z-index: 2;
  position: relative;
  font-size: 4em;
  top: 0.3em;
}
header nav {
  max-width: 60%;
}
header nav ul{
	display: flex;
	align-content: center;
	flex-wrap: wrap;
}
header nav ul li{
  display: inline-block;
  margin: 0em 0.5em;
}
header a {
  color: var(--main);
  text-decoration: none;
  font-size: large;
}

/* --- Sections --- */

section {
  position: relative;
  display: flex;
  flex-direction: column;
}

.section-header {
  position: relative;
  width: fit-content;
  left: -2em;
}

/* --- Articles ---*/
article {
	display: flex;
	flex-direction: column;
}

.date {
	padding: 0em 1em;
	background-color: var(--bg);
	color: var(--accent3);
	align-self: flex-start;
	border: 3px var(--accent4) solid;
}
article img {
  min-width: 40%;
  margin: 1em;
}

/*--- Dialogue Containers ---*/
/*--- These are horizontal divs with images and text-box elements ---*/

.flow-reverse {
    flex-direction: row-reverse;
}

.dialogue-container {
  display: flex;
  justify-content: space-around;
  align-items:stretch;
  column-gap: 2em;
}

.dialogue-container img {
  max-width: 15em;
  object-fit: contain;
}

.text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  margin: 1em 0em;
  padding: 1em;
  border: 3px var(--accent2) solid;
  background-color: var(--bg-tr);
  align-content: space-around;
}

.text-box.quote {
	border-style: dashed;
  text-align: center;
	border-color: var(--accent4);
}

.invisibleOnLoad {
  display: none;
}

/*--- Button Containers ---*/

.button-container {
  width: 100%;
  z-index: 1;
  position: relative;
  margin: 1em 0em;
  padding-top: 3em;
  border: 3px var(--accent2) solid;
  background-color: var(--bg-tr);
  align-content: space-around;
}

.button-section-header {
  position: absolute;
  top: 1em;
}

.button-container ul{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.button-container li{
  margin: 1em 0em;
}
.button-link {
  text-decoration: none;
}
.button-link:hover {
  background-color: var(--accent3);
  color:var(--bg)
}

.button-container .invalid, .invalid:hover {
  background-color: var(--main);
}

.page-top-button {
	margin-top: 1em;
	margin-bottom: 1em;
}

/*--- Popovers ---*/
.popover::backdrop {
  background-color: var(--focus-out);
}
.popover:popover-open {
	background-color: var(--bg-tr);
  position:fixed;
  align-self: center;
  justify-self: center;
  overflow:visible;
  width: 40%;
  min-width: 400px;
  height: 40%;
  border: 3px var(--accent4) solid;
  padding: 1em;
	display: flex;
	flex-direction: column;
}
.popover-close{
  font-family: Nounty, Kagurazaka;
  font-size: large;
  position: absolute;
  right: -2%;
  top: -2%;
  height: 7%;
  min-height: 20px;
  width: 6%;
  min-width: 15px;
  margin: 0px;
  padding: 0px;
}
.popover .button-link {
	padding-left: 1.5em;
	padding-right: 1.5em;
	align-self: flex-start;
	margin-top: 1em;
	margin-left: 0px;
}

.popover .dialogue-container {
	align-items: center;
}

/*--- Footer ---*/
footer{
  display: flex;
  justify-content: space-between;
}
footer a{
  color: var(--main);
}

/*--- Sidebars ---*/
aside {
  display: block;
  z-index: 3; 
  position: fixed;
  bottom: 7vh;
  width: 20%;
  min-width: 300px;
}

/*--- Left ---*/
.left {
  left: 1vw;
}

/*--- Banners ---*/
.banners {
  display:block;
  padding: 0.3em 1em;
}

.banners img {
  width: 70%;
}

/*--- Miku Toggle ---*/
.mikubutton button{
  background-color: var(--accent2);
}
.mikubutton button:hover {
  background-color: var(--accent1);
}

/*--- Music Player ---*/
.musicplayer {
  font-family: Alvera-Square, Kagurazaka;
  background-color: var(--accent2);
  color: var(--bg);
  padding: 0.3em 1em;
  margin: 1em;
}
.musicplayer .metadata{
  font-size: smaller;
}
.musicplayer .controls {
  font-size: smaller;
  display: flex;
  justify-content: space-between;
}
.musicplayer button {
  padding: 2px 10px;
  margin: 3px;
}

.slider_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider_container p {
  color: var(--bg);
}

.volume_slider {
  -webkit-appearance: none;
  appearance: none;
  margin: 0px 5px;
  max-width: 5em;
  height: 3px;
  background: var(--bg);
  outline: none;
}
.volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent1);
  cursor: pointer;
  border: none;
  border-radius: 0;
}
.volume_slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--accent1);
  cursor: pointer;
  border: none;
  border-radius: 0;
}


/*--- Right ---*/
.right {
  right: 1vw;
}

/*--- Recent Updates ---*/
.recent {
  display: block;
  padding: 0 1em;
}
.recent .text-box {
  max-width: 100%;
  width: 100%;
  margin: 0;
  overflow: auto;
  height: 50vh;
}
#recent-container {
  padding: 1em;
}
.recent .text-box img {
  max-width: 100%;
}

/*--- World Map ---*/
.worldmap {
  display:block;
  padding: 0.3em 1em;
}
.worldmap img {
  width: 100%;
}

/*--- Dark Mode Toggle ---*/
#darkModeToggle {
	position: fixed;
	top: 1vh;
	right: 1vw;
}

/*--- Features Hidden Warning ---*/
.suboptimal {
  display: none;
  font-size: small;
  position: fixed;
  z-index: 3; 
  top: 1vh;
  right: 1vw;
  width: 20%;
  min-width: 200px;
}
.suboptimal-mobile {
  display: none;
  font-size: small;
  position: fixed;
  z-index: 3; 
  bottom: 1vh;
  left: 1vw;
  width: 20%;
  min-width: 200px;
}
.suboptimal .text-box, .suboptimal-mobile .text-box {
  max-width: 100%;
  border-color: var(--accent3);
}



/*--- Features Hidden Conditional ---*/
@media only screen and (max-width: 1200px) {
  .left, .right, #darkModeToggle {
      display: none;
  }
  .suboptimal {
    display: block;
  }
}
@media only screen and (max-width: 750px) {
	header {
		align-items: center;
	}
	header h1 {
		top: 0em;
	}
  body {
		width: 100%;
		padding: 1em;
		min-width: 300px;
	}
	.dialogue-container {
		flex-direction: column;
		align-items: center;
	}
	.flow-reverse {
		flex-direction: column;
	}
	.section-header {
		left: 0px;
	}
	.popover:popover-open {
		min-width: 250px;
	}
	.suboptimal {
		display: none;
	}
	.suboptimal-mobile {
		display: block;
	}
  img {
    min-width: 100%;
  }
  article img {
    min-width: 100%;
  }
}



/*--- Simplify i-frame content ---*/
html.loaded-in-iframe header,
html.loaded-in-iframe footer,
html.loaded-in-iframe h2,
html.loaded-in-iframe .back,
html.loaded-in-iframe #darkModeToggle{
  display: none!important;
}
html.loaded-in-iframe body,
html.loaded-in-iframe img{
    width: 100%;
    min-width: 0px;
}
html.loaded-in-iframe body{
	background-image:none!important;
}
html.loaded-in-iframe .dialogue-container {
    flex-wrap: wrap;
}
html.loaded-in-iframe .text-box {
		background-color: var(--bg-tr) !important;
    padding:0px;
    border:none;
}