@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- COLOR SCHEMES ----- */
:root {
	--stark-white: #F2EFEF;
	--default-text: #211B1B;
	--soft-white: #E8E4E3;
	--semi-brown: #D4CBC690;
	--twee-red: #A13220;
	--twee-yellow: #C78E28;
	--twee-green: #766C1E;
	--crate-brown: #6E4830;
	--handle-brown: #462513;
	--always-white: #F2EFEF;
}
.darkmode {
	--soft-white: #29250A;
	--semi-brown: #6E483016;
	--default-text: #E8E4E3;
	--stark-white: #140404;
}





/* ----- DIV STUFF ----- */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
}
.page {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
}
img {
	max-width: 100%;
	max-height: 100%;
}





/* ----- NAVBAR & THEME SWITCH STUFF ----- */
.navbar {
	flex-shrink: 0;
	height: 6%;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	width: 100%;
}
#theme-switch svg {
	fill: var(--default-text);
	stroke: var(--default-text);
}
#theme-switch svg:last-child{
	display: none;
}
.darkmode #theme-switch svg:first-child{
	display: none;
}
.darkmode #theme-switch svg:last-child{
	display: block;
}





/* ----- TEXT STUFF ----- */
p, h1, h2, h3 {
	margin: 0;
	padding: 0;
	color: var(--default-text);
}
h1 {
	font-family: 'Bitter', serif;
	font-weight: 800;
	font-size: clamp(3.5rem, 5.5vw, 6rem);
}
h2 {
	font-family: 'Bitter', serif;
	font-weight: 800;
	font-size: clamp(2rem, 5.5vw,3rem);
}
h3 {
	font-family: 'Bitter', serif;
	font-weight: 800;
	font-size: clamp(1rem, 5.5vw,2rem);
}
.red-txt{
	color: var(--twee-red);
}
.yellow-txt{
	color: var(--twee-yellow);
}
.green-txt{
	color: var(--twee-green);
}
.always-white{
	color: var(--always-white);
}
.big-text {
	font-family: 'Chivo Mono';
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 2.5rem);
}
.small-text {
	font-family: 'Chivo Mono';
	font-weight: 400;
	font-size: clamp(1rem, 2vw, 1.5rem);
	text-align: justify;
}
.navi-link{
	text-decoration: none;
	font-family: 'Chivo Mono';
	font-weight: 400;
	font-size: clamp(0.1rem, 2vw, 0.5rem)
}
.underline {
	text-decoration: underline;
}





/* ----- CSS DESIGN STUFF ----- */
.scalloped-box {
  --r: 15px; /* radius of circles */
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
}
.plaid {
  background-color: var(--soft-white);
  background-image: linear-gradient(90deg, var(--semi-brown) 3rem, transparent 1rem),
  					linear-gradient(var(--semi-brown) 3rem, transparent 1rem);
  background-position: 10px 10px;
  background-size: 6rem 6rem;
}




/* ----- CLOUDS (MONSTER CSS SO ALWAYS AT LAST) ----- */
#background-wrap {
  bottom: 0;
	left: 0;
	padding-top: 100px;
	position: fixed;
	right: 0;
	top: 15%;
	z-index: -1;
}

/* KEYFRAMES */
@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}
@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}
@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */
.x1 {
	-webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 15s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}
.x2 {
	-webkit-animation: animateCloud 20s linear infinite;
	-moz-animation: animateCloud 20s linear infinite;
	animation: animateCloud 20s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}
.x3 {
	-webkit-animation: animateCloud 30s linear infinite;
	-moz-animation: animateCloud 30s linear infinite;
	animation: animateCloud 30s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}
.x4 {
	-webkit-animation: animateCloud 18s linear infinite;
	-moz-animation: animateCloud 18s linear infinite;
	animation: animateCloud 18s linear infinite;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}
.x5 {
	-webkit-animation: animateCloud 25s linear infinite;
	-moz-animation: animateCloud 25s linear infinite;
	animation: animateCloud 25s linear infinite;
	
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	transform: scale(0.55);
}

/* OBJECTS */
.cloud {
  opacity: 0.3;
	background: #ffff;
	background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
	background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	
	-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

	height: 120px;
	position: relative;
	width: 350px;
}
.cloud:after, .cloud:before {
    background: #fff;
	content: '';
	position: absolute;
	z-indeX: -1;
}
.cloud:after {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;

	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}
.cloud:before {
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;

	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}





/* Large devices. Desktops, etc. */
@media (min-width: 992px) {
	.navbar {
		padding: 1.8rem 6vw 2rem 6vw;
		width: 100%;
		height: 3%;
		background-color: var(--stark-white);
	  --mask:
	    radial-gradient(11.66px at 50% calc(100% - 16px),#000 99%,#0000 101%) calc(50% - 20px) 0/40px 100%,
	    radial-gradient(11.66px at 50% calc(100% + 6px),#0000 99%,#000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
	  -webkit-mask: var(--mask);
	          mask: var(--mask);
	}
	.page{
		align-items: center;
	}
	.scalloped-box{
		--r: 20px;
	}
}