/* Fonts */
@import url(fonts.css?=v1);

.desktopFooter {
    background-color: #222;
    padding: 3vw;
}

.mobileFooter {
    background-color: #222;
    padding: 4.5vw;
}

.landingpageBackground {
    background-image: url(/assets/backgrounds/B4PFlashbackSHORTscaledCOMPRESSED.webp);
    background-size: cover;
    height: 100%;
    padding: 18vw;
}

.landingpageBackgroundMobile {
    background-image: url(/assets/backgrounds/backgroundAward.png);
    background-size: cover;
    background-position: center;
    height: 90vw;
    padding: 18vw;
}

.backgroundFallback {
    background-image: url(/assets/backgrounds/backgroundAward.png);
    background-size: cover;
    background-position: center;
}

.defaultSection {
    /* background: radial-gradient(#202020, #080808); */
    background-image: url(./assets/backgrounds/updatedB4PbackgroundBLUR.png);
    background-size: cover;
    padding: 1px;
}

.boredPrideLogo {
    background-size: 280%;
    transition: 1s ease;
    width: 50%;
}

.boredPrideLogo:hover {
    filter: hue-rotate(-100deg);
    scale: 105%;
}

.boredPrideLogoMobile {
    background-size: 280%;
    transition: 1s ease;
    width: 80%;
}

.boredPrideLogoMobile:hover {
    filter: hue-rotate(-100deg);
    scale: 105%;
}

.boredChapsLogo {
    width: 90%;
    transition: 1s ease;

}

.boredChapsLogo:hover {
    filter: hue-rotate(-100deg);
    scale: 105%;
}

.boredChapsLogoMobile {
    width: 45vw;
    transition: 1s ease;
    margin-top: 4.5vw;
}

.boredChapsLogoMobile:hover {
    filter: hue-rotate(-100deg);
    scale: 105%;
}

.socialIcon {
    width: 40%;
    margin-top: 0.5vw;
    transition: 1s ease;
}

.socialIcon:hover {
    scale: 115%;
}

.socialIconMobile {
    width: 6vw;
    margin-top: 5.5vw;
    transition: 1s ease;
}

.socialIconMobile:hover {
    scale: 115%;
}

.socialBox {
    margin-inline: -2.3vw;
}

.socialBoxMobile {
}

.boredChapsText {
    font-family: "BasementGrotesque", sans-serif;
    text-align: center;
    font-size: 3vw;
    color: white;
    padding-top: 2vw;
}

.baseText {
    font-family: "ITCAvantGarde";
    text-align: center;
    font-size: 1.2vw;
    padding: 0.1vw;
    color: white;
}

.bebasText {
    font-family: "Bebas", sans-serif;
    text-align: center;
    font-size: 5vw;
    color: white;
    margin-bottom: -2vw;
    margin-top: -2vw;
}

.bebasError {
    font-family: "Bebas", sans-serif;
    text-align: center;
    font-size: 8vw;
    color: white;
    margin-bottom: -5vw;
    margin-top: -5vw;
}

.bebasMobile {
    font-family: "Bebas", sans-serif;
    text-align: center;
    font-size: 8vw;
    color: white;
    margin-bottom: -5vw;
    margin-top: -1.5vw;
}

.textShadow {
    text-shadow: -0.1vw 0.1vw 0.8vw black;
}

.basicCounter {
    background-image: url(./assets/emptyCounter.png);
    background-size: cover;
    width: 50vw;
    height: 10vw;
}

.counterText {
    font-family: "mssansserifPixel";
    text-align: center;
    font-size:  6vw;
    color: red;
    text-shadow: 0vw 0vw 1vw rgba(255, 58, 58, 0.646);
}


/* Event Boxes */
.eventContainer {
    transition: 1s ease;
    font-family: "ITCAvantGarde";
    background-color: white;
    margin: 3vw;
    border-radius: 2vw;
    width: 60%;
    padding: 0.5vw;
    scale: 100%;
    text-decoration: none;
    color: #222;
}

.eventContainerMobile {
    transition: 1s ease;
    font-family: "ITCAvantGarde";
    background-color: white;
    margin: 10vw;
    border-radius: 2vw;
    width: 60%;
    padding: 0.5vw;
    scale: 150%;
    text-decoration: none;
    color: #222;
    position: relative;
}

.eventImage {
    /* background-image: url(./assets/backgrounds/getover.png); */
    background-size: cover;
    background-color: #222;
    height: 10vw;
    width: 10vw;
    border-radius: 2vw;

    /* Vertical Align */
    align-items: center;
    /* Horizontal Align */
    justify-content: center;
    /* Apply Align Flex */
    display: flex;

    text-align: center;
    color: white;
    margin: 1vw;
}

.eventTitle {
    font-family: "ITCBold";
    font-size: 2vw;
    margin-left: 8vw;
    margin-top: 1vw;
}

.eventDesc {
    margin-left: 8.1vw;
    font-size: 0.8vw;
    margin-right: 1.1vw;
}

.eventTime {
    font-family: "ITCAvantGarde";
    font-size: 1.5vw;
    /* Vertical Align */
    align-items: center;
    /* Horizontal Align */
    justify-content: center;
    /* Apply Align Flex */
    display: flex;
}

.eventTimeBox {
    background-color: #FFEE66;
    border-radius: 3vw;
    padding: 1vw;
    margin-top: 1vw;
}

.eventTimeSection {
    width: 28vw;
    margin-left: 1vw;
}

.eventTitleXL {
    font-family: "ITCBold";
    font-size: 2.5vw;
    margin-top: 2vw;
    margin-bottom: 5vw;
    text-align: center;
    position: relative;
}

.eventTimeXL {
    font-family: "ITCBold";
    font-size: 3vw;
    /* Vertical Align */
    align-items: center;
    /* Horizontal Align */
    justify-content: center;
    /* Apply Align Flex */
    display: flex;
}

.eventTimeBoxXL {
    background-color: #FFEE66;
    border-radius: 10vw;
    padding: 2vw;
    scale: 45%;
}

.eventTimeSectionXL {
    height: 100%;
    padding-top: 3.5vw;
    position: absolute;
}


.eventContainerXL {
    transition: 1s ease;
    font-family: "ITCAvantGarde";
    background-color: white;
    margin: 3vw;
    border-radius: 2vw;
    width: 60%;
    height: 11vw;
    padding: 0.5vw;
    padding-bottom: 12vw;
    scale: 100%;
    text-decoration: none;
    color: #222;
    opacity: 0%;
    position: relative;
    margin-top: -16%;
}

.eventContainerXL:hover {
    scale: 95%;
    opacity: 100%;
}

.eventTitleMobileXL {
    font-family: "ITCBold";
    font-size: 2vw;
    margin-top: 1.8vw;
    margin-bottom: 2vw;
    text-align: center;
    position: absolute;
}

.eventTimeMobileXL {
    font-family: "ITCBold";
    font-size: 2vw;
    /* Vertical Align */
    align-items: center;
    /* Horizontal Align */
    justify-content: center;
    /* Apply Align Flex */
    display: flex;
}

.eventTimeBoxMobileXL {
    background-color: #FFEE66;
    border-radius: 10vw;
    padding: 2vw;
    scale: 45%;
    width: 100%;
}

.eventTimeSectionMobileXL {
    height: 100%;
    padding-top: 3.5vw;
    position: relative;
    opacity: 100%;
}

.eventContainerMobileXL {
    transition: 1s ease;
    font-family: "ITCAvantGarde";
    margin: 10vw;
    border-radius: 2vw;
    width: 60%;
    height: 12vw;
    padding: 0.5vw;
    scale: 150%;
    text-decoration: none;
    color: #222;
    opacity: 0%;
    position: relative;
    margin-top: -23.5%;
    background-color: white;
}

.eventContainerMobileXL:hover {
    scale: 145%;
    opacity: 100%;
}