@font-face {
    font-family: "Garnett";
    font-style: normal;
    font-weight: 700;
    src: url("/Garnett-Bold.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "GT America Bold";
    font-style: normal;
    font-weight: 700;
    src: url("/GT-America-Expanded-Bold.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "GT America";
    font-style: normal;
    font-weight: 400;
    src: url("/GT-America-Extended-Medium.woff2") format("woff2");
    font-display: swap
}
@font-face {
    font-family: "TT-trailers";
    font-style: normal;
    font-weight: 400;
    src: url("tt_trailers_bold-webfont.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Fraktion";
    font-style: normal;
    font-weight: 400;
    src: url("FraktionMono-Medium.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Betatron";
    font-style: normal;
    font-weight: 400;
    src: url("Betatron-Regular.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Attila";
    font-style: normal;
    font-weight: 400;
    src: url("AttilaSansUniform-Black.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Attila_bold";
    font-style: normal;
    font-weight: 400;
    src: url("AttilaSansUniform-Bold.woff2") format("woff2");
    font-display: swap
}

:root {
    --page-bg-color: #1d1d1d;
    --text_color:  #00FF84;
    --success_color:  #008315;
    --fail_color:  #5c2529;
    --standardTextFont: 'GT America';
    --TitlesFont: 'Garnett';
}
.trailerFont { 
    font-family: 'TT-trailers';
    font-size: 1.5em;
}

.attlia { 
    font-family: 'Attila';
}
.attlia_bold{
    font-family: 'Attila_bold';
}

.frakton { 
    font-family: 'Fraktion';
}
.goldenera {
    --text_color: #faad17;
}
.limegreen {
    --text_color: #D6FF64;
}
.bossManPink {
    --text_color: #FED5D1;
}
.thatblue {
    --text_color: #CDFFED;
}
.purple{
    --text_color: #CFB1FB;
}
.invert {
    --text_color: #1d1d1d;
    --page-bg-color: #E0E0E2;
}

html, body {
    font-family: var(--standardTextFont);
    background-color: var(--page-bg-color);
    color: var(--text_color);
}
h1,h2,h3,h4,h5,h6 {
   font-family: var(--TitlesFont);
}
.main_navigation nav {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}
.content_wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 900;
    padding: 1em;
    gap: 1em;
    margin-bottom: 5em;
}
.navigation_item_wrapper {
    align-items:end;
    background-color: var(--text_color);
    color: var(--page-bg-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin: 0;
    height: 80px;
    pointer-events: all;
    position: relative;
    transition: background .3s ease-in-out,border .3s ease-in-out,color .3s ease-in-out,filter .3s ease-in-out;
    padding: 0 20px;
    width: 100%;
    border-radius: 15px;
}
.navigation_item_wrapper.home {
    height: auto;
    background: var(--page-bg-color);
    margin: 1em;
    margin-bottom: 0;
    color: var(--text_color);
    padding: 10px;
    border: 1px solid var(--text_color);
    border-radius: 15px 25px 25px 15px;
}
.nav_icon::before {
    content: '_record';
    font-size: inherit;
    display: block;
}
span.nav_item_text {
    font-size: 4.5em;
    position: absolute;
    bottom: -30px;
    left: 0;
}
h4.nav_icon {
    display: flex;
    align-items: baseline;
    font-size: 4em;
    transform: skew(-10deg);
    margin-bottom: 0;
    line-height: .5;
}
.nav_icon::before {
    content: '_record';
    font-size: .35em;
    display: flex;
}
.navigation_item_wrapper:hover {
    background-color: var(--page-bg-color);
    color: var(--text_color);
}
.navigation_item_wrapper:hover span.nav_item_text {
    -webkit-text-stroke: 1px var(--text_color);
    color: var(--page-bg-color);
}
span.call_to_action {
    color: var(--text_color);
}
.navigation_item_wrapper:hover span.call_to_action {
    z-index: 100;
}

.team_outerWrapper {
    width: 100%;
    border: 1px solid var(--text_color);
    border-radius: 16px;
}
.navigation_item_wrapper.active .call_to_action {
    opacity: 0;
}
.nav_item_text {
    font-family: "Betatron";
}
.navigation_item_wrapper.active span.nav_item_text {
    top: -40px;
    opacity: 0.5;
    -webkit-text-stroke: 1px var(--text_color);
    color: var(--page-bg-color);
    transition: all .3s ease-in
}
.navigation_item_wrapper.active {
    background-color: var(--page-bg-color);
    color: var(--text_color);
}
.navigation_item_wrapper.active h4.nav_icon {
    font-size: 3em;
}

.navigation_item_wrapper.active .nav_icon::before{
    content: '_your Actual Record'
}
.alternative_record_toggle {
    height: auto;
    transition: all .4s ease-in;
}
.record_toggleBody {
    padding: 1em;
    color: var(--text_color);
}
.padding {
    padding: 2em;
}
.alt_record_wrappers {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: space-between;
}
.alt_record_detail_wrapper {
    padding: 1em;
    border: 1px solid var(--text_color);
    width: 30%;
    border-radius: 15px;
    cursor: pointer;
}
.alt_record_header {
    display: grid;
}
.alt_record_detail_wrapper:not('active'):hover {
    background: var(--text_color);
    color: var(--page-bg-color);
}
.inlineFeatureText {
    display: flex;
    align-items: center;
    gap: 10px;
}
.plusMinus {
    border: 1px solid var(--text_color);
    padding: 0.25em;
    border-radius: 10px;
}
.class_bold_text {
    font-family:  "GT America Bold";
    font-weight: 700;
}
.individualGame {
    display: grid;
    grid-template-columns: 2.5fr 1fr; 
    gap:5px; 
    padding: 0.5em;
    border: 1px solid var(--text_color);
    margin-bottom: 2.5em;
    border-radius: 10px;
    position: relative;
}
.game_by_game.active {
    margin-top: 2em;
}
.weekNumber {
    position: absolute;
    top: -20px;
    width: 100%;
    text-align: center;
}
.weekNumber span {
    padding: 0.5em;
    background: var(--text_color);
    border-radius: 25px;
    color: var(--page-bg-color);
}
.BagGuysScore, .GoodGuysScore {
    text-align: right;
    font-family: "Garnett";
}
.result_icon {
    position: absolute;
    left: 44%;
    padding: 1em;
    font-family: 'GT America Bold';
    border: 1px solid;
    border-radius: 30px;
    backdrop-filter: blur(2px);
    background-color: rgba(255, 255, 255, 0.25);
}

.colorSwitchIcon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.colorSwitchIcon.goldenera {
    background: var(--text_color);
}
.colorSwitchIcon.limegreen {
    background: #D6FF64;
}
.colorSwitchIcon.bossManPink {
    background: var(--text_color);
}
.colorSwitchIcon.thatblue {
    background: var(--text_color);
}
.colorSwitchIcon.purple {
    background: var(--text_color);
}
.colorSwitchIcon.spin {
    border: 1px solid var(--text_color);
}
.colorSwitcher {
    position: absolute;
    right: 1.75em;
    top: 1.5em;
    z-index: 1500;
    display: flex;
    cursor: pointer;
}
.colorSwitcher .colorSwitchIcon {
    margin-left: -15px;
    transition: margin-left .5s ease-in;
}
.colorSwitcher .colorSwitchIcon:first-child {
    margin-left: 0;
    transition: margin-left .5s ease-out;
}

.colorSwitcher:hover .colorSwitchIcon {
    margin-left: 5px;
    transition: margin-left .5s ease-out;
}
/* Start of College Stuff */

.game_body .content_wrapper {
    margin-bottom: .5em;
}
.information_wrapper_mobile {
    display: none;
}
.Game_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2em;
}
.svg_wrapper svg {
    fill: var(--text_color);
}
.welcomeBox {
    border: 1px solid var(--text_color);
    padding: 1em;
    border-radius: 1em;
    font-size: 2.5em;
}
.scoreboard {
    padding: 0.5em;
    font-size: 5em;
    border: 1px solid var(--text_color);
    border-radius: 2rem;
    padding-top: 0.25em;
    margin-bottom: .5rem;
    display: flex;
    justify-content: center;
}
.btn-action {
    width: 100%;
    margin-top: 0.5em;
    background: transparent;
    border: 1px solid var(--text_color);
    color: var(--text-color);
    border-radius: 20px;
    backdrop-filter: blur(10px); /* Adjust the blur radius as needed */
    -webkit-backdrop-filter: blur(10px); /* For some browsers, use the -webkit- prefix */
  
}
.smaller_font {
    font-size: .25em;
    line-height: .5;
}
.innerScoreboard {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rules {
    font-size: .75em;
    border-top: 1px solid var(--text_color);
    padding-top: 1rem;
}
.welcomeBox.smaller {
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    transition: all ease-out 1s;
    height: 0;
}
.toggle_wrapper {
    border: 1px solid var(--text_color);
    border-radius: 2rem;
    overflow: hidden;
    width: 100%;
    height: fit-content;
}
.toggle_header {
    padding: 1rem;
}
.toggle_inner_wrapper {
    display: flex;
    justify-content: space-between;
}
.face {
    position: absolute;
    right: -5em;
    bottom: -10px;
}
.toggle_body {
    position: relative;
    min-height: 70vh;
    border-top: 1px solid var(--text_color);
}
.Number {
    position: absolute;
    right: 0;
    top: -5rem;
    font-size: 50em;
    pointer-events: none;
    opacity: .5;
    line-height: .9;
}
.details {
    padding: 0 2em;
    position: relative;
    z-index: 1;
}
.detail_value {
    font-size: 3em;
}
.details_item {
    display: flex;
    flex-direction: column;
    line-height: .9;
    margin-bottom: 1rem;
}
.toggle_body_inner {
    margin-top: 2rem;
}
.inner_form_wrapper {
    display: flex;
    width: 60%;
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 1rem;
    font-size: 1.5em;
    position: relative;
}
.inner_form_wrapper input {
    border: 2px solid var(--text_color);
    background: transparent;
    color: var(--text_color);
    padding: 0.5em;
    border-radius: 0.5em;
}
.inner_form_wrapper .btn-action {
    padding: 1em;
}
.btn-action:hover {
    background: var(--text_color);
    color: var(--page-bg-color);
    transition: all ease .4s;
}
.smaller.hide {
    display: none;
}
.players_completed {
    border: 1px solid var(--text_color);
    margin-top: 1rem;
    border-radius: 1rem;
}
.college_result {
    display: flex;
    justify-content: space-between;
    padding: .5em;
}
.session_header {
    padding: .5em;
    border-bottom: 1px solid var(--text_color);
    margin-bottom: 0.5em;
}
.session_footer {
    padding: 0.5em;
    text-align: center;
    border-top: 1px solid var(--text_color);
    margin-top: 1em;
}
.session_result {
    width: 1.5em;
    height: 1.5em;
   
    display: flex;
    align-items: center;
    justify-content: center;
}
.session_result.correct {
    background: url('checkmark.png') center/contain no-repeat;
}

.session_result.fail {
    background: url('wrong.png') center/contain no-repeat;
}
.MessageWrapper.fade_out {
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: all ease-out .5s;
}
.filter_wrapper {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.filter_wrapper.fade_in {
    opacity: 1;
    height: auto;
    transition: all 1s ease-in .5;
}
.inner_form_filter_wrapper {
    font-size: .5em;
}
.mc_answers_wrapper label {
    padding: .25em .5em;
    border: 1px solid var(--text_color);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: .5em;
    width: 100%;
}
.mc_answers_wrapper label:hover, .mc_answers_wrapper label.selected {
    color: var(--page-bg-color);
    background: var(--text_color);
}

.mc_answers_wrapper input[type="radio"] {
    display: none;
}
.mc_answers_wrapper {
    padding-bottom: 1em;
    border-bottom: 1px solid var(--text_color);
    margin-bottom: 1em;
}
.mc_answers_wrapper select {
    width: 100%;
    padding: 0.25em 0.5em;
    background: var(--page-bg-color);
    color: var(--text_color);
    border: 1px solid var(--text_color);
    border-radius: 10px;
}
span.intext_action {
    text-decoration: underline;
    cursor: pointer;
}