img {
    object-fit: cover;
}


/* main text and image */

#mainText {
    font-weight: 500;
    margin: 10vw min(50vw, 100px) 5% 5vw;
    padding: 0px 2rem;
    /*background-color: gray; */
    text-align: center;
}

#landingPageSubtitle {
    font-family: "Kanit", "sans-serif";
    font-size: 3vw;
    text-align: center;
}

#landingPageTitle {
    font-size: 4vw;
    color: #53D958;
    letter-spacing: 0.3em;
    
}

#mainDescription {
    margin-top: 1vh;
    width: 50vw;
    font-size: 2em;
}

@keyframes underlineSlide {
    0% {
        translate: -100% 0%;
        width: 200%;
    }

    100% {
        width: 100%;
    }
}

#underline {
    height: 0.4rem;
    width: 100%;
    background-color: #53D958;
    animation: underlineSlide ease 1.5s;
}



#mainImage {
    position: absolute;
    right: 0px;
    margin-top: 10%;
    translate: 20% 0%;
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    overflow-x: hidden;
    z-index: 2;
}

#subImage1 {
    border-radius: 50%;
    width: 10vw;
    height: 10vw;

    position: absolute;
    right: 5vw;
    margin-top: 20vw;
    transition: 500ms;
    z-index: -1;
}

#subImage2 {
    border-radius: 50%;
    width: 10vw;
    height: 10vw;

    position: absolute;
    right: 5vw;
    margin-top: 20vw;
    transition: 500ms;
    z-index: -1;
}

#subImage3 {
    border-radius: 50%;
    width: 10vw;
    height: 10vw;

    position: absolute;
    right: 5vw;
    margin-top: 20vw;
    transition: 500ms;
    z-index: -1;
}

#mainImage:hover ~ #subImage1 {
    translate: -20vw -10vw;
}

#mainImage:hover ~ #subImage2 {
    translate: -25vw 0vw;
}

#mainImage:hover ~ #subImage3 {
    translate: -20vw 10vw;
}


#mainContainer {
    display: flex;
}



/*sponsor bar */

#supporterBar{
    background-color: #21094E;
    width: 100%;
    height: 12vw;
    padding: 20px 0px;
    margin-top: 50vh;
    display: flex;
}

#mainSponsors {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#slashBar {
    width: 10vw;
    height: 0.3vw;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #53D958;
    rotate: 90deg;
    opacity: 0;
    filter: blur(10px)
}

.mainSponsorImage {
    width: 8vw;
    opacity: 0;
    filter: blur(10px);
    object-fit: contain;
}

#slashBar.show {
    rotate: 135deg;
    opacity: 1;
    filter: blur(0px)
}

#frcLogo {
    translate: 10vw;
}

.show {
    transition: 500ms ease-in-out;
}

#frcLogo.show {
    opacity: 1;
    translate: 3vw -2vw;
    filter: blur(0px);
}

#dlaLogo {
    translate: -10vw;
}

#dlaLogo.show {
    opacity: 1;
    translate: -3vw 2vw;
    filter: blur(0px);
}

#otherSponsors {
    margin: auto;
    width: 40%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}


.smallSponsorImage {
    width: 7vw;
    margin: auto;
}


/* competition info */

.competitionsContainer {
    margin: 2%;
    
}

.competitionInfo {
    display: flex;
    margin: 2%;
}

.competitionImage {
    width: 20vw;
    height: 20vw;
}

.competitionText {
    margin: 2%;
    margin-right: 20%;
    float: right;
}

#imageContainer img{
    object-fit: cover;
}


@media screen and (max-width: 700px) {
    #mainContainer {
        width: 100%;
    }
    #imageContainer {
        display: none;
    }
    #mainText {
        width: 80%;
        margin: 50px auto;
        padding: 0;
    }

    #landingPageSubtitle {
        font-size: 1.5em;
        margin: 0 auto;
        text-align: center;
    }
    #landingPageTitle {
        font-size: 2em;
        margin: 0 auto;
        text-align: center;
    }
    #mainDescription {
        text-align: center;
        margin: 5px auto;
        width: 100%;
        font-size: 0.7rem;
    }

    #supporterBar {
        margin-top: 30px;
        height: 100%;
        padding: 5% 0px;
    }

    .smallSponsorImage {
        width: 12vw;
    }

    .mainSponsorImage {
        width: 18vw;
    }

    #slashBar {
        height: 1vw;
        width: 20vw;
    }

    h1 {
        font-size: 1.5em;
        text-align: center;
    }

    h2 {
        font-size: 1.2em;
    }
    .competitionText {
        margin: auto;
        font-size: 0.7em;
    }

    .competitionInfo {
        margin: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .competitionImage {
        width: 90vw;
        height: 75vw;
    }
}

.awardsContainer {
    margin: 2%;
    align-content: center;
}
.awardsContainer h1, h2 {
    text-align: center;
}