:root {
	--darkblue:#060a10;
	--bgblue:#181e29;
	--blue:#2c3f5e;
	--lblue:#5379b5;
	--green:#4aa44b;
	--beige:#f5e6b4;
	--darkred:#4f1414;
	--red:#891818;

	--sidebar_width:250px;
	--main_padding:3rem;
	--ease_out:cubic-bezier(.14,.7,.32,.99);
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:2em;
}

html,body {
	min-height:100vh;
}

body {
    font-size:62.5%;
	background-color:var(--bgblue);
	color:#fff;
	font-family: 'Outfit', sans-serif;
	font-weight:300;
}

.container {
	container-type: inline-size;
}

#bgcorner {
	position:fixed;
	left:0;
	top:0;
	width:50%;
	z-index:-1;
	user-select: none;
	pointer-events: none;
}

.burger {
	float:right;
	position:relative;
	isolation: isolate;
	background-color:var(--blue);
	padding:1rem;
	border-radius:0.25rem;
	transition: background-color 0.25s ease-in-out;
}

	.burger img {
		position:relative;
		z-index:-1;
		width:21px;
		left:0;
		top:0;
		transition:rotate 0.25s ease;
	}

	.burger input {
		position: absolute;;
		margin:0;
		inset:0;
		width:100%;
		height:100%;
		z-index:1;
		opacity:0;
		cursor: pointer;
	}

	.burger p {
		float:left;
		font-size:0.9rem;
		margin-right:0.5rem;
		color:var(--beige);
	}

	.burger:hover {
		background-color:var(--lblue);
	}

header {
	float:left;
	clear:left;
    width:100%;
	padding-inline:var(--main_padding);
	padding-top:3rem;
	display:grid;
	grid-template-columns: 400px 1fr 100px;
	align-items: center;
	grid-gap:2rem;
}

nav {
	position:fixed;
	left:calc(-1 * var(--sidebar_width));
	top:0;
	width:var(--sidebar_width);
	max-width:calc(100vw - 110px);
	height:100%;
	height:100dvh;
	padding:1.1rem;
	background-color:var(--darkblue);
	display:grid;
	grid-template-columns:1fr;
	align-content: center;
	transition:left 0.25s var(--ease_out);
	z-index:50;
	overflow-y:auto;
}

	nav a:hover,
	nav a.active {
		color:var(--lblue);
	}

	nav a {
		float:left;
		clear:left;
		text-decoration: none;
		font-size:0.9rem;
		padding-block:0.25rem;
	}

	nav a:has(img) {
		display:grid;
		grid-template-columns: 15px 1fr;
		grid-gap:0.75rem;
	}

		nav a .icon {
			width:15px;
		}

		nav a .icon:hover img {
			filter:contrast(0) brightness(100);
		}

		nav a p {
			text-wrap: nowrap;
			line-height:1.5;
			font-size:0.8rem;
		}

	#easy-close {
		position:fixed;
		inset:0;
		height:100vh;
		height:100lvh;
		z-index:49;
		backdrop-filter: blur(0px);
		-webkit-backdrop-filter: blur(0px);
		user-select: none;
		pointer-events: none;
		transition:backdrop-filter 0.25s;
	}

	header:has(#expand-menu:checked) nav {
		left:0;
	}

	nav:has(#expand-menu:checked) ~ #easy-close {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		pointer-events: all;
	}

	nav .icon {
		position:relative;
	}

	.upper,
	.mid {
		margin-bottom: 2rem;
	}

	header .secondary {
		color:var(--blue);
		font-size:0.7rem;
		text-transform: uppercase;
		margin-block:1rem;
		font-weight:bold;
		letter-spacing: 0.2em;
	}

	.secondary-nav {
		float:right;
		list-style: none;
	}

		.secondary-nav li {
			float:left;
		}

			.secondary-nav a {
				float:left;
				text-decoration: none;
				padding:1rem;
				font-size:0.8rem;
				color:var(--beige);
			}

	.alert-num,
	.dot {
		background-color:green;
		height:0.5em;
		width:0.5em;
		border-radius:100em;
		position:Absolute;
		right:0;
		top:-3px;
		display:none;
	}

		.alert-num.visible,
		.dot {
			display:block;
		}
	
		.alert-num p {
			line-height:0;
			width:100%;
			text-align: center;
		}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1rem;
	font-weight:normal;
}

h1 {
	font-size:4rem;
}

.large {
	font-size:2rem;
	font-weight:700;
	color:var(--beige);
}

.medium {
	font-size:1.4rem;
	font-weight:700;
	color:var(--beige);
}

.notifications {
	position:fixed;
	right:var(--main_padding);
	top:var(--main_padding);
	z-index:101;
}

	.not {
		position:relative;
		display:grid;
		grid-template-columns: 40px 1fr;
		grid-gap:0.5rem;
		padding:0.5rem;
		background-color:var(--green);
		box-shadow:0 20px 30px var(--darkblue);
		border-radius:0.25rem;
		color:var(--darkblue);
		font-size:0.9rem;
		animation-name: notification-fade;
		animation-duration: 5s;
		animation-fill-mode: forwards;
		opacity:1;
		margin-bottom:0.25rem;
	}

		.not .countdown {
			position:absolute;
			bottom:0;
			left:0;
			background-color:#fff4;
			width:100%;
			height:5px;

			animation-name: countdown;
			animation-duration: 4s;
			animation-fill-mode: forwards;
		}

		@keyframes countdown {
			100%{width:0;}
		}

		.close-not {
			background-color:#407740;
			color:var(--darkblue);
			text-decoration: none;
			width:100%;
			aspect-ratio:1;	
			font-size:1.2rem;
			text-align: center;
			border-radius:100rem;
			padding:0.4rem;
		}

		.failed .close-not {
			background-color:var(--darkred)
		}

		.not .action {
			font-weight:800;
		}

		.not.hide {
			display:none;
		}

		.not.failed {
			background-color:var(--red);
		}

@keyframes notification-fade {
	70%{
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

.fadeout {
	animation-name: fadeout;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
}

@keyframes fadeout {
	0%{ opacity:1; }
	100% { opacity:0; }
}

main {
	float:left;
	clear:left;
	width:100%;
	padding:var(--main_padding);
}

main p,
main li,
summary {
	font-size:1rem;
	line-height:1.6;
	margin-bottom:1rem;
	clear:left;
}

summary {
	cursor: pointer;
}

main ul,
main ol {
	margin-block:2rem;
	padding-inline:2rem;
}

  main li {
    padding-left:1rem;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5rem 1rem 1rem 0;
}

img.align_right {
  margin:0.5rem 0 1rem 1rem;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.darkbox,
.bluebox {
	position:relative;
	background-color:var(--darkblue);
	padding:1.5rem;
	border-radius:0.25rem;
}

.bluebox {
	background-color:var(--bgblue);
}

	:is(.darkbox,.bluebox) *:last-child {
		margin-bottom:0;
	}

.small_blue {
	font-size:0.9rem;
	color:var(--lblue);
}

.spin {
	animation: spin 3s linear infinite;
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

.loading {
	position:fixed;
	inset:0;
	display:none;
	align-content: center;
	align-items: center;
	background-color:#0005;
	height:100%;
	width:100%;
	left:0;
	top:0;
	bottom:0;
}

	.loading.visible {
		display:grid;
	}

	.loading img {
		width:3rem;
		display:block;
		margin-inline:auto;
	}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
}

input,
textarea,
select {
	background-color:var(--darkblue);
	padding:1.5em 1em;
	font-size:1.3em;
	border:none;
	outline:none;
	border-radius:0.2rem;
}

.dblue-btn,
.blue-btn,
.beige-btn {
	color:var(--beige);
	font-size:0.9rem;
	padding: 1rem 2rem;
	text-decoration: none;
	float: left;
	clear: none;
	display: block;
	text-align:center;
	width:fit-content;
	border-radius: 0.25em;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

	.dblue-btn {
		background-color:var(--darkblue);
	}

		.dblue-btn:hover {
			background-color:var(--blue);
		}

	.blue-btn {
		background-color:var(--blue);
	}

		.blue-btn:hover {
			background-color:var(--lblue);
		}

	.beige-btn {
		background-color:var(--beige);
		color:var(--darkblue);
	}

		.beige-btn:hover {
			background-color:#fff;
		}

select,option {
	cursor: pointer;
}

option {
	padding:1em;
}

input[type="submit"] {
	float:right;
	clear:left;
	text-decoration: none;
	cursor: pointer;
	margin-top:0.5rem;
}

.errortext {
	color:red;
}

	.errortext p {
		word-break:break-word;
	}

.blue {
	color:var(--blue);
}

.lblue {
	color:var(--lblue);
}

.green {
	color:var(--green);
}

.beige {
	color:var(--beige);
}

.grey {
	color:#999;
}

.warning {
	color:Red;
}

.popup {
    display:none;
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background-color:#000a;
    backdrop-filter: blur(10px);
    z-index:100;
    align-items: center;
	align-content: center;
    padding:1rem;
}

    .popup .inner {
        position:relative;
		display:grid;
        margin-inline:auto;
        width:min(800px,100%);
        background-color:var(--bgblue);
        padding:max(1rem,var(--main_padding));
        border-radius:0.5em;
        max-height:100%;
		overflow-y:auto;
    }

    .popup .inner .content {
        display:grid;
        grid-template-columns: 1fr 2fr;
        grid-gap:0.5rem;
        overflow-y:auto;
        max-height:100%;
    }

    .popup p,
    .popup label {
        font-size: 1rem;
        margin-bottom:1rem;
    }

    .popup input,
    .popup textarea {
        margin-bottom:1rem;
    }

    .popup .submit-btn {
        cursor: pointer;
        width:200px;
        float:right;
        transition:background-color 0.25s ease-in-out;
        margin-bottom:0;
		font-size:0.9rem;
		padding:1rem 2rem;
    }

        .popup .submit-btn:hover {
            background-color:var(--blue);
        }

    .popup .inner #right {
        display:grid;
    } 

	.popup .inner .large {
		width:calc(100% - 50px);
	}

    #success {
        width:150px;
        display:grid;
        grid-template-columns: 25px 1fr;
        grid-gap:0.5rem;
        margin-inline:auto;
        align-items: center;
        align-self:center;
    }

        #success p {
            margin:0;
            color:var(--green);
        }

    .close {
        position: absolute;
        background-color:var(--darkblue);
        font-size:1.8em;
        text-decoration: none;
        padding:0.75em;
        right:var(--main_padding);
        top:0;
        transition:background-color 0.25s ease-out;
        border-radius:0 0 0.25em 0.25em;
    }

        .close:hover {
            background-color:var(--blue);
        }

	.cancel {
		margin-right:0.5rem;
		margin-bottom:0.5rem;
	}

.info-btn {
	position:absolute;
	font-size:0.9rem;
	border:1px solid var(--blue);
	color:var(--blue);
	width:1.2rem;
	height:1.2rem;
	text-align: center;
	outline:none;
	background:none;
	border-radius:100rem;
	cursor:pointer;
	margin-top:0.3rem;
	margin-left:0.5rem;
}

	.info-btn div {
		display:none;
		width:max-content;
		background-color:var(--darkblue);
		left: 50%;
		bottom: calc(100% + 0.5rem);
		position: absolute;
		transform: translateX(-50%);
		border-radius: 0.25rem;
		padding: 0.5rem;
		border:1px solid var(--beige);
		z-index:2;
	}

	.info-btn:hover div {
		display:block;
	}

		.info-btn div p {
			color:#fff;
			font-size: 0.8rem;
			line-height:1.2;
			max-width:200px;
		}
  
footer {
  clear:both;
}

	.copyright {
		font-size:0.7rem;
	}

@media screen and (max-width:1200px){
	:root {
		--main_padding:4vw;
	}

	header {
		padding-top:var(--main_padding);
	}
}

@media screen and (max-height:700px){
	nav {
		align-content: start;
	}
}

@media screen and (max-width:1050px){
	header {
		grid-template-columns: 400px 1fr;
	}
	div:has(.secondary-nav) {
		display:none;
	}
}

@media screen and (max-width:999px) {

}

@media screen and (max-width:999px) {

}

@media screen and (max-width:799px) {

}

@media screen and (max-width:699px) {

}

@media screen and (max-width:599px) {
	:root {
		--main_padding:1.5rem;
	}
	.darkbox {
		padding:1.5rem;
	}
	.notifications {
		top:1.5rem;
		right:1.5rem;
	}

	header {
		grid-template-columns: 300px 1fr;
		grid-gap:1rem;
	}
}

@media screen and (max-width:499px) {
	:root {
		--main_padding:0.5rem;
		--nav_open_width:15rem;
	}
	#logo {
		padding:1rem;
	}
	.darkbox {
		padding:1rem;
	}
	.notifications {
		top:1rem;
		right:1rem;
	}

	header {
		padding-top:0.25rem;
		grid-template-columns: 200px 1fr;
	}

	#bgcorner {
		left:0;
		width:60%;
	}

	#logo {
		padding-left:0;
	}

	main {
		padding-left: var(--main_padding);
	}
}

@media screen and (max-width:450px){
	.cancel,
	.yes-delete,
	.popup .submit-btn {
		width:100%;
		margin-right:0;
	}
}

@media screen and (max-width:350px){
	header{
		grid-template-columns: 1fr 45px;
	}

	.burger {
		padding:0.75rem;
	}

		.burger p {
			display:none;
		}

	nav {
		max-width:calc(100vw - 69px);
	}
}