:root {
    --bg-color: rgb(29, 29, 29);
    --link-color: rgb(98, 98, 240);
    --link-hover-color: rgb(163, 163, 248);
    --fg-color: rgb(51, 51, 51);
    --text-color: rgb(230, 230, 230);
    --muted-text-color: rgb(150, 150, 150);
    --search-include: rgb(71, 194, 71);
    --search-exclude: rgb(189, 31, 31);
}

body {
    border: 0;
    padding: 0;
    margin : 0;
    background-color: var(--bg-color);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--text-color);
    font-size: 18px;
    background-image: url('../images/background.webp');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: none;
    color: var(--link-hover-color);
}

.logo {
    content:url("../images/elemental_creatures_logo.webp");
    max-height: 100px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .logo {
        max-height: 50px;
    }
}

h1 {
    font-size: 36px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 10px;
}

#footer {
    margin-top: 50px;
    font-size: 14px;
    color: var(--muted-text-color);
    text-align: center;
}

#error {
    color: red;
    text-align: center;
}

.header-spacer {
    height: 80px;
}

@media (max-width: 900px) {
    .header-spacer {
        height: 60px;
    }
}

.freestanding-image-wrapper {
    max-width: 300px;
    margin: auto;
}

.freestanding-image-img {
    width: 100%;
}

.site-button {
    border-radius: 15px;
    padding: 0px 20px 0px 20px;
    height: 30px;
    text-align: center;
    background: none;
    color: var(--text-color);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: blue;
    font-size: 18px;
    border: 2px solid white;
    margin: auto;
    cursor: pointer;
}

/* HERO STUFF */

.hero-content-box {
    max-width: 800px;
    margin: auto;
    margin-bottom: 50px;
}

@media (max-width: 799px) {
    .hero-content-box {
        max-width: 95%;
    }
}

.hero-content-box-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.hero-content-box-image-div {
    max-width: 300px;
}

.hero-content-box-img {
    max-width: 100%;
    height: auto;
}

.hero-content-box-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}

.horizontal-bar {
    height: 1px;
    background-color: var(--fg-color);
    flex: 1;
}

.hero-content-box-title {
    font-size: 24px;
    text-align: center;
    color: var(--text-color);
}

.hero-content-box-blurb {
    font-size: 14px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    letter-spacing: 4px;
    line-height: 24px;
    max-width: 80%;
    color: var(--muted-text-color);
    margin: auto;
}

.standalone-flex-image {
    max-width: 100%;
}

/* OFFICIAL TOURNAMENTS */

.upcoming-tournament-table {
    max-width: 800px;
    margin: auto;
}

.upcoming-tournament-table tr, td{
    padding: 15px;
}

/* HOW TO PLAY */

#howto-wrapper {
    max-width: 800px;
    margin: auto;
}

#howto-wrapper p, li {
    line-height: 25px;
}

.howto-section-title {
    font-size: 38px;
    font-style: italic;
    text-align: center;
    border-top: 1px solid yellow;
    border-bottom: 1px solid yellow;
}

.howto-section-subtitle {
    font-size: 30px;
    text-align: center;
    font-style: italic;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    #howto-wrapper {
        max-width: 90%;
        font-size: 14px;
    }

    .howto-section-title {
        font-size: 28px;
    }

    .howto-section-subtitle {
        font-size: 24px;
    }
}

.howto-yellow {
    background-color: rgb(65, 65, 65);
    border-radius: 8px;
    padding: 10px;
    color: yellow;
}

.howto-full-length-img {
    width: 100%;
    height: auto;
}

.highlight-yellow {
    color: yellow;
}

.highlight-frontline {
    color: rgb(255, 0, 76);
}

.highlight-sideline {
    color: rgb(101, 206, 255);
}

.highlight-white {
    color: var(--text-color);
}

.highlight-red {
    color: red;
}

.highlight-green {
    color: green;
}

/* DECK BUILDER SEARCH */



#search {
    width: 530px;
    margin: auto;
}

.search-options {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.search-object {
    border: 1px solid var(--fg-color);
    border-radius: 5px;
    padding: 3px;
}

.search-object-include {
    background-color: var(--search-include);
}

.search-object-exclude {
    background-color: var(--search-exclude);
}

@media (max-width: 900px) {
    #search {
        width: 95%;
        margin: auto;
    }
}

#results {
    padding-top: 20px;
    max-width: 750px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 5px;
    margin: auto;
}

@media (max-width: 799px) {
    #results {
        max-width: 95%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 5px;
        margin: auto;
    }
}

/* MY ACCOUNT */

.my-account-centered {
    max-width: 500px;
    margin: auto;
}

.my-account-row {
    width: 100%;
    margin-bottom: 20px;
}

.my-account-info {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(255, 128, 128);
}

@media (max-width: 900px) {
    .my-account-centered {
        max-width: 95%;
    }
}











.result-card{
    cursor: pointer;
    width: 100px;
}

.result-card-img {
    width: 100px;
    height: auto;
}

.card-modal {
    width: 500px;
    border: 0;
    background-color: var(--fg-color);
}

.card-modal-img {
    width: 500px;
    height: auto;
}

.close-modal-button {
    border: 1px solid var(--text-color);
    padding: 5px;
    border-radius: 5px;
    margin: auto;
    margin-bottom: 5px;
    text-align: center;
    font-size: 32px;
    color: var(--text-color);
    cursor: pointer;
    width: 80%;
}

@media (max-width: 799px) {
    .card-modal {
        width: 300px;
        border: 0;
        background-color: var(--fg-color);
    }
    .card-modal-img {
        width: 300px;
        height: auto;
    }
}

/* CARD ELEMENTS */

.element-fire {
    background-color: red;
}.element-water {
    background-color: blue;
}.element-ice {
    background-color: lightblue;
    color: var(--fg-color);
}.element-air {
    background-color: rgb(179, 179, 179);
    color: var(--fg-color);
}.element-electric {
    background-color: yellow;
    color: var(--fg-color);
}.element-rock {
    background-color: brown;
}.element-dark {
    background-color: rgb(54, 54, 54);
}.element-spirit {
    background-color: purple;
}.element-nature {
    background-color: green;
}.element-omni {
    background-color: white;
    color: var(--fg-color);
}

.effect-type {
    font-size: 14px;
}

.search-element {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
}

.search-species {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
}

/* HOW TO PLAY */

.howtoplay-card {
    max-width: 60%;
    margin: auto;
}

.howtoplay-img {
    width: 100%;
    height: auto;
}

@media (max-width: 799px) {
    .howtoplay-card {
        max-width: 100%;
    }
}

/* LOGIN */

#login {
    max-width: 400px;
    padding: 50px;
    margin: auto;
    background-color: var(--fg-color);
    border: 1px solid var(--text-color);
    margin-top: 50px;
}

#login input[type="textbox"], input[type="password"], textarea {
    width: 100%;
    background: radial-gradient(circle, rgba(235, 235, 235, 1) 0%, rgba(158, 158, 158, 1) 100%);
}

#login textarea {
    margin-top: 10px;
    min-height: 150px;
}

@media (max-width: 799px) {
    #login {
        max-width: 90%;
    }
}

/* HERO SHOTS HOMEPAGE */

#hero-bottom-left {
    position: absolute;
    left: -30px;
    bottom: -30px;
    width: 80px;
}

.hero-bottom-left-img {
    width: 100%;
    height: auto;
}
#hero-top-right {
    position: absolute;
    right: -40px;
    top: -20px;
    width: 80px;
}

.hero-top-right-img {
    width: 100%;
    height: auto;
}

/* Under Construction*/

.under-construction {
    width: 90%;
    max-width: 500px;
    margin: auto;
}

.under-construction-img {
    width: 100%;
    height: auto;
}

.yt-logo {
    width: 40px;
    height: auto;
}