/* GLOBAL STYLING */
img {
    width: 100%;
    height: auto;
}

/* NAV BAR STYLING */
.navbar{
    height: 132px;
    flex-shrink: 0;
    background: var(--primary-light, #F6F6ED);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.20);
    align-items: center;
}

#navbarNavDropdown{
    background-color: #F6F6ED;
    padding: 12px;
}
#navbarNavDropdown .nav-item{
    padding: 2px;
}


.dropdown-toggle{
    color: var(--primary-blue, #3FACCE);
    text-align: center;
    /* Li a_LG Navigation */
    font-family: 'Enriqueta';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
    letter-spacing: -0.46px;
    justify-content: space-between;
}

.dropdown-toggle:hover{
    background: var(--primary-blue, #3FACCE);
    color: var(--primary-light, #F6F6ED);
}

.dropdown-menu{
    color: var(--primary-blue, #3FACCE);
}

.dropdown-item{
    font-weight: 700;
    background: var(--secondary-gold, #FEC955);
    display: inline-flex;
    padding: 14px 60px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 10px;
}

.dropdown-item:hover{
    background: var(--primary-blue, #3FACCE);
    color: var(--secondary-gold, #FEC955);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.20);
}

.settingsBtn{
    display: flex;
    width: 204px;
    height: 60px;
    padding: 12px;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #F6F6ED;
    background: var(--secondary-gold, #FEC955);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
    font-family: Enriqueta;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    color: var(--greyscale-black-0, #242424);
    justify-content: center;
}

.settingsBtn:hover{
    border: 1px solid var(--primary-light, #F6F6ED);
    background: var(--greyscale-black-1, #C8C8C8);
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 12px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.settingsBtn:active{
    background: #242424;
}

/* PAGE BG IMAGES */
.jumbotron-hills{
    background-image: url('Images/base.webp');
    background-size: cover no-repeat;
    height: 400px;
    background-position-y: -150px;
}
.join-container{
    background-image: url('Images/inheritance.webp');
    background-size: cover no-repeat;
    background-position-y: -100px;
    padding:24px;
}
.footerJumbo{
    background-image: url('Images/adventures.webp');
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    background-position-y: -150px;
}


/* Overview Card */
.overview-explain{
    position: relative;
    margin-top: 0;
    background: var(--primary-light, #F6F6ED);
}
.overview-explain .card{
    background: var(--tertiary-fog, #E3EDEB);
    border: 1px solid var(--tertiary-fog, #E3EDEB);
    border-radius: 0;
}

.overview-explain .card-overview img{
   padding: 20px;
}

.overview-explain .card .card-title{
    color: var(--primary-blue, #3FACCE);
}

.caligraphy-wrapper {
    display: block;
    position: absolute;
    bottom:0px;
    right: 0px;
    width: 150px;
    z-index: 2;
    transform: scaleY(-1);
}

.overview-explain .card-body{
    margin: 0 24px;
}

/* Benefits Cards */
.digitalBenefits{
    z-index: 1;
    margin: 0;
}

.benefits-container .card{
    background-color: #F6F6ED;
    border: 1px solid var(--primary-light);
}

/* Phases Cards */
.phases-container .card{
    background-color: #F6F6ED;
    border: 1px solid var(--primary-light);
}

.phases-container .card-body{
    height: 280px;
    display:flex;
    justify-content: center;
}
.rules .card-body{
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--tertiary-fog, #E3EDEB);
}
/* Join Card */

.form-signin .card{
    margin:auto;
    padding: 24px;
    background-color: #F6F6ED;
    border: 1px solid var(--primary-light);
  
}
.form-signin label{
    color:#242424;
}
.form-signin h2{
    color: #3FACCE;
}
.form-signin a{
    text-decoration: none;
    color:#242424;
    font-weight: 700;
}
.form-signin a:hover{
    color: #3FACCE;
}
@media screen and (max-width: 1080px){
    .form-signin .card{
        min-width: 294px;
    }

}
/* News Cards */
.news-container{
    max-width: 1080px;
    margin: auto;
}
.news-container .card{
    display: flex;
    height: 412px;
    position: relative;
    border: 0px;
}
.card-img-overlay{
    display: block;
    width: 100%;
    height: 200px;
    background: var(--primary-light, #F6F6ED);
    opacity: 95%;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
}

.dateBox{
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: #242424;
    padding: 12px;
    opacity: 75%;
    width:50%;
}

.card-img-overlay:hover{
    border-radius: 0px 0px 10px 10px;
    background: #FEC955;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.20) inset;
}

.card-img-1{
    background-image: url('Images/Dominion_900.jpg');
    background-size: cover;
    height:696px;
    border-radius: 0px 0px 10px 10px;
}
.card-img-2{
    background-image: url('Images/125Barkeep-820x564-1.jpg');
    background-size: cover;
    height:696px;
    border-radius: 0px 0px 10px 10px;
}


/* Game State Styling */
.gameState{
    min-height: 700px;
}
.leaderboards{
    background: #E3EDEB;
    width: 100%;
    height: auto;
    min-height: 700px;
}
.editions-container{
    background: var(--primary-light, #F6F6ED);
    width: 100%;
    height: auto;
    min-height: 700px;
}
.list-group{
    max-width: 400px;
    display: flex;
}

.editions-List .list-group{
    max-width: 400px;
    display: flex;
    align-items: flex-start;
    margin: 12px;
}
.form-check-input{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.form-check-input:checked{
    background: #FEC955;
    border-color: rgba(0, 0, 0, 0);
}
.editions-List .list-group-item{
    width: 100%;
    background-color: #F6F6ED;
    display: flex;
    border:0px;
}

.list-group-item.disabled{
   background-color: var(--greyscale-50-black-0, rgba(36, 36, 36, 0.50));
}

/* Buy Expansions Styling */
.goldenButton{
    display:block;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background-color: var(--secondary-gold, #FEC955);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin: auto;
}

.buy-container{
    width: 100%;
}

/* Footer styling */
.footer-main{
    width: 100%;
    background-color: #F6F6ED;
}

.footer-main .container{
    height: auto;
}

.footer-main img{
    min-width: 250px;
}


/* BUTTON STLYING */
button, .mainBtn{
    display: inline-flex;
    padding: 1px 36px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding:12px;
    border-radius: 10px;
    border: 1px solid var(--tertiary-fog, #E3EDEB);
    background: var(--primary-light, #F6F6ED);
    color: var(--primary-blue, #3FACCE);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
    font-family: 'Enriqueta', serif;
    font-weight: 700;
}

button, .mainBtn:hover{
    border-radius: 10px;
    border: 1px solid var(--tertiary-fog, #E3EDEB);
    background: var(--primary-blue, #3FACCE);
    color: var(--secondary-gold, #FEC955);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

button, .mainBtn:active{
    border: 1px solid var(--tertiary-fog, #E3EDEB);
    background: var(--primary-light, #F6F6ED);
    color: var(--secondary-gold, #FEC955);
}

.bigBtn{
    width:100%;
    display: inline-flex;
    padding: 20px 80px;
    color:#242424;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--greyscale-black-1, #C8C8C8);
    background: var(--secondary-gold, #FEC955);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.bigBtn:hover{
    background:#F6F6ED;
    color: #FEC955;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.bigBtn:active{
    background: var(--primary-blue, #3FACCE);
    color:#F6F6ED ;
}
.benfitsButton{
    width: 100%;
    align-items: center;
    justify-content: center;
}

.navbar-toggler{
    border: 0px;
}

.special{
    background-color: #FEC955;
    color: #242424;
}

.special:hover{
    background-color: #E3EDEB;
    color:#3FACCE;
}
/* TYPOGRAPHY */
h1{
    color: #3FACCE;
    font-family: 'Fondamento', cursive;
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 108px */
    letter-spacing: -1.656px;
}

.news, .gamePhases h1{
    text-align: center;
}

h2{
    color:  #3FACCE;
    text-align: center;
    font-family: 'Fondamento', cursive;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 60px */
    letter-spacing: -0.92px;
}
.news h2{
    text-align: left;
    color: var(--primary-blue, #3FACCE);
}
.leaderboards h2{
    text-align: left;
}
.list-group-item.disabled h2{
    color: #242424;
}

h3{
    color: var(--primary-blue, #3FACCE);
    font-family: 'Fondamento', cursive;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 150%; /* 36px */
    letter-spacing: -0.552px;
}

.news h3{
    text-align: left;
    color: var(--greyscale-black-0, #242424);
}

p{
    color: var(--greyscale-black-0, #242424);
    font-family: 'Enriqueta', serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: -0.46px;
}
.caption{
    color: var(--secondary-gold, #FEC955);
    font-family: 'Enriqueta', serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: -0.46px;
}
.form-signin .caption{
    text-align: center;
    display: block;
}
.gameState .caption{
    background: var(--tertiary-fog);
    color:#242424;
}
li a{
    color: var(--greyscale-black-0, #242424);
    text-align: center;
    font-family: 'Enriqueta', serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 150%; /* 30px */
    letter-spacing: -0.46px;
}
.footer-main li a{
    text-align: left;
    color:#3FACCE;
}

/*SVG Elements*/
.separator{
    background: url("Icons/Game-Icons/Redesign/Outlined-SVG/separatorAsset1.svg");
    width: 180px;
    height: 5px;
    background-repeat: no-repeat;
    padding-bottom: 12px;
    display:block;
}
.gear{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Gear.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
}

.landscape{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Land.svg');
    width: 150px;
    height: 150px;
    display: block;
}

.potion{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Potion.svg');
    width: 150px;
    height: 150px;
    display: block;
}

.sword{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Swords.svg');
    width: 250px;
    height: 250px;
    display: block;
    justify-items: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.coin{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Coin.svg');
    width: 250px;
    height: 250px;
    display: block;
    justify-items: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.trash{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823.svg');
    width: 250px;
    height: 250px;
    display: block;
    justify-items: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.treasure{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Treasure.svg');
    width: 100px;
    height: 100px;
    display: block;
    margin:auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 10px;

}

.flag{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Flag.svg');
    width: 60px;
    height: 60px;
    display: block;
    justify-items: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.leaf{
    background: url('Icons/Game-Icons/Redesign/Generated_icons-0823_Leaf.svg');
    width: 313px;
    height: 115px;
    display: block;
    position: absolute;
}

.topDeco{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Top-OrnamentAsset-1.svg');
    width: 100%;
    height: 60px;
}

.crown{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Crown.svg');
    width: 80px;
    height: 80px
}

.estate{
    background: url('Icons/Game-Icons/Redesign/Outlined-SVG/Generated_icons-0823_Estate.svg');
    width: 80px;
    height: 80px
}

@media screen and (max-width: 1080px) {
    .caligraphy-wrapper, .leaf {
        display: none;
    }    
}