* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --theme-text-color: #ddaaff;
    --theme-text-color-light: #eeccff;

    --text-color-red: #ec3750;
    --text-color-red-light: #fc3750;

    --navbar-color: #22222255;

    --btn-text-color: #222222;
}

/* element settings */
body {
    display: flex;
    flex-direction: column;
    background-image: url(img/Background.webp);
    background-size: 100% 150vh;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif !important;
    text-shadow: 2px 2px 5px rgba(10, 10, 10, 0.3);
    transition: background-image 1.2s ease-in;
}

a {
    text-decoration: none !important;
    font-weight: bold;
}

p {
    font-size: large;
    line-height: normal;
}

button {
    height: fit-content !important;
    width: 20% !important;
    min-width: fit-content;
    border-radius: 10px !important;
    background: var(--theme-text-color-light) !important;
    color: var(--btn-text-color);
}

/* nav bar */
.navbar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 95%;
    height: fit-content;
    border-radius: 30px;
    margin-top: 10px;
    gap: 18px;
    padding: 15px 35px !important;

    background: var(--navbar-color);
    backdrop-filter: blur(5px);
    box-shadow: inset 1px 1px 6px rgba(255, 255, 255, 0.15), 3px 4px 15px rgba(20, 20, 20, 0.5);
    transition: background 1.2s ease-in;
}

.space_navbar {
    flex: 1 0 0;
}

/* link style */
.navbar_link {
    transition: all 0.8s ease;
    font-weight: normal;
    font-size: large;
}

.navbar_link:hover {
    color: var(--theme-text-color-light);
}

.link {
    font-weight: bold;
    font-size: large;
    text-shadow: 2px 2px 5px rgba(5, 5, 5, 0.5);
    transition: all 0.6s ease;
}

.link:hover {
    color: var(--theme-text-color-light);
    text-shadow: 4px 6px 5px rgba(20, 20, 20, 0.4);
}

.hackclub_link {
    color: var(--text-color-red);
    text-shadow: 2px 2px 5px rgba(5, 5, 5, 0.5);
    transition: all 0.6s ease;
}

.hackclub_link:hover {
    color: var(--text-color-red-light);
    text-shadow: 4px 6px 5px rgba(20, 20, 20, 0.4);
}

.theme-text-color {
    color: var(--theme-text-color);
    transition: all 1.2s ease-in;
}

.theme-text-color-light {
    color: var(--theme-text-color-light);
    transition: all 1.2s ease-in;
}

/* container sytle */
.box {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;

    border-radius: 35px;
    padding: 25px 35px;
    margin-top: 10px;
    height: fit-content;
    width: 95%;
    gap: 2px;

    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    box-shadow: inset 1px 1px 6px rgba(255, 255, 255, 0.2), 2px 5px 15px rgba(20, 20, 20, 0.5);
    color: #efeeef;
    align-items: center;
}

.content {
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    padding: 1%;
    width: 700px;
    max-width: 100%;
}

.sub_section {
    display: flex;
    flex-direction: column;
    width: fit-content;
    padding-left: 5%
}

.post-content {
    white-space: pre-line;
}

/* input settings */
.radio-item input {
    width: 18px;
    height: 18px;

    margin-right: 5px;
    cursor: pointer;
}

/* special styles */
#self_title {
    color: #ddaaff;
}

.avg_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#postTitle, #postContent, #postPassword {
    width: 70%;
    padding: 6px 6px;
    margin: 10px 0;
    border-radius: 8px;
    box-sizing: border-box;
}

/* mode 
@media screen and (prefers-color-scheme: dark) {
    body {
        background-image: url(img/Background-dark.webp);
    }

    .box {
        color: #efeeef;
    }

    .link {
        color: #aaddff;
    }

    .link:hover {
        color: #aaeeff;
    }

    .navbar_link {
        color: #aaddff;
    }

    .navbar_link:hover {
        color: #aaeeff;
    }

    #self_title {
        color: #aaddff;
    }
}