body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
}

a {
    text-decoration: none;
    transition: all 0.2s ease;
}

h1 {
    font-size: calc(var(--scaling) * 2) !important;
    padding: 0 !important;
}
h1.signup {
    font-size: calc(var(--scaling) * 1.5) !important;
}

h2 {
    font-size: calc(var(--scaling) * 1) !important;
    padding: 0 !important;
}

hr {
    width: calc(var(--scaling) * 7.5);
    height: calc(var(--scaling) * 0.25);
    margin: calc(var(--scaling) * 0.25) 0 calc(var(--scaling) * 0.5) 0;
    background: black;
    border: none;
    border-radius: calc(var(--scaling) * 0.18);
}
hr.signup {
    width: calc(var(--scaling) * 12.5);
}

.loginContainer {
    justify-items: center;
    align-content: center;
    display: inline-block;
    background: #5ac8e3;
    box-shadow: 0 0 calc(var(--scaling) * 0.5) gray;
    border-radius: calc(var(--scaling) * 0.17);
    padding: calc(var(--scaling) * 1.5) calc(var(--scaling) * 2.5) calc(var(--scaling) * 0.4) calc(var(--scaling) * 2.5);
}
.loginContainer.signup {
    padding: calc(var(--scaling) * 1) calc(var(--scaling) * 1.5) calc(var(--scaling) * 0.4) calc(var(--scaling) * 1.5) !important;
}

.margin {
    margin-bottom: calc(var(--scaling) * 0.5) !important;
}

.marginBoost {
    margin-bottom: calc(var(--scaling) * 1.1) !important;
}

.doubleRow {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--scaling) * 1);
}

form label {
    font-size: calc(var(--scaling) * 1);
}
.inputContainer {
    width: calc(var(--scaling) * 12);
    justify-items: left;
    text-align: left;
}
.inputContainer input {
    box-sizing: border-box;
    border-radius: calc(var(--scaling) * 0.17);
    padding: calc(var(--scaling) * 0.17);
    height: calc(var(--scaling) * 1.5);
    width: 100%;
    font-size: calc(var(--scaling) * 1);
    background: whitesmoke;
    border: none;
    transition: all 0.2s ease;
}
.inputContainer.signup {
    width: calc(var(--scaling) * 10);
}
.inputContainer.signup input {
    height: calc(var(--scaling) * 1.3);
    font-size: calc(var(--scaling) * 0.9);
}

.forgot {
    width: 100%;
    display: flex;
    justify-content: right;
}

.forgot a {
    font-size: calc(var(--scaling) * 0.5);
    cursor: pointer;
    color: black;
}

.create {
    margin: calc(var(--scaling) * 0.5) 0;
    transition: all 0.3s ease;
}

.create a {
    font-size: calc(var(--scaling) * 0.5) !important;
    text-decoration: none;
    color: black;
    border-radius: calc(var(--scaling) * 0.5);
}

.tooltip {
    font-size: calc(var(--scaling) * 0.7);
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: calc(var(--scaling) * 0.1) calc(var(--scaling) * 0.15) 0 calc(var(--scaling) * 0.15);
}

.tooltipText {
    opacity: 0;
    font-weight: normal;
    position: absolute;
    font-size: calc(var(--scaling) * 0.75);
    padding: calc(var(--scaling) * 0.25);
    background: gray;
    border-radius: calc(var(--scaling) * 0.25);
    transform: translate(-50%, 0) scale(0);
    white-space: nowrap;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#togglePassword {
    position: relative;
    opacity: 0.8;
    font-size: calc(var(--scaling) * 0.8);
    color: white;
    transition: all 0.2s ease;
    padding: 0 calc(var(--scaling) * 0.15);
    user-select: none;
}

.labelRow {
    display: flex;
    align-items: center;
    gap: calc(var(--scaling) * 0.1);
    justify-content: flex-start;
}

.centeredDiv {
    display: flex;
    justify-content: center;
}

.submit {
    font-size: calc(var(--scaling) * 1) !important;
    padding: calc(var(--scaling) * 0.5) calc(var(--scaling) * 0.7);
    margin: calc(var(--scaling) * 1) auto;
    background: darkgray;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: calc(var(--scaling) * 0.5);
    box-shadow: calc(var(--scaling) * 0.05) calc(var(--scaling) * 0.1) gray;
    transition: all 0.2s ease;
}
.submit.signup {
    margin: calc(var(--scaling) * 0.5) auto;
}

.customCheckbox {
    font-size: calc(var(--scaling) * 0.5);
}
.chex {
    font-size: calc(var(--scaling) * 0.45);
    user-select: none;
}
.customCheckbox input{
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}
.customCheckbox .checkmark {
    display: inline-block;
    width: calc(var(--scaling) * 0.35);
    height: calc(var(--scaling) * 0.35);
    background: whitesmoke;
    border-radius: calc(var(--scaling) * 0.05);
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}
.customCheckbox input:checked + .checkmark {
    background-color: gray;
}
.customCheckbox input:checked + .checkmark::after {
    content: "✔";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--scaling) * 0.25);
    color: black;
    font-weight: bold;
}
.customCheckbox input:invalid + .checkmark {
    outline: 1px solid red;
    box-shadow: 0 0 calc(var(--scaling) * 0.15) black;
}

.tooltip:hover .tooltipText {
    z-index: 10;
    transform: translate(-50%, 65%) scale(1);
    opacity: 0.8;
}

.inputContainer input:hover {
    transform: scale(1.01);
}

#togglePassword:hover {
    opacity: 0.6;
}

.submit:hover {
    transform: scale(1.05);
    font-weight: bold;
}