/* Fonts */
@font-face {
	font-family: 'The Penchill';
	src: url('/fonts/The Penchill.otf');
}
@font-face {
	font-family: 'digital-7';
	src: url('/fonts/digital-7 (mono italic).ttf');
}
/* Root */

:root {
	--border: 1px solid black;
	--border-radius: 0.5rem;
	--button-border-color: #c0bfbf;
	--button-background-color: #f5f5f5;
	--button-border: 1px dashed black;
	--box-sizing: border-box;
	--background-color-lighter: white;
	--background-color-darker: #e7e1e1;
	--background-color-background: #93ccfb;
	--background-color-darker-1: #c6c5c5;
	--background-color-darker-2: #afafaf;
	--text-color: black;
	--placeholder-text-color: grey;
	--font-main: 'Courier New', monospace;
	--edit-modal-field-container-height: 3.5rem;
	--edit-modal-field-font-size: 1.5rem;
	--edit-modal-button-container-height: 3.5rem;
	--edit-modal-button-font-size: 1.5rem;
	--user-settings-field-container-height: min-content;
	--user-settings-field-font-size: 1.5rem;
	--user-settings-button-container-height: min-content;
	--user-settings-button-font-size: 1.5rem;
}

html {
	font-size: 16px;
}
/* #######                             */
/* #       #        ##    ####  #    # */
/* #       #       #  #  #      #    # */
/* #####   #      #    #  ####  ###### */
/* #       #      ######      # #    # */
/* #       #      #    # #    # #    # */
/* #       ###### #    #  ####  #    # */

.flash-message {
	height: min-content;
	width: 94%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.flash-alert-backdrop {
	display: block;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	backdrop-filter: blur(2px);
	z-index: 4;
	transition: backdrop-filter 1000ms;
}

.flash-alert-backdrop-closed {
	backdrop-filter: blur(0px);
}

.flash-alert {
	height: min-content;
	width: max-content;
	max-width: 60%;
	margin: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	border-radius: 0.75rem;
	background-color: var(--background-color-darker);
	position: fixed;
	top: 2%;
	z-index: 10;
	text-align: center;
	visibility: visible;
	opacity: 1;
	transition: opacity 1500ms, visibility 1500ms;
}

.flash-alert-success {
	color: #0f5132;
	background-color: white;
}

.flash-alert-error {
	color: #842029;
	background-color: white;
}

.flash-alert-success-registration {
	width: 14rem;
	margin: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 5px solid white;
	border-radius: 0.95rem;
	background-color: var(--background-color-darker-2);
	background-image: url('../images/leather-1969-in-architextures.jpg');
	background-size: 30rem;
	outline: 2px dashed silver;
	outline-offset: -0.8rem;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.flash-alert-success-login {
	width: 14rem;
	margin: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 5px solid white;
	border-radius: 0.95rem;
	background-color: var(--background-color-darker-2);
	background-image: url('../images/leather-1969-in-architextures.jpg');
	background-size: 30rem;
	outline: 2px dashed silver;
	outline-offset: -0.8rem;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.alert-text {
	height: min-content;
	width: 100%;
	margin: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
	font-family: var(--font-main);
	font-size: 1.25rem;
	font-weight: bold;
}

.alert-text-success {
	color: #0f5132;
}

.alert-text-error {
	color: #f43243;
}

.alert-text-success-login {
	color: silver;
}

.guest-mode-alert {
	width: min(90%, 40rem);
	margin: 0.5rem auto;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 2px dashed #b48d57;
	border-radius: var(--border-radius);
	background-color: #fff9e6;
	color: #4a3722;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
	font-family: var(--font-main);
	position: absolute;
	z-index: 5;
}

.guest-mode-alert-text {
	flex: 1;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.4;
}

.guest-mode-alert-link {
	/* color: #0058b0; */
	color: currentColor;
	font-weight: normal;
	text-decoration: underline;
}

.guest-mode-alert-link:hover {
	/* color: #0058b0; */
	color: currentColor;
	font-weight: bold;
	text-decoration: underline;
}

.guest-mode-alert-dismiss {
	border: none;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.guest-mode-alert-dismiss:hover,
.guest-mode-alert-dismiss:focus {
	color: #2c1d0f;
}

.guest-mode-disabled-control {
	opacity: 0.6;
	cursor: not-allowed !important;
}

.alert-text-success-registration {
	color: silver;
}

.btn-close {
	width: 100%;
	height: 100%;
	color: transparent;
	background-color: transparent;
	border: none;
	border-radius: 0.15rem;
	outline-offset: 5px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
	opacity: 1;
}

.flash-alert-close-without-click {
	visibility: collapse;
	opacity: 0;
}
/* ####### */
/* #        ####   ####  ##### ###### ##### */
/* #       #    # #    #   #   #      #    # */
/* #####   #    # #    #   #   #####  #    # */
/* #       #    # #    #   #   #      ##### */
/* #       #    # #    #   #   #      #   # */
/* #        ####   ####    #   ###### #    # */

.footer {
	margin-bottom: 0.15rem;
	font-family: var(--font-main);
	font-size: 0.65rem;
	position: fixed;
	bottom: 0;
	color: #c9c9c9;
	opacity: 1;
	transition: opacity 200ms;
}

.footer-logged-out {
	color: black;
}

.footer-link {
	color: #c9c9c9;
	text-decoration: none;
}

.footer-link:visited {
	color: #c9c9c9;
}

.footer-link:hovered {
	color: #c9c9c9;
}

.footer-logged-out-link {
	color: black;
	text-decoration: none;
}

.footer-logged-out-link:visited {
	color: black;
}

.footer-logged-out-link:hovered {
	color: black;
}

.credits-logged-in-link {
	color: #c9c9c9;
	text-decoration: none;
}

.credits-logged-in-link:visited {
	color: #c9c9c9;
}

.credits-logged-in-link:hovered {
	color: #c9c9c9;
}

.credits-logged-out-link {
	color: black;
	text-decoration: none;
}

.credits-logged-out-link:visited {
	color: black;
}

.credits-logged-out-link:hovered {
	color: black;
}
/* ##### */
/* #     # #####  ###### #####  # #####  #### */
/* #       #    # #      #    # #   #   # */
/* #       #    # #####  #    # #   #    #### */
/* #       #####  #      #    # #   #        # */
/* #     # #   #  #      #    # #   #   #    # */
/* #####  #    # ###### #####  #   #    #### */

.credits-logged-in-backdrop {
	display: none;
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	backdrop-filter: blur(0px);
	z-index: 4;
	transition: backdrop-filter 1000ms;
}

.credits-logged-in-backdrop-in-use {
	backdrop-filter: blur(1px);
}

.credits-logged-in-container {
	height: min-content;
	width: 15rem;
	margin: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.75rem;
	background-color: #ffffca;
	box-shadow: 0 0 0.1rem 0.05rem #585858;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: collapse;
	transition: opacity 1000ms, visibility 1000ms;
}

.credits-logged-in-container-in-use {
	opacity: 1;
	visibility: visible;
	transition: opacity 1000ms, visibility 1000ms;
}

.credits-logged-in-header {
	width: 101%;
	height: 2.5rem;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-family: var(--font-main);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	box-shadow: 0 0.9rem 0.25rem -0.5rem #585858, 0 -0.1rem 0.2rem 0.15rem #585858;
	background-image: url('/images/leather-1969-in-architextures.jpg');
	z-index: 2;
	color: white;
	text-align: center;
}

.credits-logged-in-preamble-text {
	margin: 0.25rem;
	margin-top: 1rem;
	padding: 0;
	font-family: var(--font-main);
	font-size: 0.75rem;
	text-align: center;
	color: black;
	letter-spacing: -1px;
}

.credits-logged-in-text {
	margin: 0.25rem;
	padding: 0;
	font-family: var(--font-main);
	font-size: 0.75rem;
	text-align: center;
	color: black;
	letter-spacing: -1px;
}

.credits-logged-in-text a {
	text-decoration-line: none;
}

.credits-logged-in-hr {
	width: 100%;
	height: 0px;
	color: #ff9191;
	position: relative;
	bottom: 0.4rem;
	margin: 0;
}

.credits-logged-in-text-small {
	margin: 0.25rem 0 0 0;
	padding: 0;
	font-family: var(--font-main);
	font-size: 0.65rem;
	text-align: center;
	color: black;
	letter-spacing: -1px;
}
/* Credits logged out */

.credits-logged-out-backdrop {
	display: none;
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	backdrop-filter: blur(0px);
	z-index: 4;
	transition: backdrop-filter 1000ms;
}

.credits-logged-out-backdrop-in-use {
	backdrop-filter: blur(1px);
}

.credits-logged-out-container {
	height: min-content;
	width: 15rem;
	margin: auto;
	padding: 0.5rem 0.5rem 0 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 5px solid white;
	border-radius: 0.75rem;
	background-color: var(--background-color-darker-2);
	outline: 1.5px solid black;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: collapse;
	transition: opacity 1000ms, visibility 1000ms;
}

.credits-logged-out-container-in-use {
	opacity: 1;
	visibility: visible;
	transition: opacity 1000ms, visibility 1000ms;
}

.credits-logged-out-header {
	margin: 0.25rem;
	font-family: var(--font-main);
	color: white;
	text-align: center;
}

.credits-logged-out-text {
	margin: 0.25rem;
	padding: 0;
	font-family: var(--font-main);
	font-size: 0.75rem;
	text-align: center;
	color: white;
	letter-spacing: -1px;
}

.credits-logged-out-text-small {
	margin: 0.25rem 0 0 0;
	padding: 0;
	font-family: var(--font-main);
	font-size: 0.65rem;
	text-align: center;
	color: white;
	letter-spacing: -1px;
}
/* ######                                              ### */
/* #     # ######  ####  #    # #####  ####  #####      #  ##### ###### #    #  #### */
/* #     # #      #      #   #    #   #    # #    #     #    #   #      ##  ## # */
/* #     # #####   ####  ####     #   #    # #    #     #    #   #####  # ## #  #### */
/* #     # #           # #  #     #   #    # #####      #    #   #      #    #      # */
/* #     # #      #    # #   #    #   #    # #          #    #   #      #    # #    # */
/* ######  ######  ####  #    #   #    ####  #         ###   #   ###### #    #  #### */
/* All items */

.desktop-item {
	opacity: 1;
}
/* Desktop pen */

.desktop-pen-img {
	width: 2.3rem;
	height: 24rem;
	position: absolute;
	top: 55%;
	left: 113%;
	z-index: 13;
	rotate: -10deg;
	background-image: url('/images/desktop-pen.png');
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(-0.125rem -0.125rem 0.25rem);
	cursor: move;
	transition: opacity 1000ms, visibility 1000ms;
}
/* Desktop coffee cup */

.desktop-coffee-cup-img {
	width: 18rem;
	height: 22rem;
	position: absolute;
	top: -5%;
	left: 114%;
	z-index: 12;
	background-image: url('/images/desktop-coffee-cup-2.png');
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(-0.125rem -0.125rem 0.25rem);
	cursor: move;
	transition: opacity 1000ms, visibility 1000ms;
}
/* Desktop stain ring */

.desktop-stain-ring-img {
	width: 13rem;
	height: 13rem;
	position: absolute;
	top: 11%;
	left: 107%;
	z-index: 11;
	opacity: 0.15;
	background-image: url('/images/desktop-stain-ring.png');
	background-repeat: no-repeat;
	background-size: contain;
	cursor: move;
	transition: opacity 1000ms, visibility 1000ms;
}
/* Desktop calculator */

.desktop-calculator-img {
	width: 22rem;
	height: 26rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
	top: 10rem;
	left: -24rem;
	z-index: 12;
	rotate: -10deg;
	background-image: url('/images/desktop-calculator-clear-display-and-added-text-z-calc-reduced.png');
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(-0.125rem -0.125rem 1rem);
	cursor: move;
	transition: opacity 1000ms, visibility 1000ms, rotate 250ms;
}

.desktop-calculator-display {
	width: 13.9rem;
	height: 2.6rem;
	position: relative;
	bottom: 5.35rem;
	transform: scaleY(1.5);
}

.desktop-calculator-display-input {
	width: 100%;
	height: 100%;
	text-align: right;
	font-size: 2.9rem;
	font-family: 'digital-7';
	letter-spacing: 0.113rem;
	color: #393939;
	-webkit-text-fill-color: #393939; /* Necessary to prevent Safari from greying out the text */
	background: transparent;
	border: none;
	box-sizing: border-box;
}

.desktop-calculator-keypad {
	width: 19.2rem;
	height: 12.1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom: 0rem;
	margin-left: 0.5rem;
	pointer-events: none;
	position: relative;
	bottom: 2.5rem;
}

.calculator-row-1 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.calculator-row-2 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
	top: -0.5rem;
}

.calculator-row-3 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
	top: -0.8rem;
}

.calculator-row-4 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
	top: -0.9rem;
}

.calculator-row-5 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	position: relative;
	top: -1.3rem;
}

.desktop-calculator-power-switch-flipped {
	background-image: url('../images/desktop-calculator-power-switch-flipped-reduced.png');
	width: 4rem;
	height: 1rem;
	position: absolute;
	top: 0.39rem;
	left: 1.5rem;
	display: none;
	background-size: 3.7rem;
	background-repeat: no-repeat;
}

.calculator-button {
	width: 2.9rem;
	height: 2.4rem;
	background-color: transparent;
	border-width: 2px;
	border-style: outset;
	border-color: transparent;
	border-radius: 0.5rem;
	pointer-events: all;
	cursor: pointer;
}

.calculator-button:active {
	border-color: currentColor;
}

#powerSwitch1 {
	width: 3rem;
	height: 1.2rem;
	margin-right: 2.9rem;
	border-radius: 45%;
	position: relative;
	bottom: 0.1rem;
	left: 0.9rem;
}

#powerSwitch2 {
	height: 2rem;
	display: none;
	border-left: none;
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	position: relative;
	bottom: 0.2rem;
	right: 0.2rem;
}

#memoryRecall {
	height: 1.7rem;
	position: relative;
	bottom: 0.3rem;
	left: -0.5rem;
}

#memoryMinus {
	height: 1.7rem;
	position: relative;
	bottom: 0.3rem;
	left: -0.3rem;
}

#memoryPlus {
	height: 1.7rem;
	position: relative;
	bottom: 0.3rem;
	left: 0.1rem;
}

#gt {
	height: 1.7rem;
	position: relative;
	bottom: 0.3rem;
	left: 0.2rem;
}

#backspace {
	height: 2rem;
	position: relative;
	top: 0.6rem;
	right: 1rem;
}

#seven {
	height: 2rem;
	margin-left: 0.2rem;
	position: relative;
	top: 0.6rem;
	right: 0.8rem;
}

#eight {
	width: 2.6rem;
	height: 2rem;
	position: relative;
	top: 0.6rem;
	right: 0.6rem;
}

#nine {
	width: 2.7rem;
	height: 2rem;
	position: relative;
	top: 0.6rem;
	right: 0.1rem;
}

#percent {
	height: 2rem;
	position: relative;
	top: 0.6rem;
	right: -0.2rem;
}

#mu {
	height: 2rem;
	position: relative;
	top: 0.6rem;
	left: 0.4rem;
}

#plusMinus {
	height: 2rem;
	position: relative;
	top: 1.2rem;
	left: -1.7rem;
}

#four {
	height: 2rem;
	width: 2.7rem;
	position: relative;
	top: 1.2rem;
	left: -1.1rem;
}

#five {
	height: 2rem;
	top: 1.2rem;
	position: relative;
	width: 2.6rem;
	left: -0.7rem;
}

#six {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.2rem;
	left: -0.2rem;
}

#multiply {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.2rem;
	left: 0.3rem;
}

#divide {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.2rem;
	left: 0.8rem;
}

#squareRoot {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.5rem;
	left: -1.5rem;
}

#one {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.5rem;
	left: -0.7rem;
}

#two {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.5rem;
	left: -0.3rem;
}

#three {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.5rem;
	left: 0.15rem;
}

#add1 {
	border-bottom: none;
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	position: relative;
	top: 1.5rem;
	left: 0.6rem;
}

#subtract {
	height: 2rem;
	width: 2.6rem;
	position: relative;
	top: 1.5rem;
	left: 0.95rem;
}

#clear {
	height: 2.2rem;
	width: 2.6rem;
	position: relative;
	top: 1.8rem;
	left: -1.65rem;
}

#zero {
	height: 2.2rem;
	width: 2.6rem;
	position: relative;
	top: 1.8rem;
	left: -0.8rem;
}

#doubleZero {
	height: 2.2rem;
	width: 2.6rem;
	position: relative;
	top: 1.8rem;
	left: -0.3rem;
}

#point {
	height: 2.2rem;
	width: 2.6rem;
	position: relative;
	top: 1.8rem;
	left: 0.2rem;
}

#add2 {
	height: 2.5rem;
	border-top: none;
	border-top-left-radius: 0rem;
	border-top-right-radius: 0rem;
	position: relative;
	top: 1.5rem;
	left: 0.6rem;
}

#equals {
	height: 2.2rem;
	width: 2.6rem;
	position: relative;
	top: 1.8rem;
	left: 0.9rem;
}
/*  ##### */
/* #     #  ####   ####  #####  #####  #   # ######    #    #  ####  #####    ##   # */
/* #       #    # #    # #    # #    #  # #  #         ##  ## #    # #    #  #  #  # */
/* #  #### #    # #    # #    # #####    #   #####     # ## # #    # #    # #    # # */
/* #     # #    # #    # #    # #    #   #   #         #    # #    # #    # ###### # */
/* #     # #    # #    # #    # #    #   #   #         #    # #    # #    # #    # # */
/*  #####   ####   ####  #####  #####    #   ######    #    #  ####  #####  #    # ###### */

.goodbye-backdrop {
	display: none;
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	backdrop-filter: blur(1px);
	z-index: 4;
}

.goodbye-container {
	height: min-content;
	width: min-content;
	margin: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 5px solid white;
	border-radius: 0.95rem;
	background-color: var(--background-color-darker-2);
	background-image: url('../images/leather-1969-in-architextures.jpg');
	background-size: 30rem;
	outline: 2px dashed silver;
	outline-offset: -0.8rem;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: collapse;
	transition: opacity 2000ms, visibility 2000ms;
}

.goodbye-container-in-use {
	opacity: 1;
	visibility: visible;
	transition: opacity 2000ms, visibility 2000ms;
}

.goodbye-text {
	margin: 1rem;
	padding: 0;
	font-family: var(--font-main);
	font-size: 3.75rem;
	font-weight: bold;
	text-align: center;
	text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
	color: #bebebe;
	letter-spacing: 4px;
	word-spacing: -35px;
}
/* #     # */
/* ##   ## ###### #####  #   ##       ####  #    # ###### #####  # ######  #### */
/* # # # # #      #    # #  #  #     #    # #    # #      #    # # #      # */
/* #  #  # #####  #    # # #    #    #    # #    # #####  #    # # #####   #### */
/* #     # #      #    # # ######    #  # # #    # #      #####  # #           # */
/* #     # #      #    # # #    #    #   #  #    # #      #   #  # #      #    # */
/* #     # ###### #####  # #    #     ### #  ####  ###### #    # # ######  #### */
/* Media queries */
@media (orientation: landscape) and (max-height: 450px) {
	.credits-logged-in-container {
		line-height: 0.8;
	}

	.credits-logged-in-preamble-text {
		font-size: 0.65rem;
	}

	.credits-logged-in-text {
		font-size: 0.65rem;
	}
}
@media (orientation: landscape) and ((max-height: 700px) or (max-width: 1300px)) {
	.desktop-calculator-img {
		scale: 0.75;
	}
}
@media (orientation: landscape) and (max-width: 1150px) {
	.desktop-item {
		opacity: 0;
		visibility: collapse;
	}
}
@media (orientation: portrait) {
	.desktop-item {
		opacity: 0;
		visibility: collapse;
	}
}
/* Rem scaling */
/* Width */
@media (min-width: 2100px) {
	html {
		font-size: 20px;
	}
}
@media (min-width: 2600px) {
	html {
		font-size: 26px;
	}
}
@media (min-width: 3000px) {
	html {
		font-size: 30px;
	}
}
@media (min-width: 4000px) {
	html {
		font-size: 40px;
	}
}
@media (min-width: 5000px) {
	html {
		font-size: 50px;
	}
}
@media (min-width: 7000px) {
	html {
		font-size: 60px;
	}
}