:root {
    /* font sizes */
    --font-size-xs: 0.75rem;
    /* 12px if base is 16px */
    --font-size-s: 0.875rem;
    /* 14px if base is 16px */
    --font-size-m: 1rem;
    /* 16px (base size) */
    --font-size-l: 1.125rem;
    /* 18px if base is 16px */
    --font-size-xl: 1.25rem;
    /* 20px if base is 16px */
    --font-size-xxl: 1.5rem;
    /* 24px if base is 16px */
    --font-size-xxxl: 2rem;
    /* 32px if base is 16px */

    /* border radius */
    --border-radius-s: 0.5rem;
    /* border width */

    --border-width-m: 0.05rem;
    --border-width-l: 0.15rem;

    --footer-background-color: black;

    --loader-color: #3498db;

    /* border color */
    --black-border: rgb(0, 0, 0, 1);
    --white-border: rgb(200, 200, 200, 1);
    --white-border-hover: rgb(225, 225, 225, 1);
    --white-border-bottom: rgb(200, 200, 200, 0.5);

    --dragdrop-border: rgb(150, 150, 150);
    --dragdrop-border-hover: rgb(200, 200, 200, 1);

    --submit-button-background: rgba(0, 0, 0, 0.3);
    --submit-button-background-hover: rgba(0, 0, 0, 0.7);
    --submit-button-font-color: rgb(200, 200, 200, 0.9);

    /* navbar button */
    --navbar-button-background: rgba(255, 255, 255, 0.9);
    --navbar-button-background-hover: rgba(255, 255, 255, 1);
    --navbar-button-font-color: rgb(5, 5, 5, 1);


    /* font color */
    --font-color-main: rgb(200, 200, 200, 1);
    /* 32px if base is 16px */
    --font-color-textarea: rgb(200, 200, 200, 1);
    /* 32px if base is 16px */
    --font-color-dark-background: rgb(200, 200, 200, 1);
    /* 32px if base is 16px */

    /* colors */
    --main-background-color: rgba(255, 255, 255, 1);
    --main-background-complementary-color: rgba(0, 0, 0, 1);

    --main-card-background-color: rgba(0, 0, 0, 0.05);
    /* --main-background-color: rgba(52, 53, 65, 1); */
    --login-box-color: rgba(52, 53, 65, 1);
    /* background-color: rgba(52,53,65,var(--tw-bg-opacity)); */

    --main-background-color-focus: rgba(255, 255, 255, 0.01);
    --dark-background-color: rgba(5, 5, 5, 1);
    --card-background-color: rgba(255, 255, 255, 0.15);
    --card-header-background-color: rgba(0, 0, 0, 0.3);

    /* warning box */
    --warning-box-background-color: rgba(0, 0, 0, 0.5);
    --warning-box-border-color: rgb(207, 193, 2);

    --tablet-width: 768px;


    /* hover background */
    --card-background-color-hover: rgba(255, 255, 255, 0.03);

    /* box */
    --box-color-main: rgba(255, 255, 255, 0.05);
    --box-border: rgb(200, 200, 200, 0.05);


    /* Animations */

    --fade-in-from-top: -40px;


}

html {
    background-color: var(--footer-background-color);
}

@media (max-width: 600px) {
    html {
        font-size: 0.9em;
        /* Smaller base size for mobile */
    }
}

main {
    min-height: calc(112vh - 160px);
    /* Adjust 60px to your footer's height */
    /* Other styling */
    /* width: 90%; */
    max-width: 120rem;
    width: 100%;
    margin: auto;
    margin-bottom: 3rem;

}

body {
    background-color: var(--main-background-color);
    margin: 0;
    font-family: arial;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
li,
span,
a {
    color: var(--main-background-complementary-color);
}

p {
    font-size: var(--font-size-s);
    text-align: justify;
    margin-block-start: 2.5em;
    margin-block-end: 2.5em;
    line-height: 1.9rem;
}

li {
    font-size: var(--font-size-s);
}

img {
    max-width: 100%;
    max-height: 100%;
}

textarea {
    background-color: var(--main-background-color);
    border: var(--border-width-m) solid var(--white-border);
    border-radius: 0.4rem;
    color: var(--main-background-complementary-color);
    padding: 1rem;
}

textarea:focus {
    background-color: var(--main-background-color-focus);
    color: var(--main-background-complementary-color)
}

.underline {
    text-decoration: underline;
}

select {
    background-color: var(--main-background-color);
    color: var(--main-background-complementary-color);
    border-radius: 0.2rem;
}

.json_hint {
    width: fit-content;
    padding: 1rem;
    margin: auto;
    max-width: 47rem;
}

.json_hint h2 {
    text-align: center;
}

.json_hint h3 {
    padding-top: 1rem;
}

.centered_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

button[type="submit"],
input[type="submit"] {
    margin-top: 10px;
    align-self: center;
}

.is_adult_form {
    margin-top: 10px;
    align-self: center;
}

.copy {
    background: none;
    border: none;
    cursor: pointer;
    width: 1.4rem;
    height: 1.4rem;
}

.center_text {
    text-align: center;
}

.token {
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.3rem;
}

.back_button {
    height: 2rem;
    width: 6.5rem;
    margin: auto;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border-width-m) solid var(--main-background-complementary-color);
    border-radius: var(--border-radius-s);
    font-size: var(--font-size-s);
}

.back_a_tag {
    display: block;
    text-decoration: none;
    width: fit-content;
    margin: auto;
}

.back_tag_padding {
    margin-bottom: 3rem;
}

.back_button img {
    width: 15%;
    height: auto;
}

ol li:not(:last-child) {
    margin-bottom: 1.5rem;
}

ol {
    margin: 1.5rem 0;
}

ul.errorlist {
    display: none;
}

.a_tag_main,
button[type="submit"],
input[type="submit"] {
    background-color: var(--submit-button-background);
    /* Green background */
    color: white;
    /* White text */
    padding: 0.5rem 1rem;
    /* Padding around the text */
    text-align: center;
    /* Centered text */
    text-decoration: none;
    /* No underline */
    display: inline-block;
    /* Inline block level element */
    font-size: var(--font-size-s);
    color: var(--font-color-main);
    /* Font size */
    margin: 4px 2px;
    /* Margin around the button */
    cursor: pointer;
    /* Cursor changes to a pointer on hover */
    border: var(--white-border) solid var(--border-width-l);
    border-radius: var(--border-radius-s);
    transition: all 0.3s ease;
    /* Smooth transition for background color */
}

.is_adult_form * {
    cursor: pointer;
}

.is_adult_form {
    width: fit-content;
    background-color: var(--main-background-color);
    /* Green background */
    color: var(--main-background-complementary-color);
    /* White text */
    padding: 0.5rem 1rem;
    /* Padding around the text */
    text-align: center;
    /* Centered text */
    text-decoration: none;
    /* No underline */
    display: inline-block;
    /* Inline block level element */
    font-size: var(--font-size-s);
    /* Font size */
    cursor: pointer;
    /* Cursor changes to a pointer on hover */
    border: var(--main-background-complementary-color) solid var(--border-width-m);
    border-radius: var(--border-radius-s);
    transition: all 0.3s ease;
    /* Smooth transition for background color */
}



@media (hover: hover) {

    .a_tag_main:hover,
    button[type="submit"]:not(:disabled):hover,
    input[type="submit"]:not(:disabled):hover {
        background-color: var(--submit-button-background-hover);
        border: var(--white-border) solid var(--border-width-l);
        color: white;
    }

    .is_adult_form:not(:disabled):hover {
        background-color: rgba(235, 235, 235, 1);
    }
}

@media (hover: none) {

    .a_tag_main,
    button[type="submit"],
    input[type="submit"],
    .is_adult_form {
        background-color: var(--submit-button-background-hover);
        border: var(--white-border) solid var(--border-width-l);
    }

    .is_adult_form {
        border: var(--main-background-complementary-color) solid var(--border-width-m);
        color: var(--main-background-complementary-color);
        background-color: var(--main-background-color);
    }
}

.button_center {
    width: 100%;
    display: flex;
    justify-content: center;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

input:disabled {
    cursor: not-allowed;
    opacity: 0.8;
    background-color: #eaeaea;
}


label {
    color: var(--main-background-complementary-color);
}

.white_background_a_tag_button {
    border-radius: var(--border-radius-s);
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-s);
    color: var(--main-background-complementary-color);
    border: var(--main-background-complementary-color) solid var(--border-width-l);
    background-color: var(--main-background-color);
    transition: all 0.2s ease-in-out;
}

@media (hover: hover) {

    .white_background_a_tag_button:not(:disabled):hover {
        color: var(--main-background-color);
        border: var(--main-background-color) solid var(--border-width-l);
        background-color: var(--main-background-complementary-color)
    }
}



.warning-box {
    width: fit-content;
    margin: auto;
    padding: 1rem;
    border-radius: var(--border-radius-s);
    border: var(--warning-box-border-color) solid var(--border-width-m);
    background-color: var(--warning-box-background-color)
}

form input {
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: var(--border-radius-s);
}

.flex {
    display: flex;
}

.page_title {
    background-color: var(--main-background-complementary-color);
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 2rem 0;
}

.page_title h2 {
    color: var(--main-background-color);
}

.json_hint * {
    color: var(--main-background-complementary-color);
}

.user label {
    color: var(--main-background-complementary-color);
}

.a_tag_main,
button[type="submit"].user,
input[type="submit"].user {
    color: var(--main-background-complementary-color);
    border: var(--main-background-complementary-color) solid var(--border-width-l);
    background-color: var(--main-background-color)
}

@media (hover: hover) {

    button[type="submit"].user:not(:disabled):hover,
    input[type="submit"].user:not(:disabled):hover {
        color: var(--main-background-color);
        border: var(--main-background-color) solid var(--border-width-l);
        background-color: var(--main-background-complementary-color)
    }
}