* {
    /* border: 0.25px solid rgba(222, 222, 222, 0.6)!important; */
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

*::-webkit-scrollbar {
    display: none;
}

nav *, section * {
    opacity: 0;
}

/* nav *, section * {
    opacity: 0;
} */

.background-overlay {
    position: absolute !important;
    min-height: 100vh;
}

/* -- HOME -- */

#home > .grid {
    flex-direction: column;
    justify-content: flex-end !important;
}

#home {
    height: 100vh;
}

#home .title-text h3 {
    font-size: 1.75rem;
    letter-spacing: 0.05rem;
    color: var(--secondary-color);
    margin: 0;
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
    font-weight: normal;
}

#home .title-text svg {
    fill: var(--secondary-color) !important;
    width: 2rem;
    cursor: pointer;
}

#home .grid-item:first-of-type h1 {
    text-align: center;
    max-width: 100%;
    margin: 0 !important;
    font-size: 3.25rem;
    line-height: 3.75rem;
}

#home .grid-item:first-of-type p {
    text-align: center;
    max-width: 60%;
    margin: 0.5rem 0 1rem 0;
    font-size: 1.25rem !important;
}

#home .button-container, #home .button-container button {
    justify-content: center;
    font-size: 1.25rem !important;
}

#home .button-container input {
    background: var(--accent-color) !important;
    border: 0.5px solid var(--secondary-color);
    font-size: 1.15rem !important;
}

.invalid {
    animation: shake 0.1s ease-in-out 0s 4 !important;
    border-color: rgba(255, 0, 0, 1) !important;
}

.button-container .join-input:focus {
    color: var(--primary-color) !important;
}

.sponsor-home {
    display: none !important;
}

#info-container {
    overflow: hidden;
    margin-top: -5rem;
    height: 30vh;
    gap: 1rem;
    border-top: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    background: radial-gradient(circle at bottom left, rgba(102, 16, 242, 0.7) 37%, rgba(0, 29, 74, 0.7) 100%) !important;
}

#info-container .sponsor {
    margin: 0 !important;
    /* margin-top: 1rem !important; */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    max-height: 4rem;
    overflow-x: scroll;
    scroll-snap-type: y mandatory !important;
    scroll-snap-points-y: repeat(5rem) !important;
    scroll-behavior: smooth;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important; 
    max-width: 80%;
    border: 0.5px solid var(--primary-color);
    border-radius: 0.5rem;;
}

.sponsor::-webkit-scrollbar {
    display: none;
}

#info-container .sponsor .grid-item {
    min-width: 16.5%!important;
    scroll-snap-align: start !important;
}

.sponsor .grid-item:hover {
    animation-play-state: paused !important;
}

#home .sponsor .grid-item:nth-of-type(n) {
    background-image: url("../assets/home/logos/BEST-BUY-LOGO.svg.png");
}

#home .sponsor .grid-item:nth-of-type(2n) {
    background-image: url("../assets/home/logos/META-LOGO.svg.png");
}

#home .sponsor .grid-item:nth-of-type(3n) {
    background-image: url("../assets/home/logos/3M-LOGO.svg.png");
}

#home .sponsor .grid-item:nth-of-type(4n) {
    background-image: url("../assets/home/logos/RBA-LOGO.jpg.png");
}

#info-container > .iframe {
    aspect-ratio: 16 / 9 !important;
    margin-top: 1rem;
    min-height: 40vh;
    min-width: 70% !important;
    background-image: url("../assets/home/SPARKHS-VIDEO-IMAGE-2.png");
    display: none;
    border-radius: 0.5rem !important;
    cursor: pointer;
}

.iframe iframe {
    align-self: flex-start;
    margin-top: 0 !important;
}

.hidden-text {
    display: none;
}

.text-container {
    max-width: 80%;
    justify-content: space-between;
    align-items: flex-start !important;
    margin-top: -1rem;
}

.text-container h2 {
    font-size: 2rem;
    margin: 0;
    text-align: left;
    /* border: 0.5px solid var(--primary-color); */
    padding: 0.5rem;
    border-radius: 0.5rem;;
}

.text-container p {
    font-size: 1.15rem;
    color: var(--secondary-color);
    text-align: right;
    max-width: 60%;
    /* border: 0.5px solid var(--primary-color); */
    padding: 0.5rem;
    margin: 0;
    border-radius: 0.5rem;;
}

/* -- FAQ -- */

#faq {
    background: transparent;
    border-bottom: 1px solid var(--secondary-color);
}

#faq .grid {
    justify-content: center;
    align-items: center;
    flex-direction: row !important;
    max-height: 100vh !important;
}

#faq .grid > .grid-item:first-of-type {
    align-self: flex-start !important;
    display: flex;
    max-width: 40%;
    max-height: 100% !important;
    justify-self: flex-start !important;
}

#faq .title-text {
    justify-content: flex-start !important;
    align-items: flex-start;
    text-align: left !important;
    justify-self: flex-start !important;
    width: 100%;
    overflow: visible;
}

#faq .title-text h1, #faq .title-text p, #faq .button-container {
    text-align: left;
    justify-content: flex-start;
    margin: 0 !important;
}

#faq .button-container {
    min-width: 100%;
}

#faq .button-container button:first-of-type {
    background-color: var(--accent-color);
    border: 0.5px solid var(--primary-color);
}

#faq .button-container button:last-of-type {
    background-color: transparent;
}

#faq .title-text p {
    justify-self: flex-start !important;
}

.subtitle-text {
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0.5px solid var(--secondary-color);
    border-radius: 0.5rem;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0));
}

/* #faq .subtitle-text:hover h4 {
    font-size: 1rem;
    line-height: 1.25rem;
    height: 100% !important;
    opacity: 1;
} */

.subtitle-text h3, .subtitle-text h4 {
    margin: 0;
    color: var(--secondary-color);
}

.subtitle-text h3 {
    margin-bottom: 0.5rem;
}

.subtitle-text h4 {
    font-weight: normal;
    font-size: 1rem;
    /* font-size: 0;
    line-height: 0;
    height: 0 !important;
    opacity: 0; */
}

.faq-full {
    max-width: 40%;
    height: 100%;
    min-height: 40vh;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    overflow-y: scroll !important;
    gap: 0.5rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0));
}

.faq-full h3 {
    margin: 0;
    font-size: 0;
}

.faq-full:hover h3 {
    font-size: 1.25rem !important;
}

.faq-full input {
    border: 1px solid var(--secondary-color);
    box-sizing: border-box;
    font-size: 1.25rem !important;
    min-width: 100%;
    margin-bottom: 0.25rem;
    text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0)) !important;
}

.question {
    justify-self: flex-start !important;
    align-self: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    gap: 0 !important;
}

.question button {
    background: transparent;
    border: 0.5px solid var(--secondary-color);
    width: 100%;
    font-size: 1.1rem;
    background-color: var(--alt-color);
    text-align: center;
    justify-content: center;
}

.question button:hover, .question-content:hover ~ button{
    color: var(--primary-color) !important;
    letter-spacing: 0.01rem !important;
}

.question-content {
    padding: 0;
    background: radial-gradient(circle at bottom right, var(--alt-color) 37%, var(--accent-color) 100%) !important;
    opacity: 0;
    line-height: 0;
    height: 0rem;
    overflow: hidden;
    border-radius: 0 0 1rem 1rem;
    border: 0.5px solid var(--secondary-color);
}

.question button:hover + .question-content, .question-content:hover {
    padding: 0.25rem 1rem 0.25rem 1rem;
    opacity: 1;
    line-height: 1.5rem;
    height: 100%;
}

/* -- SCHEDULE -- */

#schedule {
    border-bottom: 1px solid var(--secondary-color);
}

#schedule .grid {
    flex-direction: column !important;
}

#schedule > .grid .grid-item:first-of-type {
    margin-top: -2rem;
}

#schedule .title-text {
    max-width: 80%;
    margin-top: 3rem;
    /* text-align: right; */
}

#schedule .title-text h1 {
    min-width: 100%;
}

#schedule .title-text:first-of-type h1 {
    margin-top: 1rem !important;
    align-self: flex-start;
}

#schedule .title-text p {
    max-width: 100%;
    margin: 0;
}

#schedule .img {
    background-image: url("../assets/main/SPARKHS-SCHEDULE-IMAGE.png");
    min-width: 70%;
    height: 100%;
    max-height: 50vh !important;
    border-radius: 1rem;
    opacity: 0.8;
    aspect-ratio: 16 / 9 !important;
    border: 1px solid var(--primary-color);
    align-self: center;
    justify-self: flex-end !important; 
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    overflow-y: hidden;
}

#schedule .img:hover {
    /* min-width: 100%; */
    background-image: url("../assets/main/SPARKHS-SCHEDULE-IMAGE-2.png");
    min-width: 100%;
}

#schedule .img-full .img:hover ~ .img-sidebar {
    display: none !important;
}

#schedule .button-container {
    justify-content: flex-start;
    justify-self: flex-start;
    min-width: 100% !important;
    margin-top: 1rem;
    z-index: 5 !important;
}

#schedule .button-container button {
    border: 0.5px solid var(--primary-color);
}

.img-full {
    display: flex;
    align-items: space-between !important;
    align-self: flex-start;
    justify-content: flex-end !important;
    min-width: 100%;
    max-height: 50vh !important;
    border-radius: 1rem !important;
}

.image-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

.image-sidebar .subtitle-text {
    height: 100%;
    max-height: 50%;
    text-overflow: ellipsis;
    overflow-y: visible;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0));
}

.subtitle-text:hover {
    scale: 1.05;
}

.image-sidebar .subtitle-text h3 {
    background: radial-gradient(circle at bottom left, var(--accent-color) 37%, var(--background-color) 100%) !important;
    padding: 0.25rem;
    border-radius: 0.15rem;
    cursor: pointer;
}

.subtitle-text:hover h3, .day-schedule:hover h2 {
    letter-spacing: 0.1rem !important;
    cursor: pointer;
}

/* .image-sidebar .subtitle-text h4 {
    font-size: 0.95rem !important;
} */

#schedule .grid-item:last-of-type {
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
    opacity: 0;
    position: absolute;
    z-index: 3;
    background-color: var(--alt-color);
    pointer-events: none;
    border-top: 1px solid var(--secondary-color);
}

.invisible-flex {
    opacity: 0 !important;
}

.visible-flex {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

#schedule .grid-item:last-of-type .title-text {
    min-width: 80%;
    margin-top: -2rem;
    margin-bottom: auto;
    text-align: right;
    align-items: flex-end;
}

#schedule .grid-item:last-of-type .title-text h1 {
    font-size: 2.2rem;
}

.day-buttons {
    width: 80%;
    margin-top: auto;
    justify-content: center !important;
    gap: 0.75rem;
    overflow: visible;
}

.day-buttons button {
    min-width: 20%;
    font-weight: bold;
    justify-content: center;
    font-size: 1rem !important;
    border: 0.5px solid var(--secondary-color);
}

/* .day-buttons button:last-of-type {
    font-weight: bold;
} */

.day-buttons button:hover, .button-clicked {
    letter-spacing: 0.1rem !important;
    background: radial-gradient(circle at bottom left, var(--accent-color) 37%, var(--background-color) 100%) !important;
    letter-spacing: 0.1rem;
    border: 0.5px solid var(--secondary-color);
    min-width: 25vw;
}

#schedule .title-text button:nth-of-type(2) {
    display: none;
}

.day-full {
    flex-direction: column;
    min-width: 100%;
    min-height: 50vh;
    max-height: 50vh;
    margin-bottom: 0;
    padding: 1rem 0 1rem 0;
    border-radius: 0.5rem;
    gap: 2rem;
    justify-content: flex-start;
    overflow-y: scroll !important;
    scroll-snap-type: y mandatory !important;
    scroll-snap-points-y: repeat(50vh) !important;
    scroll-behavior: smooth;
}

.day-schedule {
    width: 80%;
    height: 100%;
    min-height: 50vh;
    flex-direction: column;
    justify-content: flex-start !important;
    scroll-snap-align: start;
    padding: 0.5rem 0 0.5rem 0;
    border-radius: 1rem;
    gap: 0.75rem;
    overflow: scroll;
    border: 0.5px solid var(--primary-color);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0));
}

.day-schedule h2 {
    align-self: center;
    text-align: right;
    min-width: 80%;
    background: radial-gradient(circle at bottom left, var(--accent-color) 37%, var(--background-color) 100%) !important;
    padding: 0.2rem;
    border-radius: 0.2rem;
}

.day-row {
    display: flex;
    width: 80%;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--alt-color);
    border: 0.2px solid var(--secondary-color);
}

.day-row h3, .day-row h4 {
    margin: 0;
    max-width: 50%;
}

.day-row h3 {
    align-self: center;
    font-size: 1.15rem;
}

.day-row h4 {
   font-weight: normal;
   font-size: 0.9rem;
}

/* -- SPONSORS -- */

#team {
    border-bottom: 1px solid var(--secondary-color);
    background: radial-gradient(circle at bottom left, var(--alt-color) 37%, var(--accent-color) 100%) !important;
}

#team .background-overlay {
    background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
}

#team .grid {
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden !important;
    gap: 2rem;
}

#team .title-text, #team .title-text h1, #team .title-text p, #team .button-container {
    min-width: 80% !important;
    justify-content: center;
    align-self: center;
    overflow: hidden;
    text-align: left !important;
}

#team .title-text p {
    margin: 0;
    margin-bottom: 1rem;
}

#team .button-container button {
    border: 0.5px solid var(--primary-color);
}

#team > .grid .grid-item:last-of-type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    height: 100%;
    height: 50vh !important;
    justify-self: flex-start;
    justify-content: center !important;
    align-items: flex-start !important;
    max-width: 80%;
    padding: 1rem;
    scroll-snap-type: y mandatory !important;
    scroll-snap-points-y: repeat(45vh) !important;
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    overflow-y: scroll;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important; 
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0));
}

#team > .grid .grid-item:last-of-type::-webkit-scrollbar {
    display: none;
}

#team > .grid .grid-item:last-of-type:hover {
    max-height: 60vh;
}

#team .subtitle-text {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    width: 100%;
    max-width: 40vw;
    margin: 1rem !important;
    height: 100%;
    min-height: 45vh;
    box-sizing: border-box;
    justify-self: center;
    overflow: hidden;
    overflow-y: scroll !important;
    align-self: center;
    justify-content: flex-start;
    border: 0.5px solid var(--primary-color);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0));
}

#team .subtitle-text:hover {
    min-width: 35vw;
}

#team .subtitle-text .img {
    height: 100%;
    min-height: 15vh;
    max-height: 30vh;
    background-size: cover;
    cursor: pointer;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    font-weight: bold;
    color: var(--primary-color);
}

#team .subtitle-text .img:hover {
    scale: 1.1;
    opacity: 0.9;
    margin-bottom: 1rem;
}

#team .subtitle-text .img:nth-of-type(1) {
    background-image: url("../assets/main/SPARKHS-SCHEDULE-IMAGE-2.png");
}

#team .subtitle-text h3, #team .subtitle-text .img {
    border: 0.25px solid var(--secondary-color);
    border-radius: 0.1rem;
    padding: 0.2rem;
}

#team .subtitle-text h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
}

#team .subtitle-text h4 {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.subtitle-text h5 {
    margin: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
    opacity: 0.95;
    font-size: 1rem;
    background: radial-gradient(circle at top left, var(--accent-color) 37%, var(--alt-color) 100%) !important;
    padding: 0.1rem;
    padding-left: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: normal;
}

.subtitle-text .tags {
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    justify-self: flex-end !important;
    align-items: center;
    overflow: visible !important;
    overflow-x: scroll;
    flex-wrap: wrap;
    margin-top: auto;
}

.subtitle-text .tag {
    border: 0.25px solid var(--primary-color);
    border-radius: 0.1rem;
    padding: 0.25rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    background: transparent;
}

.subtitle-text .tag:hover {
    letter-spacing: 0.05rem;
    background: radial-gradient(circle at bottom left, var(--accent-color) 37%, var(--alt-color) 100%) !important;
}

/* -- CONTACT -- */

#contact {
    background: radial-gradient(circle at top right, var(--alt-color) 37%, var(--accent-color) 100%) !important;
}

#contact .background-overlay {
    background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, var(--alt-color) 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
}

#contact .grid {
    min-height: 100vh;
    max-width: 80%;
    box-sizing: border-box;
    flex-direction: column;
}

#contact > .grid .grid-item:first-of-type {
    min-width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 0 !important;
    overflow: visible;
    /* margin-top: 4rem; */
}

#contact > .grid .grid-item:last-of-type {
    /* background: radial-gradient(circle at bottom left, rgba(102, 16, 242, 0.7) 37%, rgba(0, 29, 74, 0.7) 100%) !important; */
    align-self: flex-end;
}

#contact > .grid .grid-item:first-of-type .title-text {
    text-align: right;
    align-items: flex-end;
    max-width: 40%;
}

#contact .title-text p {
    margin-top: 0 !important;
    min-width: 90%;
}

#contact  .button-container {
    justify-content: flex-end;
}

#contact .grid-item .button-container button {
    border: 0.5px solid var(--primary-color);
}

#contact form {
    z-index: 3;
    min-width: 35vw;
    align-self: flex-end;
    justify-self: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2em;
    border-radius: 0.5rem;
    margin-top: 1rem;
    border: 0.25px solid var(--secondary-color);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0));
}

.loader {
    position: relative;
}

#contact form h2, #contact form p {
    margin: 0 !important;
    min-width: 100%;
}

#contact form p {
    display: none;
}

#contact form .special-text {
    padding-left: 0.6rem;
    width: 50%;
    font-size: 1.5rem !important;
    line-height: 1.5rem !important;
    /* min-width: 100%; */
}

#contact form {
    box-sizing: border-box;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

#contact form:hover {
    scale: 1.025;
}

#contact form input, #contact form select, #contact form textarea {
    min-width: 100%;
    box-sizing: border-box !important;
    border: 0.15px solid var(--secondary-color);
}

#contact form p, #contact form .form-item:has(select), #contact form .form-item:has(#message), #contact form .form-item:has(#phone) {
    min-width: 100% !important;
    grid-column: 1 / 3 !important;
}

#contact .form-item:has(#name), #contact .form-item:has(#email) {
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#contact form button {
    margin-top: 0.75rem;
    background-color: var(--accent-color);
}

#contact form .form-item:has(#message), #contact form #message {
    min-height: 10vh;
}

.longer {
    min-height: 30vh !important;
}

#contact form #message {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    resize: none;
    outline: none;
    font-size: 1rem;
}

/* .form-alert {
    display: block !important;
} */

.prizes, .prize {
    min-height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    box-sizing: border-box;
    flex-direction: row;
}

.prizes {
    min-width: 100%;
    border-radius: 1rem;
    justify-content: flex-start;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    scroll-snap-points-x: repeat(70%) !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important; 
}

.prizes::-webkit-scrollbar {
    display: none;
}

.prize {
    min-width: 70%;
    align-self: flex-start;
    justify-content: flex-start;
    padding: 2rem;
    scroll-snap-align: start;
    border-radius: 0.5rem;
    border-left: 1px solid var(--secondary-color);
}

.prize:hover {
    min-width: 100%;
}

/* -- FOOTER -- */

.footer-hover {
    min-width: 80vw;
    min-height: 70%;
    margin-bottom: 20vw;
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

.footer-hover h1 {
    text-align: center;
    text-indent: 10vw;
    width: 40% !important;
    font-size: 6rem;
    font-weight: normal;
    transform: rotate(90deg);
    opacity: 0 !important;
    align-self: flex-end;
    cursor: pointer;
    z-index: 4 !important;
    pointer-events: none !important;
    color: var(--secondary-color);
}

.footer-hover:hover h1 {
    opacity: 1 !important;
    pointer-events: all !important;
}

.footer-hover:hover h1:hover {
    scale: 1.1;
    color: var(--primary-color);
}

@media (max-width: 1200px) {
    #team > .grid .grid-item:last-of-type:hover {
        max-height: 50vw;
    }

    #team .subtitle-text:hover {
        min-width: 100%;
    }
}

@media (max-width: 1024px) {
    nav *, section *, footer * {
        opacity: 1;
    }

    .special-text {
        font-size: 2.5rem !important;
        line-height: 3rem !important;
    }

    #home .title-text h3 {
        font-size: 1.75rem !important;
    }

    #home .title-text h1 {
        font-size: 2.75rem !important;
        line-height: 3rem !important;
        text-align: center !important;
        max-width: 70% !important;
    }

    #home .grid-item:first-of-type p {
        max-width: 70%;
        text-align: left;
    }

    #home .button-container input {
        min-width: 12rem;
    }

    .sponsor-home {
        display: grid !important;
    }

    #info-container {
        flex-direction: column !important;
        margin-top: 0 !important;
    }

    #info-container > .iframe {
        display: grid !important;
    }

    .hidden-text {
        display: inline !important;
    }

    .text-container {
        flex-direction: column !important;
        max-width: 80% !important;
    }

    .text-container h2 {
        border: none !important;
        margin-bottom:-0.5rem !important;
    }
    
    .text-container p {
        text-align: left;
        max-width: 100%;
        border: none !important;
    }

    #faq, #faq .background-overlay {
        min-height: 100vh !important;
    }

    #faq .grid {
        flex-direction: column !important;
        margin-bottom: auto;
        gap: 2rem;
        justify-self: flex-start !important;
    }

    #faq .grid-item {
        max-height: 40vh !important;
        min-height: 15vh !important;
        justify-content: flex-start !important;
    }

    #faq .grid > .grid-item:first-of-type {
        align-self: center !important;
        max-width: 80% !important;
    }

    .faq-full {
        max-width: 80% !important;
        gap: 0.5rem !important;
        min-height: 50vh;
    }

    #faq .button-container button {
        margin-top: 1rem !important;
    }

    #faq button {
        font-size: 1rem !important;
    }

    #faq .subtitle-text {
        display: none;
    }

    .image-sidebar {
        max-height: 45vh;
    }

    .image-sidebar .subtitle-text h3 {
        font-size: 1rem;
    }

    .image-sidebar .subtitle-text h4 {
        font-size: 0.9rem;
    }

    #schedule .grid-item:last-of-type {
        opacity: 1 !important;
        position: relative !important;
        pointer-events: all !important;
    }

    .day-buttons {
        min-width: 80%;
        align-items: center;
        justify-content: center !important;
    }

    .day-buttons button {
        min-width: 25vw;
    }

    .day-buttons button:last-of-type {
        display: none;
    }

    #schedule .title-text button:nth-of-type(2) {
        display: inline-flex;
    }

    #schedule .title-text button:last-of-type {
        display: none;
    }

    #team, #team .background-overlay {
        min-height: 100vh !important;
    }

    #team > .grid {
        min-height: 100vh !important;
        margin-bottom: auto;
    }

    #team > .grid .grid-item:first-of-type {
        min-height: 20vh !important;
    }

    #team > .grid .grid-item:last-of-type {
        grid-template-columns: repeat(2, 1fr);
        overflow-y: scroll;
        height: 100%;
        min-height: 50vh !important;
        min-width: 80% !important;
        scroll-snap-points-y: repeat(10vh) !important;
        box-sizing: border-box;
    }

    #team .subtitle-text {
        max-width: 100%;
    }

    #team .subtitle-text .img {
        min-height: 10vh !important;
    }

    #team .subtitle-text:hover {
        scale: 1 !important;
    }

    #team .subtitle-text:hover h3 {
        letter-spacing: 0 !important;
    }

    #contact, #contact .background-overlay {
        min-height: 100vh !important;
    }

    #contact .grid {
        min-height: 100vh !important;
    }

    #contact > .grid .grid-item:first-of-type {
        flex-direction: column-reverse;
        align-items: center !important;
        justify-content: center !important;
        gap: 2rem !important;
    }

    #contact > .grid .grid-item:last-of-type {
        display: none !important;
    }

    #contact form {
        max-height: 70vh;
        gap: 0;
        margin: 0;
        overflow: hidden;
        padding: 1rem;
        justify-self: center;
        align-self: center;
        overflow-y: scroll;
    }

    #contact .title-text {
        min-width: 100%;
        text-align: center !important;
        align-items: center !important;
    }

    #contact .title-text h1 {
        min-width: 100%;
    }
    
    #contact .title-text p {
        max-width: 80%;
    }

    #contact .title-text .button-container {
        justify-content: center !important;
    }

    #contact form .special-text {
        min-width: 100%;
        margin-bottom: 0.75rem;
        padding-left: 1.5rem;
        font-size: 1.2rem !important;
    }

    #contact form {
        min-width: 60%;
        gap: 0.5rem;
        max-height: 60vh;
    }
}

@media (max-width: 768px) {
    #home .title-text {
        margin-top: 4rem;
    }

    .special-text {
        font-size: 2.25rem !important;
    }

    iframe, .iframe {
        display: flex !important;
    }

    #home .title-text h1 {
        text-align: left !important;
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }

    #home .title-text .special-text {
        letter-spacing: 0 !important;
    }

    #home .grid-item:first-of-type p {
        font-size: 1rem !important;
    }

    #home .button-container, #home .button-container button,  #home .button-container input {
        font-size: 1rem !important;
    }

    #home .button-container input {
        min-width: auto;
    }

    #home .title-text h3 {
        display: none;
    }

    #home .title-text svg {
        width: 2rem !important;
    }

    #info-container {
        gap: 0 !important;
    }

    #info-container > .iframe {
       margin-top: 1.5rem !important;
       min-height: 30vh !important;
       min-width: 80% !important;
       aspect-ratio: 16 / 9 !important;
    }

    #info-container > .iframe h3 {
        font-size: 1rem !important;
    }

    #info-container .sponsor {
        min-height: 4rem;
    }

    .text-container h2 {
        font-size: 1.75rem;
    }

    .text-container p {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    #faq .title-text h1, #faq .title-text p, #faq .button-container {
        min-width: 100% !important;
    }

    #faq .button-container button {
        font-size: 1rem !important;
        justify-content: flex-start !important;
    }

    #faq button {
        font-size: 1rem !important;
    }

    #faq .grid > .grid-item:first-of-type {
        max-height: 40vh !important;
    }

    #schedule .img {
        width: 100% !important;
    }

    #schedule .image-sidebar {
        display: none;
    }

    .day-buttons {
        align-items: flex-end;
        justify-content: flex-end !important;
    }

    .day-schedule {
        max-width: 80%;
    }

    .day-row h3 {
        font-size: 1rem;
    }

    #schedule .grid-item:last-of-type .title-text h1 {
        font-size: 1.5rem;
    }

    #team .grid {
        gap: 0.5rem !important;
    }

    #team > .grid .grid-item:last-of-type {
        grid-template-columns: repeat(1, 1fr);
        min-width: 100%;
        min-height: 100% !important;
        overflow-y: scroll;
    }

    #team > .grid .grid-item:last-of-type:hover {
        max-height: 50vh;
    }

    #team .subtitle-text h3 {
        font-size: 1.2rem;
    }

    #team .subtitle-text h5 {
        font-size: 0.9rem;
    }

    #team .subtitle-text .tag {
        font-size: 0.8rem !important;
    }

    #contact > .grid .grid-item:first-of-type .title-text {
        text-align: left;
        align-items: flex-start;
    }
    
    #contact > .grid .grid-item:first-of-type .title-text p {
        max-width: 100%;
    }
    
    #contact > .grid .grid-item:first-of-type .button-container {
        justify-content: flex-start;
    }

    #contact form {
        min-width: 100%;
    }

    #contact form .formitem:has(#message), #contact form #message {
        height: 7.5vh !important;
        min-height: 5vh !important;
        font-size: 0.8rem !important;
    }

    .filler-text {
        display: none !important;
    }
}

@media (max-width: 350px) {
    #home .grid-item:first-of-type p {
        font-size: 0.8rem !important;
    }

    #info-container > .iframe {
        display: none !important;;
     }

    .sponsor-home {
        display: none !important;
    }

    #schedule .grid-item:last-of-type .title-text {
        min-width: 100%;
        align-items: center;
        text-align: center;
    }

    #team .title-text p {
        font-size: 0.8rem !important;
    }

    #team .subtitle-text {
        min-height: 50vh !important;
    }

    #team .subtitle-text .img {
        display: none;
    }
}