@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif");
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Nabla");
@import url("https://fonts.googleapis.com/css?family=Lato");
@import url("https://fonts.googleapis.com/css?family=Pirata+One");
@import url("https://fonts.googleapis.com/css?family=Alumni+Sans+Pinstripe");
:root {
	--bg: hsl(0, 0%, 2%);
	--fg: hsl(0, 0%, 98%);
	--md: hsl(0, 0%, 80%);
	--wr: hsl(0, 97%, 27%);
	--ds: hsl(0, 0%, 35%);
	--fnt: "Lato", sans-serif;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--fnt);
	font-size: 1.5rem;
	transition: 0.5s;
}
body {
	background: var(--bg) !important;
	color: var(--fg) !important;
}
.container, .wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	flex-direction: column;
	gap: 5vh;
}
.inpstuff {
	display: flex;
	gap: 1vw;
	width: 100%;
}
.sigma {
	font-weight: bold;
	font-size: 3rem;
}
.myButton, .coolthing {
	border-radius: 11px;
	outline: 0;
	border: 1px solid var(--fg);
	padding: 1vh;
	background: var(--bg) !important;
	color: var(--fg) !important;
}
.myButton {
	cursor: pointer;
}
.coolthing {
	width: 100%; 
}
.flag {
	width: 10vw;
	border: #fff solid 1px;
}

.settings {
  position: fixed;
  top: 5vh;
  right: 2.5vw;
  height: 5vh;
  width: 5vh;
  cursor: pointer;
  z-index: 3;
  display: default;
}
.hide {
  display: none;
}
.cog {
  fill: var(--fg);
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.cog svg {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.popup2 {
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(3vh);
}

.x {
  height: 3vw;
  width: 10vw;
  border: 1px solid var(--wr);
  padding: 1vh;
  cursor: pointer;
  top: 2vw;
  right: 5vw;
  font-size: 2vw;
  position: fixed;
  z-index: 034069864389634896499439649;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nodisp {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(3vh);
}
.cont {
  width: 30vw;
  height: 70vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--bg);
  border: var(--fg) solid 2px;
  border-radius: 5px;
}

.cont h1 {
  margin-bottom: 2vh;
}
.grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template: "1fr 1fr" 10vh "1fr 1fr" 10vh "1fr 1fr" 10vh;
  grid-gap: 2vh;
}
.option {
  height: 10vh;
  width: 10vw;
  border: var(--md) solid 1px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vh;
}
.changer {
	max-width: 40vw;
	text-align: center;
}
.white {
  background: hsl(0, 0%, 100%);
}
.black {
  background: hsl(0, 0%, 1%);
}
.blue {
  background: hsl(210, 97%, 18%);
}
.red {
  background: hsl(0, 97%, 27%);
}
.green {
  background: hsl(120, 97%, 27%);
}
.orange {
  background: hsl(24, 100%, 50%);
}
.yellow {
  background: hsl(54, 100%, 50%);
}
.purple {
  background: hsl(277, 97%, 24%);
}
.lato {
  font-family: "Lato", sans-serif;
}
.serif {
  font-family: "Noto Serif", serif;
}
.monospaced {
  font-family: "Roboto Mono", monospace;
}
.raleway {
  font-family: "Raleway", sans-serif;
}
.pacifico {
  font-family: "Pacifico", sans-serif;
}
.nabla {
  font-family: "Nabla", sans-serif;
}
.pirataone {
  font-family: "Pirata One", sans-serif;
}
.alumnisanspinstripe {
  font-family: "Alumni Sans Pinstripe", sans-serif;
}
.modes {
display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 2vh;
}
.mode {
height: 10vh;
  width: 90%;
  border: 1px solid var(--md);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vh;
  cursor: pointer;
}
.active {
	background: var(--fg);
	color: var(--bg);
}
#al {
	border: 1px solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-image-slice: 100%;
    border-image-source: none;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient( 45deg, red, orange, yellow, green, blue, indigo, violet, red );
}