/* Base */
html {
    background: black;
    color: white;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    font-family: sans-serif;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
    color: white;
    font-size: 30px;
    text-decoration: none;
    margin: 0 10px;
    user-select: none;
}

.navbox {
    max-width: 1400px;
    margin: auto;
    padding: 5px 15px;
    background-color: #520202;
    border: 3px solid #520202;
    border-radius: 5px;
    
}

nav a {
    color: white;
    font-size: 30px;
    text-decoration: none;
    margin: 0 10px;
}

nav a:hover {
    animation: colorslide 1s infinite alternate;
}

/* Layout */
.three-column-layout {
    display: grid;
    grid-template-columns: 1fr auto 2fr auto 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 60px auto 40px;
    padding: 0 20px;
}

.column {
    text-align: center;
    
}
.borderlum{

    border: 3px solid #999999;
    outline: 3px solid #4d4d4d;
    border-radius: 5px;
    background: white;
    color: black;
}


.vline {
    width: 2px;
    background-color: white;
    opacity: 0.7;
}
.two-section {
    display: flex;
    flex-wrap: wrap; /* allows stacking on small screens */
    gap: 20px;
    align-items: flex-start;
    margin: 20px 0;
}

.two-text {
    flex: 1; /* takes available space */
    min-width: 250px; /* prevents it from being too small */
}

.two-text h3 {
    margin-top: 0;
}

.two-text p {
    margin-bottom: 0;
}

.two-embed {
    flex: 1; /* takes available space */
    min-width: 250px;
}

.team-box {
    max-height: 350px;      /* adjust to desired size */
    overflow-y: auto;       /* vertical scroll if content exceeds */
    padding: 15px;          /* keeps text from touching borders */
    box-sizing: border-box; /* padding included in height */
}
.news-embed {
    width: 100%;
    max-width: 100%;
}

.news-embed iframe {
    width: 100%;
    border: none;
    
}
.news-iframe {
    width: 100%;
    border: none;
    display: block;
    overflow: hidden;
}
.links-iframe {
    width: 100%;
    border: none;
    display: block;
    overflow: hidden;
}
/* Links box styling (used by fsf-links.html) */
.links-box {
    text-align: center;
    padding: 10px; /* optional, spacing inside box */
}

.links-box h2,
.links-box h3 {
    margin: 0 0 10px 0;
}

.links-box .line {
    width: 80%;
    height: 2px;
    background-color: white;
    margin: 10px auto;
}

.links-box a.link {
    display: block; /* stack vertically */
    margin: 5px auto;
    max-width: 250px;
}



/* Text & Pictures */
.blocktext {
    margin: 0 auto 15px;
    max-width: 500px;
    text-align: center;
}

.textpic{
    height: 1em;
    vertical-align: middle;
    user-select: none;
}
.blockpic {
    padding: 5px;
    padding-bottom: 0px;
    margin: 0 auto 15px;
    max-width: 300px;
    user-select: none;
}
/* Short video */
.video-container {
    position: relative;
    width: 100%;       
    padding-bottom: 177%; /* keeps 16:9 aspect ratio for the video */
    height: 0;
    overflow: hidden;
    padding-top: 40px; /* extra space for the text above */
    box-sizing: border-box;
}

.video-container p {
    font-size: 23px;
    position: absolute;
    top: 10px;  /* adjust space from top */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: black; /* matches your borderlum style */
    font-weight: bold;
}

.video-container iframe {
    position: absolute;
    top: 40px; /* push video below the text */
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* fill remaining space */
    border: 0;
}
/* Music */

/* Separators */
.line {
    width: 80%;
    height: 2px;
    background-color: white;
    margin: 40px auto;
}
.line2 {
    width: 90%;
    height: 2px;
    background-color: black;
    margin: 5px auto;
    
}
.line3 {
    width: 100%;
    height: 3px;
    background-color: #999999;
    margin: 0px auto;
    
}

.endline {
    width: 100%;
    height: 1px;
    background-color: lightgray;
}

/* Footer */
footer {
    text-align: center;
    margin: 1px auto;
    padding: 20px;
}

/* scrollbar */
.team-box::-webkit-scrollbar {
    width: 8px;
}

.team-box::-webkit-scrollbar-track {
    background: #e0e0e0;
}

.team-box::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.team-box::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Links */
.hidelink {
    color: white;
    text-decoration: none;
}
.hidelink:hover {
    color: #880000;
}
.hidelinkinvert {
    color: black;
    text-decoration: none;
}
.hidelinkinvert:hover {
    color: #880000;
}
.link {
    color: darkgray;
    text-decoration: none;
    border: 2px solid #520202;
    border-radius: 5px;
    background: #520202;
}
.link:hover{
    color: #880000;
    border: 2px solid darkgray;
    background: darkgray;
}


/* Animation */
@keyframes colorslide {
    from { color: white; }
    to   { color: #880000; }
}
@keyframes rainbow {
    0%   { background-color: hsl(0, 80%, 25%); border-color: hsl(0, 80%, 25%); }    /* red */
    16%  { background-color: hsl(60, 80%, 25%); border-color: hsl(60, 80%, 25%); }  /* yellow */
    33%  { background-color: hsl(120, 80%, 25%); border-color: hsl(120, 80%, 25%); }/* green */
    50%  { background-color: hsl(180, 80%, 25%); border-color: hsl(180, 80%, 25%); }/* cyan */
    66%  { background-color: hsl(240, 80%, 25%); border-color: hsl(240, 80%, 25%); }/* blue */
    83%  { background-color: hsl(300, 80%, 25%); border-color: hsl(300, 80%, 25%); }/* magenta */
    100% { background-color: hsl(360, 80%, 25%); border-color: hsl(360, 80%, 25%); }/* back to red */
}
/* Responsive */
@media (max-width: 900px) {
    .three-column-layout {
        grid-template-columns: 1fr;
    }

    .vline {
        display: none;
    }
}