body {
    
    padding-top: 80px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: contain;    
    background-position: bottom center;
    background-attachment: fixed;     
    margin: auto;
    text-align: center;

}

article { /* left side bg */
    background-color: white;
    background-repeat: repeat;
    background-size: cover;
    width: 60%;
    height: 366px;
    float: left; /* always "floats" on screen left */
    
    text-align: left;
}

aside { /* right side bg */
    width: 40%;
    float: right;
    background-color: white;
    height: 366px; /* changing height of aside box to be same size as article box (play around with it) */
}

/* footer stuff //////////////////////////////////////*/
.footertext{ /* when it has ".name", this means its editing ONLY the text itself in the p tag in index */
    font-family: Arial, sans-serif;
    float: left;
    padding: 20px 80px;
    color: white;
    font-size: 100%;
    
}

footer {
    margin-top: 200px;
    height: 200px;
    clear:both; /* always keeping footer at bottom */
    padding: 30px; /* further padding to push footer down */
    background-color: #295ed3;
}

figcaption{
    margin-top: -15px; /* moves it up by 5 pixels */
    text-align: center; /* center the caption */
    color: aliceblue;
    font-family: Arial, sans-serif;
    font-size: 70%
}

.corner-logo {
  position: relative;
  float:right;
  bottom: 10px;
  right: 0px;
  width: 200px;
  z-index: 9999;
}


/*foooooooooooter////////////////////////////////////////////*/



.tinyheadertext{
    font-family: Arial, sans-serif;
    font-size: 70%;
    color: white;
    text-shadow: 0 0 5px #0ff;
}

.asidetext { /* editing only the text itself in the p tag in index  */
    font-family: Arial, sans-serif;
    color: Black;
    font-size: 100%;
}

.bonusasidetext { /* editing only the text itself in the p tag in index  */
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 60%;
    padding: 6px;
}

.imagebox{ /* image border */
    border: 2px solid black;
    padding: 0;              /* remove extra space */
    display: inline-block;   /* shrink to fit image */
}

.imagebox img {
  display: block;          /* removes bottom whitespace */
}

.imagebox:hover{
    border: 2px solid white;
}

.edit_img{ /* for toro gif */
    position: relative;       /* allow repositioning */
    top: -0px;               /* move image up */

}

.centered-image {
  position: relative;
  top: 10px;   /* down */
  height: 200px;
  left: 100px;
}

.another-centered-image {
  position: relative;
  top: 10px;   /* down */
  height: 200px;
  left: 200px;
}

/*///////////image banner/////////*/
html, body {
  margin: 0;
  padding: 0;
}

.banner {
  position: relative;
  width: 100%;
  height: 60vh; /* change to 100vh for fullscreen */
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* black overlay */
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

/*  //////////////////////////////////////////////*/

.video-banner {
  border-bottom: 4px solid #FF6400;
  position: relative;
  height: 600px;
  overflow: hidden;
  width: 100%;
    margin-bottom: 100px;
    
}

/* YouTube iframe background */
.video-banner iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  
}

/* Dark overlay */
.video-banner .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Text over video */
.video-banner .content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
}





/* logo text on left */
.logo {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    
    float: left;
    align-items: center;
    display: flex;
}

nav {
    border-bottom: 2px solid white;
    position: fixed;   /* sticks to viewport */
    top: 0;            /* align to top */
    left: 0;
    width: 100%;       /* full width */
    height: 10%;
    overflow: hidden;
    background-color: #295ed3;
    z-index: 1000;     /* keeps it above other content */
}

/* Style the topnav links */
nav a { /*navigation attribute */
    font-family: Arial Black;
    font-size: 15px;
    
    float:right; /* keeps all navigation to right side of screen */
    align-items: center;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 30px 16px; /*pixels*/
    text-decoration: none; /*remove underline*/
    
}

/* Change color on hover */
nav a:hover {
    text-decoration: underline;
}


.logo img {
    height: 60px;
    padding: 15px 40px;
    width: auto;
}

.logo-text {
    font-size: 14px;      /* change just logo text size */
    color: white;         /* or any color you want */
    font-weight: bold;
    margin-left: 0px;     /* controls spacing from image */
}

/* Responsive layout - when the screen is less than 800px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 800px){ 
    nav a {
        float: none;
        width: 100%;
        font-size: 80% 
    }
    
    aside {
        clear: both; 
        width: 100%;
        height:inherit; /* removes height when site is at super small size */
    }
    article {
        width:100%;
    }
    
    
    
    /*sponsors//////////////////////////*/
    .sponsors-section {
        padding: 50px 20px;
        text-align: center;
        background: #ffffff;
    }

    .sponsors-title {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .sponsor-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        max-width: 1000px;
        margin: auto;
    }

    .sponsor-card {
        background: #ffffff;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 20px;
        transition: 0.2s ease-in-out;
    }

    .sponsor-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .sponsor-card.gray {
        background: #f2f2f2;
    }

    .sponsor-logo {
        width: 100%;
        height: 100px;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .sponsor-name {
        font-size: 18px;
        font-weight: bold;
        margin-top: 5px;
    }

    .sponsor-desc {
        font-size: 14px;
        color: #555;
        margin-top: 5px;
    }
}