@font-face { font-family: SuperSenior; src: url('../fonts/super_senior.otf'); }
@font-face { font-family: Coolvetica; src: url('../fonts/coolvetica.otf'); }
@font-face { font-family: CreatoDisplay; src: url('../fonts/creatodisplay.otf'); }
@font-face { font-family: CreatoDisplayBlack; src: url('../fonts/creatodisplayblack.otf'); }

html {
    color: black;
    overflow-x: hidden;
}

body {
    overflow-x: visible;
    background: url('../images/background.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Typography */
h1, h2, h3, .nav-link {
    font-family: CreatoDisplayBlack !important;
}

p {
    font-family: CreatoDisplay;
    font-size: 16px;
}

li {
    font-family: CreatoDisplayBlack;
}

a:link {
    text-decoration: none !important;
}

a:hover, a:active {
    color: #474747;
}

.card-body {
    font-family: CreatoDisplay !important;
}

.super-senior {
    color: white;
    font-family: SuperSenior;
    text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.creato-display-black {
    font-family: CreatoDisplayBlack;
}

.font-24 {
    font-size: 24px !important;
}

.menu-item {
    font-family: SuperSenior;
    font-size: 25px;
}

.list-item {
    font-family: CreatoDisplay !important;
    font-size: 16px;
}

.features {
    font-size: 16px;
}

.description-text {
    margin-bottom: 5px !important;
    padding-left: 10px;
    padding-right: 10px;
}

/* Navigation */

nav {
    color: #000000;
}

.nav-link:hover {
    color: #474747 !important;
}

/* Layout & Sections */

#balloonza-title {
    font-size: 4rem;
}

#bcreative-logo {
    max-width: 100px;
    max-height: 75px;
}

#feature_graphic {
    min-height: 225px;
}

#game-description {
    margin-top: 5px;
}

#play-text {
    font-size: 60px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 0px !important;
    text-align: center;
}

/* Download */

#download-container {
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.download-btn {
    padding: 10px;
}

/* Support / Q&A */

.qa-button {
    font-family: CreatoDisplay !important;
    text-align: left !important;
    --bs-btn-bg: #ffffff !important;
    --bs-btn-border-color: #ffffff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #d1d6dd !important;
    --bs-btn-hover-border-color: #d1d6dd !important;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: #d1d6dd !important;
    --bs-btn-active-border-color: #d1d6dd !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff !important;
    --bs-btn-disabled-bg: #ffffff !important;
    --bs-btn-disabled-border-color: #ffffff !important;
}

.qa-category-name {
    margin-top: 2rem !important;
}

/* Legal (Privacy / EULA) */

#privacy-policy, #eula {
    background-color: #ffffff7b;
    box-shadow: 0 -1px 0 #000;
}

.section-outline {
    background-color: white;
    outline: 2px solid black;
    padding: 10px;
    margin: 5px 0px 15px 0px;
}

/* Footer */

#footer-container {
    background-color: white;
    box-shadow: 0 -1px 0 #000;
}

#social-media-links {
    padding: 5px;
}

.social-media-icon {
    max-height: 50px;
    padding: 5px 5px;
}

.footer-content {
    color: black !important;
    font-size: 24px !important;
}

#bcreative {
    margin-bottom: 0 !important;
}

/* Error Page */

#error-title {
    font-size: 48px;
    margin-bottom: 0 !important;
}

#error-message {
    font-size: 28px;
}

/* Responsive — Mobile (< 667px) */

@media (width < 667px) {
    body {
        background-attachment: scroll;
    }

    #bcreative-logo {
        max-width: 50px;
        max-height: 37px;
    }

    #balloonza-title {
        font-size: 3rem !important;
    }

    .nav-link {
        font-size: 22px !important;
    }

    #balloonza-logo {
        max-width: 85%;
    }
}

/* Responsive — Desktop (>= 667px) */

@media (width >= 667px) {
    #press-title {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #press-info {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .nav-link {
        font-size: 30px !important;
    }

    p {
        font-size: 26px;
        padding: 10px;
    }

    .features {
        font-size: 26px !important;
    }

    .description-text {
        padding-left: 100px;
        padding-right: 100px;
    }
}