@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  

    --header-background-color: #5a5858;
    --header-navigation-color: #fff;
    --logo-text-color: #fff;
    --hero-background-color: #E5E5CB;
    --button-background-color: #e05454;
    --button-text-color: #fff;
    --invert-button-background-color: #fff;
    --invert-button-text-color: #000;
    --heading-text-color: #000;
    --footer-background-color: #435d88;
    --footer-navigation-color: #fff;
    --single-game-background-color: #524d49;
  }
  
  body {
      margin: 0;
      overflow-x: hidden;
        font-family: "Fira Sans Condensed", sans-serif;
  }
 input,textarea,button {
   font-family: "Fira Sans Condensed", sans-serif !important;
 }
  textarea:focus, input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus 
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus, .uneditable-input:focus {

    border-color: #5333ee;
    box-shadow: none;
    outline: 0 none;
}
  
  .w-auto {width: auto;}
  .w-fill-available {width: -webkit-fill-available;}
  .w-10 {width: 10%}
  .w-15 {width: 15%}
  .w-20 {width: 20%}
  .w-25 {width: 25%}
  .w-30 {width: 30%}
  .w-33 {width: 33%}
  .w-40 {width: 40%;}
  .w-50 {width: 50%;}
  .w-60 {width: 60%;}
  .w-65 {width: 65%;}
  .w-70 {width: 70%}
  .w-75 {width: 75%}
  .w-80 {width: 80%}
  .w-83 {width: 83%}
  .w-90 {width: 90%}
  .w-73 {width: 73% !important;}
  .w-100 {width: 100% !important;}
  
  .font-small { font-size: small; }
  .font-x-small { font-size: 14px; }
  .font-smaller { font-size: smaller; }
  .font-medium { font-size: medium; }
  .font-small-medium { font-size: 15px; }
  .font-large { font-size: large; }
  .font-larger { font-size: larger; }
  .font-x-large {font-size: x-large;}
  .font-xx-large {font-size: xx-large}
  .font-xxx-large { font-size: xxx-large;}
  .font-xl-large {font-size: 3rem;}

  .fw-bold {font-weight: bold;}
  .fw-bolder {font-weight: bolder;}

  .fw-100 {font-weight: 100;}
  .fw-200 {font-weight: 200;}
  .fw-300 {font-weight: 300;}
  .fw-400 {font-weight: 400;}
  .fw-500 {font-weight: 500;}
  .fw-600 {font-weight: 600;}
  .fw-700 {font-weight: 700;}
  .fw-800 {font-weight: 800;}
  .text-capitalize {text-transform: capitalize;}
  .text-uppercase {text-transform: uppercase;}
  
  
  .gap-1 { gap: 1rem;  }
  .gap-2 { gap: 2rem;  }
  .gap-3 { gap: 3rem;  }
  .gap-5 { gap: 5px;  }
  .gap-10 { gap: 10px;  }
  .gap-15 { gap: 15px;  }
  .gap-20 { gap: 20px;  }
  .gap-30 { gap: 30px;  }
  .gap-40 { gap: 40px;  }
  .gap-50 { gap: 50px;  }

  .d-flex {display: flex}
  .flex-row {flex-direction: row}
  .flex-column {flex-direction: column}
  .flex-1 {flex: 1}
  .z-index-1 {z-index: 1}
.w-fit {width: fit-content;}
  .bottom-0 {bottom:0;}
  .clr-white {color: white;}
  .clr-black {color: black;}
  .clr-gold {color: gold;}

  .d-contents {display: contents}
  .max-width-700 {max-width: 700px;}
  .text-end {text-align: end;}
  
  .align-items-center {align-items: center}
  .align-items-start {align-items: flex-start;}

  .flex-wrap-w {flex-wrap: wrap;}
  .d-block {display: block;}

  .justify-content-center {justify-content: center}
  .justify-content-space-evenly { justify-content: space-evenly;}
  .justify-content-space-around { justify-content: space-around;}
  .justify-content-space-between { justify-content: space-between;}
  .justify-content-space-end { justify-content: end;}
  
  .position-relative {position: relative;}
  .position-absolute {position: absolute;}
  
  .line-height-1 {line-height: 1.5}
.overflow-hidden {
  overflow: hidden;
}
.max-100 {max-width: 100%;}
.margin-start {margin-block-start:0;}
.margin-end {margin-block-end:0rem;}
  .t-center {display: table; margin: 0 auto}
  .b-center {display: block; margin: 0 auto}
  .text-center {text-align: center;}
  .text-decoration-none {text-decoration: none;}
  .text-justify {text-align: justify;}
  .text-white {color: white}
  .list-style-none {list-style-type: none;}

  .text-secondary-light {
    color: var(--secondary-light);
  }

  .d-grid {display: grid;}
  .grid-column-template {grid-template-columns: 1fr 1fr;}

  
  .p-0 {padding: .5rem;}
  .p-1 {padding: 1rem}
  .p-2 {padding: 1.5rem}
  .p-3 {padding: 2rem}
  .p-4 {padding: 2.5rem}
  .p-5 {padding: 3rem}
  
  .pt-0 {padding-top: .5rem}
  .pt-1 {padding-top: 1rem}
  .pt-2 {padding-top: 1.5rem}
  .pt-3 {padding-top: 2rem}
  .pt-4 {padding-top: 2.5rem}
  .pt-5 {padding-top: 3rem}
  .pt-6 {padding-top: 3.5rem}
  .pt-7 {padding-top: 4rem}

  .pl-0 {padding-left: .5rem}
  .pl-1 {padding-left: 1rem}
  .pl-2 {padding-left: 1.5rem}
  .pl-3 {padding-left: 2rem}
  .pl-4 {padding-left: 2.5rem}
  .pl-5 {padding-left: 3rem}
  .pl-6 {padding-left: 3.5rem}
  .pl-7 {padding-left: 4rem}

  .pr-0 {padding-right: .5rem}
  .pr-1 {padding-right: 1rem}
  .pr-2 {padding-right: 1.5rem}
  .pr-3 {padding-right: 2rem}
  .pr-4 {padding-right: 2.5rem}
  .pr-5 {padding-right: 3rem}
  .pr-6 {padding-right: 3.5rem}
  .pr-7 {padding-right: 4rem}
  .pr-10 {padding-right: 7rem}

  .pb-0 {padding-bottom: .5rem}
  .pb-1 {padding-bottom: 1rem}
  .pb-2 {padding-bottom: 1.5rem}
  .pb-3 {padding-bottom: 2rem}
  .pb-4 {padding-bottom: 2.5rem}
  .pb-5 {padding-bottom: 3rem}
  .pb-6 {padding-bottom: 3.5rem}
  .pb-7 {padding-bottom: 4rem}
  
  .m-auto {margin:auto;}
  .m-1 {margin: 1rem}
  .m-2 {margin: 1.5rem}
  .m-3 {margin: 2rem}
  .m-4 {margin: 2.5rem}
  .m-5 {margin: 3rem}
  
  .mt-1 {margin-top: 1rem}
  .mt-2 {margin-top: 1.5rem}
  .mt-3 {margin-top: 2rem}
  .mt-4 {margin-top: 2.5rem}
  .mt-5 {margin-top: 3rem}
  .mt-6 {margin-top: 3.5rem}
  .mt-7 {margin-top: 4rem}
  
  
  .mb-1 {margin-bottom: 0.3rem}
  .mb-2 {margin-bottom: 1.5rem}
  .mb-3 {margin-bottom: 2rem}
  .mb-4 {margin-bottom: 2.5rem}
  .mb-5 {margin-bottom: 3rem}
  .mb-6 {margin-bottom: 3.5rem}
  .mb-7 {margin-bottom: 4rem}
  .mb-8 {margin-bottom: 6rem}
  
  
  .mr-1 {margin-right: 1rem}
  .mr-2 {margin-right: 1.5rem}
  .mr-3 {margin-right: 2rem}
  .mr-4 {margin-right: 2.5rem}
  .mr-5 {margin-right: 3rem}
  .mr-6 {margin-right: 3.5rem}
  .mr-7 {margin-right: 4rem}

  .ml-1 {margin-left: 1rem}
  .ml-2 {margin-left: 1.5rem}
  .ml-3 {margin-left: 2rem}
  .ml-4 {margin-left: 2.5rem}
  .ml-5 {margin-left: 3rem}
  .ml-6 {margin-left: 3.5rem}
  .ml-7 {margin-left: 4rem}
  
  .float-right {float: right;}

  .cursor-pointer {cursor: pointer;}
.padding-start {padding-inline-start:0rem;}


@media only screen and (max-width: 600px) {
  .container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

  .flex-row-m {
    flex-direction: row !important;
  }
  .m-flex-column {
    flex-direction: column !important;
  }
  .m-w-available {
            width: -webkit-fill-available !important;
  }
  .m-w-auto {
    width: auto !important;
  }
  .h-auto-m {
    height: auto !important;
  }
  .hide-m {
    display: none !important;
  }
}