/* Shared core styles. */
@font-face {
  font-family: defused;
  src: url('../defused.ttf');
}

footer {
    text-align: center;
    color: #ffffff;
}

h1 {
    color: #ffffff;
    text-align: center;
    font-family: defused;
    margin-top: 90px;
    font-size: 8.5vw;

}

h6 {
    color: #ffffff;
    text-align: center;
    margin-top: 70px;
    font-size: 6.0em;

}

h2 {
    color: #FF5733;
    font-size: 1.5em;
    font-family: defused;
    position: relative;
}

h2 span{
    position: absolute;
    top: -150px;
}

h8 {
    color: #FF5733;
    font-size: 2.5em;
    font-family: defused;
}

h3 {
    color: #fdfdfd;
    font-size: 1.0em;
}

h4 {
    color: #FF5733;
    font-size: 1.25em;
}

h5 {
    padding-top: 65px;
    text-decoration: underline;
    text-align: center;
}

body {
    background-color: #222222;
    font-family: 'Arial', sans-serif;
    color: #ffffff;
    padding: 20px;
    background-image: url('../images/back1.png');
    background-size: cover;
    background-attachment: fixed;
}

.back-to-top {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 15px;
        cursor: pointer;
    }

span {
    margin-right: 10px;
}

button {
    background-color: #00ff4000;
    color: white;
    border: #ccc;
    border-width: 1px;
    padding: 1px 1px;
    cursor: pointer;
    font-size: 0.6em;
}

.navbar {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 98%;
    padding: 10px;
}

.logged-in-section {
    display: flex;
    align-items: center;
}

.logged-in-section img {
    border-radius: 50%;
    margin-right: 10px;
}

.logged-in-section .username {
    font-weight: bold;
    margin-right: 10px;
}

.profile-frame {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #1b1b1b;
    padding: 5px;
    background-color: #161616;
}

.profile-frame img {
    border-radius: 50%;
    margin-right: 10px;
    border: solid 2px #777777;
}

.profile-frame .username {
    font-weight: bold;
    margin-right: 10px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

/* Accessibility and small-screen adjustments. */
:root { --site-accent: #ff5733; --site-surface: #161616; }
*, *::before, *::after { box-sizing: border-box; }
.navbar { width: auto; left: 20px; right: 20px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 1100; padding: 10px; background: #161616; color: white; }
.skip-link:focus { top: 20px; }
main { min-height: 65vh; }
@media (max-width: 767px) {
 body { padding: 12px; }
 .navbar { left: 12px; right: 12px; }
 h6 { font-size: clamp(2rem, 8vw, 4rem); margin-top: 100px; }
 .container { padding: 12px 0; }
 .profile-frame { flex-wrap: wrap; gap: 6px; max-width: 100%; }
 .profile-frame .username { overflow-wrap: anywhere; }
}
@media (max-width: 991px) {
 .navbar-collapse { max-height: calc(100dvh - 100px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}