@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Comic Mono;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #1d1d1d;
    color: #d9d9d9;
}

/********** Content **********/
.content {
    text-align: center;
}

.content a {
    text-decoration: none;
}

.wrapper {
    flex: 1; /* Ensures main content takes up available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/********** Scroll Box **********/
.scroll-box {
    width: 90%; /* Adjust width as needed */
    max-height: 80vh; /* Limits the height */
    padding: 20px;
    border: rgba(0, 0, 0, 0.1) 2px solid;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow-y: auto; /* Enables scrolling inside the box */
}

.scroll-box * {
    padding-bottom: 15px;
}

.scroll-box h1 {
    text-align: center;
}

.scroll-box h1, h2 {
    padding-top: 5px;
}

.scroll-box ul {
    padding-left: 20px;
}

.scroll-box a {
    color: rgb(121, 121, 121);
}

/* Hide scrollbar for Chrome, Safari, and Edge */
.scroll-box::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.scroll-box {
    scrollbar-width: none;
}

/* Hide scrollbar for IE/Edge */
.scroll-box {
    -ms-overflow-style: none;
}

/********** Bottom bar **********/
.bottom-bar {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    color: rgb(121, 121, 121);
}

.bottom-bar a {
    color: rgb(121, 121, 121);
    text-decoration: none;
    margin: 0 15px;
}

/********** Form **********/
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: #333;
    border-radius: 4px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    color: rgb(121, 121, 121);
    display: block;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}

input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, input[type="tel"]:invalid, select:invalid, textarea:invalid {
	box-shadow: none;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    border-color: rgb(121, 121, 121);
    box-shadow: 0 0 0 1px rgb(121, 121, 121);
}

input[type="text"], input[type="password"], input[type="email"], select {
    height: 2.75em;
}

textarea {
    padding: 0.75em 1em;
}

.form-group {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	margin: 1rem;
	gap: 1rem;
}

::-webkit-input-placeholder {
    color: #d9d9d9 !important;
    opacity: 1.0;
}

:-moz-placeholder {
    color: #d9d9d9 !important;
    opacity: 1.0;
}
::-moz-placeholder {
    color: #d9d9d9 !important;
    opacity: 1.0;
}
:-ms-input-placeholder {
    color: #d9d9d9 !important;
    opacity: 1.0;
}
.formerize-placeholder {
    color: #d9d9d9 !important;
    opacity: 1.0;
}

input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: #333;
    border-radius: 4px;
    border: 0;
    color: #d9d9d9 !important;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    height: 2.85em;
    line-height: 2.95em;
    padding: 0 1.5em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
    background-color: rgb(121, 121, 121);
}

input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, button:active, .button:active {
    background-color: #333;
}

input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, button.fit, .button.fit {
    display: block;
    margin: 0 0 1em 0;
    width: 100%;
}

input[type="submit"].small, input[type="reset"].small, input[type="button"].small, button.small, .button.small {
    font-size: 0.8em;
}

input[type="submit"].big, input[type="reset"].big, input[type="button"].big, button.big, .button.big {
    font-size: 1.35em;
}