@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  

    --header-background-color: #fff;
    --header-navigation-color: #000;
    --logo-text-color: #000;
    --hero-background-color: #E5E5CB;
    --button-background-color: #000;
    --button-text-color: #fff;
    --invert-button-background-color: #fff;
    --invert-button-text-color: #000;
    --heading-text-color: #000;
    --footer-background-color: #343c49;
    --footer-navigation-color: #fff;
    --single-game-background-color: #1A120B;
     --color-white-100: #fff;
  --color-white-200: #f2f2f2;
  --color-white-300: #d9d9d9;
  --color-white-400: #bfbfbf;
  --color-white-500: #a6a6a6;
  --color-white-600: #8c8c8c;
  --color-black-100: #191f24;
  --color-black-200: #151a1e;
  --color-black-300: #111418;
  --color-black-400: #0d0f12;
  --color-black-500: #090a0c;
  --color-black-600: #040506;
  --color-blue-100: #3792fb;
  --color-blue-200: #2081f8;
  --color-blue-300: #0b64f4;
  --color-blue-400: #1450d2;
  --color-blue-500: #1842b4;
  --color-blue-600: #1a3799;
  --text-tiny: clamp(0.84rem, calc(0.12vw + 0.8rem), 0.89rem);
  --text-small: clamp(0.93rem, calc(0.13vw + 0.91rem), 1rem);
  --text-base: clamp(1.05rem, calc(0.15vw + 1.01rem), 1.12rem);
  --text-medium: clamp(1.18rem, calc(0.17vw + 1.14rem), 1.26rem);
  --text-large: clamp(1.32rem, calc(0.19vw + 1.28rem), 1.41rem);
  --text-extraLarge: clamp(1.62rem, calc(0.21vw + 1.5rem), 1.7rem);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --bg-color: #fff;
  --red-color: #ff0000;
  --purple-color: #7a00ff;
  --pink-color: #ff00c8;
  --blue-color: #002bff;
  --bg-secondary-color: #f3f3f6;
  --color-primary: #fff;
  --color-lightGrey: #d2d6dd;
  --color-grey: #747681;
  --color-darkGrey: #3f4144;
  --color-error: #d43939;
  --color-success: #28bd14;
  --grid-maxWidth: 120rem;
  --grid-gutter: 2rem;
  --font-size: 1.6rem;
  --font-color: #333;
    --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
  }
  

  *,
:after,
:before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

  body {
    background: url(../images/bg.jpg);
      margin: 0;
      overflow-x: hidden;
       font-family: "Roboto", sans-serif;
       background-attachment: fixed;
  background-size: cover;
  align-items: center;
  justify-content: center;
  }
  p {
        line-height: 1.4;
    font-weight: 100 ;
  }
  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;
}
  
  img.logo {
    height: 80px;
    width: 80px;
    margin: 0 auto;
    display: block;
}
  .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;}
  ol, ul {
    font-weight: 200 !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;}
  .clr-white {color: white}
.clr-black {color: black}
.list-style-none {list-style-type: none;}
.margin-start {margin-block-start:0rem;}
.margin-end {margin-block-end:0rem;}
.max-100 {max-width: 100%;}


.text-uper-case{text-transform: uppercase;}
.text-decoration-none {text-decoration: none;}
.list-style-none {list-style-type: none;}
.line-height-1 {line-height: 1.7;}
.margin-start {margin-block-start:0rem;}
.margin-end {margin-block-end:0rem;}
.max-100 {max-width: 100%;}

  
  .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;}
img {
    height: auto;
    max-width: 100%;
}

.cookie-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    z-index: 9999;
    color: #fff;
    padding: .5rem;
}
.cookie-bar-inner {
    display: flex
;
    align-items: center;
    justify-content: center;
}
.cookie-bar-text {
    margin-right: 1rem;
    font-size: 12px;
}
.cookie-bar-button {
    display: flex
;
}
.cookie-bar-text a {
    color: #fff;
}

.row {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
button.button-generic {
    padding: .25rem .75rem;
    font-weight: 700;
    border-radius: 5px;
    display: inline-block;
    background: #fff;
    color: #000;
    cursor: pointer;
}

@media only screen and (max-width: 600px) {
  
  .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;
  }
}