/*

░█████╗░██╗░░░██╗░██████╗████████╗██╗███╗░░░███╗███████╗
██╔══██╗██║░░░██║██╔════╝╚══██╔══╝██║████╗░████║██╔════╝
██║░░╚═╝██║░░░██║╚█████╗░░░░██║░░░██║██╔████╔██║█████╗░░
██║░░██╗██║░░░██║░╚═══██╗░░░██║░░░██║██║╚██╔╝██║██╔══╝░░
╚█████╔╝╚██████╔╝██████╔╝░░░██║░░░██║██║░╚═╝░██║███████╗
░╚════╝░░╚═════╝░╚═════╝░░░░╚═╝░░░╚═╝╚═╝░░░░░╚═╝╚══════╝

© 2022 dante_nl
Custime CSS style sheet. Do not copy without permission from dante_nl

CONTACT:
- Discord: dante_nl#1234
- Twitter: @dantenl1

INFO:
Fonts retrieved from Google Fonts:
- Open Sans
- Smooch Sans
- Playfair Display
- Arvo
- Staatliches
- Caveat
- Sacramento
- IBM Plex Mono
- Fira Code

Fonts retrieved from LuckUnstoppable's CDN:
- Barlow Black

Fonts retrieved from fontslibrary.org:
- Minecraftia
*/

@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Caveat&family=Fira+Code&family=IBM+Plex+Mono&family=Open+Sans&family=Playfair+Display:ital@1&family=Press+Start+2P&family=Sacramento&family=Smooch+Sans&family=Staatliches&display=swap');
@import url('https://fontlibrary.org//face/minecraftia');
@import url('https://cdn.luckvintage.net/public/fonts/barlow-black.css');

/* --------------- */
/* ⬇️ General Styling */
/* --------------- */

html,
body {
	margin: 0;
  	padding: 0;
}

body {
	background-color: #fff;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	height: 100vh;
	width: 100vw;
	text-align: center;
	position: static;
}

.clock .danger {
	color: #ff686b !important;
}

.clock .danger:hover {
	text-decoration: underline !important;
}

.clock {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 85%;
	width: 100%;
}

.clock #time{
	text-decoration: none;
	color: #000;
	font-size: 500%;
}

.regular {
	font-size: 100%;
	text-decoration: none;
}

.regular-url {
	font-size: 100%;
	text-decoration: none;
}
.regular-url:hover {
	text-decoration: underline !important;
}


.icon {
	color: #000;
	text-decoration: none;
}

.hideText {
	visibility: hidden;
}

.mobile .clock {
	font-size: 80%;
	height: 80%;
}

.mobile .clock a#time {
	font-size: 200%;
}

.circle {
	height: 24px;
	width: 24px;
	background-color: #000;
	border-radius: 50%;
	border: 2px solid #000;
	display: inline-block;
	font-size: 16px;
	color: #fff;
	text-align: center;
	margin: 2px;
}

.tooltip {
  	position: relative;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	font-size: 50% !important;

	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -100px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.item {
	width: 15%;
	height: 80%;
	background-color: #fff;
	border-radius: 8px;
	color: #000
}

.far {
	display: inline-block;
  	vertical-align: middle;
	margin: 2px;
	text-decoration: none;
	color: #000
}

.fa-regular {
	display: inline-block;
  	vertical-align: middle;
	margin: 2px;
	text-decoration: none;
	color: #000
}

.fas {
	display: inline-block;
  	vertical-align: middle;
	margin: 2px;
	text-decoration: none;
	color: #000
}

.fa-solid {
	display: inline-block;
  	vertical-align: middle;
	margin: 2px;
	text-decoration: none;
	color: #000
}

.pill {
  	background-color: #000;
	border: none;
	color: #fff;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	border-radius: 24px;
}

.close:hover {
	color: #ff686b
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin-left: 10px;
  	margin-right: 10px;
}

a {
	color: black
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #84dcc6;
}

input:focus + .slider {
  	box-shadow: 0 0 1px #84dcc6;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

.AlignItems {
  display: flex;
  align-items: center;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* --------------- */
/* ⬇️ Custom styling */
/* --------------- */

.red {
	background-color: #FFADAD;
}

.red .clock a {
	color: #996868 !important
}

.red .icon {
	color: #996868 !important;
	text-decoration: none;
}

.red .pill {
	color: #FFADAD;
	background-color: #996868;
}


.red .tooltip .tooltiptext {
	color: #FFADAD;
	background-color: #996868;
}

.orange {
	background-color: #FFD6A5;
}

.orange .clock a {
	color: #998063 !important;
}

.orange .icon {
	color: #998063 !important;
	text-decoration: none;
}

.orange .pill {
	color: #FFD6A5;
	background-color: #998063;
}

.orange .tooltip .tooltiptext {
	color: #FFD6A5;
	background-color: #998063;
}


.yellow {
	background-color: #FDFFB6;
}

.yellow .clock a {
	color: #98996D !important;
}

.yellow .icon {
	color: #98996D !important;
	text-decoration: none;
}

.yellow .pill {
	color: #FDFFB6;
	background-color: #98996D;
}

.yellow .tooltip .tooltiptext {
	color: #FDFFB6;
	background-color: #98996D;
}



.green {
	background-color: #CAFFBF;
}

.green .clock a {
	color: #799973 !important;
}

.green .icon {
	color: #799973 !important;
	text-decoration: none;
}

.green .pill {
	color: #CAFFBF;
	background-color: #799973;
}

.green .tooltip .tooltiptext {
	color: #CAFFBF;
	background-color: #799973;
}



.blue {
	background-color: #A0C4FF;
}

.blue .clock a {
	color: #607699 !important;
}

.blue .icon {
	color: #607699 !important;
	text-decoration: none;
}

.blue .pill {
	color: #A0C4FF;
	background-color: #607699;
}

.blue .tooltip .tooltiptext {
	color: #9bf6ff;
	background-color: #607699;
}

.lightblue {
	background-color: #9bf6ff;
}

.lightblue .clock a {
	color: #5d9499 !important;
}

.lightblue .icon {
	color: #5d9499 !important;
	text-decoration: none;
}

.lightblue .pill {
	color: #9bf6ff;
	background-color: #5d9499;
}

.lightblue .tooltip .tooltiptext {
	color: #9bf6ff;
	background-color: #5d9499;
}

.purple {
	background-color: #bdb2ff;
}
.purple .clock a {
	color: #716b99 !important;
}

.purple .icon {
	color: #716b99 !important;
	text-decoration: none;
}

.purple .pill {
	color: #bdb2ff;
	background-color: #716b99;
}

.purple .tooltip .tooltiptext {
	color: #bdb2ff;
	background-color: #716b99;
}



.pink {
	background-color: #ffc6ff;
}

.pink .clock a {
	color: #997799 !important;
}

.pink .icon {
	color: #997799 !important;
	text-decoration: none;
}

.pink .pill {
	color: #ffc6ff;
	background-color: #997799;
}

.pink .tooltip .tooltiptext {
	color: #ffc6ff;
	background-color: #997799;
}

/* --------------- */
/* ⬇️ Advanced options page */
/* --------------- */

#col-1 {
  position: relative;
  width: 40%;
  float: left;
  height: 100%;
  background-color: #e6e6e6;
  z-index: 1010101010
}

#col-2 {
  position: relative;
  width: 60%;
  float: left;
  height: 100%;
  background-color: #fff;
  z-index: 1010101010
}

.red-a #col-1 {
	background-color: #FFADAD;
	color: #996868;
}

.red-a .icon {
	color: #996868 !important;
	text-decoration: none;
}


.yellow-a #col-1 {
	color: #98996D;
	background-color: #FDFFB6;
}

.yellow-a .icon {
	color: #98996D !important;
	text-decoration: none;
}


.green-a #col-1 {
	color: #799973;
	background-color: #CAFFBF;
}

.green-a .icon {
	color: #799973 !important;
	text-decoration: none;
}



.blue-a #col-1 {
	color: #607699;
	background-color: #A0C4FF;
}

.blue-a .icon {
	color: #607699 !important;
	text-decoration: none;
}

input {
	background: none;
	border: 2px solid #000;
	border-radius: 16px;
	padding: 2px 5px;
}

button {
	background: none;
	border: 0px solid;
	font-size: 150%;
}

/* --------------- */
/* ⬇️ Introduction CSS */
/* --------------- */

#overlay {
	position: absolute;
	display: none;
	width: 40%;
	height: 40%;
	border-radius: 8px;
	/* top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
	cursor: pointer;
}

#text{
	position: absolute;
	top: 40%;
	left: 50%;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

/* --------------- */
/* ⬇️ SpinKit from https://tobiasahlin.com/spinkit/ */
/* --------------- */

.spinner {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}

.spinner > div {
	background-color: #333;
	height: 100%;
	width: 6px;
	display: inline-block;
	
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% { 
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}  20% { 
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}


/* --------------- */
/* ⬇️ Animation from animista.net */
/* --------------- */

.slide-in {
	-webkit-animation: slide-in 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			animation: slide-in 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in {
  0% {
	-webkit-transform: translateY(1000px);
			transform: translateY(1000px);
	opacity: 0;
  }
  100% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	opacity: 1;
  }
}
@keyframes slide-in {
  0% {
	-webkit-transform: translateY(1000px);
			transform: translateY(1000px);
	opacity: 0;
  }
  100% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	opacity: 1;
  }
}