/* What do you have to be scared of?
 *
 * Lorin Tackett, July 2013
 * http://lorintackett.com 
 */

/* Variables */
:root {
    --cloud-animation-duration-1: 40s;
    --cloud-animation-duration-2: 30s;
    --cloud-animation-duration-3: 34s;
    --transition-duration: 0.1s;
    --navbar-blur: 8px;
    --navbar-bg-opacity: 0.469;
    --content-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --content-box-radius: 12px;
}

/* Animations */
@keyframes clouds-loop-1 {
    to { background-position: -1000px 0; }
}

@keyframes clouds-loop-2 {
    to { background-position: -1000px 0; }
}

@keyframes clouds-loop-3 {
    to { background-position: -1579px 0; }
}

@keyframes rotation {
    from { transform: rotate(359deg); }
    to { transform: rotate(0deg); }
}

/* Base Styles */
body {
    background: linear-gradient(#5DB6C1, #428DAB);
    margin: 0;
    padding-top: 5rem;
}

body a {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

body a span {
    display: block;
}

/* Cloud Effects */
.clouds {
    opacity: 0.9;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.clouds-1,
.clouds-2,
.clouds-3 {
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 500px;
}

.clouds-1 {
    background-image: url("img/clouds_1.png");
    animation: clouds-loop-1 var(--cloud-animation-duration-1) infinite linear;
}

.clouds-2 {
    background-image: url("img/clouds_3.webp");
    animation: clouds-loop-2 var(--cloud-animation-duration-2) infinite linear;
}

.clouds-3 {
    background-image: url("img/clouds_3.webp");
    animation: clouds-loop-3 var(--cloud-animation-duration-3) infinite linear;
}

/* Navigation */
.navbar2 {
    backdrop-filter: blur(var(--navbar-blur));
    background-color: rgba(255, 255, 255, var(--navbar-bg-opacity));
}

/* Sponsor Section */
.sponsorcontainer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    grid-template-areas: "sponsortext sponsorlogo";
}

.sponsortext { grid-area: sponsortext; }
.sponsorlogo { grid-area: sponsorlogo; }

/* Event Ticket */
.eventticket {
    transition: transform var(--transition-duration) ease-in-out;
}

.eventticket:hover {
    transform: scale(1.02);
}

/* Card Styles */
.cscard {
    transition: transform var(--transition-duration) ease-in-out;
    border-radius: 11px;
    background-color: transparent;
}

.cscard div figure img {
    box-shadow: 
        0px 1.1px 1.9px rgba(0, 0, 0, 0.059),
        0px 2.6px 4.3px rgba(0, 0, 0, 0.086),
        0px 4.6px 7.7px rgba(0, 0, 0, 0.106),
        0px 7.7px 12.8px rgba(0, 0, 0, 0.124),
        0px 12.7px 21.2px rgba(0, 0, 0, 0.144),
        0px 22.2px 37px rgba(0, 0, 0, 0.171),
        0px 48px 80px rgba(0, 0, 0, 0.23);
}

.cscard:hover {
    transform: scale(1.05);
}

/* Image Container */
#img_container {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    min-height: 16vw;
}

/* Media Queries */
@media only screen and (min-width: 1000px) {
    .mbifs {
        padding: 0;
    }
    #img_container {
        min-height: auto;
    }
}

@media only screen and (max-width: 768px) {
    #img_container {
        min-height: 27vw;
    }
    #subsequent {
        padding: 0 10vw;
    }
}

/* Content Box */
.content-box {
    background-color: white;
    border-radius: var(--content-box-radius);
    box-shadow: var(--content-box-shadow);
    padding: 2rem;
    margin: 2rem 0;
}

.content-box .title {
    color: #073c4d !important;
}

.content-box .subtitle {
    color: #0c4f65 !important;
}