/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

@font-face {
  font-family: 'WorldCup2026';
  src: url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.content-background {
  height: 100vh;
  background: -moz-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: -webkit-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  /*min-height: calc(100vh - 2rem);*/
  display: flex;  
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden; 
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* media query for height */

@media screen and (max-height: 600px) {
  .content-background {
      height: 100vw;
  }
}

@media screen and (max-width: 1000px) {
  .content-background {
      min-height: 800px;
      height: 100%;
  }
}

.content-background::before, 
.content-background::after {
  content: "";
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  left: -20vmin;
  top: -20vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 1;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none; 
  overflow: hidden;
}

.content-background::after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: -10vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%; 
  overflow: hidden;
}

@-webkit-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes morph {
  0% {
      border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }
  100% {
      border-radius: 40% 60%;
  } 
}

@keyframes spin {
  to {
      transform: rotate(1turn);
  } 
}
.st0{display:none;}
.st1{display:inline;}
.st2{opacity:0.29;}
.st3{fill:#FFFFFF;}
.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_4_);}
.st6{clip-path:url(#SVGID_6_);}
.st7{clip-path:url(#SVGID_8_);}
.st8{clip-path:url(#SVGID_10_);}
.st9{fill:none;}
.st10{clip-path:url(#SVGID_12_);}
.st11{opacity:0.7;}
.st12{clip-path:url(#SVGID_14_);}
.st13{opacity:0.2;}
.st14{clip-path:url(#SVGID_16_);}
.st15{opacity:0.3;fill:#FFFFFF;enable-background:new;}






form {
    background: #fff;
    padding: 2.5rem 2rem;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    height: auto;
    overflow-y: auto;
    z-index: 999;
    transition: all 0.3s ease;
}


@media screen and (max-height: 600px) {

  form {
      top: 50%;
  }
}

form .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: solid 1px #e5e5e5;
  margin: 0 0 0.5em 0;
}

form .title .title_display{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

form .title h2 {
    text-align: center;
    font-size: 35px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-wrap: wrap;
    font-family: 'WorldCup2026';
    text-shadow: 1px 0.5px 1px rgba(0,0,0,0.15),
    1px 1px 1px rgba(0,0,0,0.15),
    1px 1px 1px rgba(0,0,0,0.15),
    1px 1px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 3px 1px rgba(0,0,0,0.15),  
    1px 3px 1px rgba(0,0,0,0.15),
    1px 3px 1px rgba(0,0,0,0.15);
}

/* form .title .title_display h2:nth-child(2){
  font-family: 'Paris';
} */


form .title .images-title{
    display: flex;
    align-items: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 0 0.5em 0;
}

form .title .images-title .acc_logo {
    width: 175px;
    height: 45px;
    margin-bottom: 7px;
    margin-left: 10px;
    margin-right: 10px;

}

form .title .images-title .mega_logo {
  width: 175px;
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.by-image{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.by-image img{
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    filter : drop-shadow(0 0 0.75rem #000);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


form input[type="submit"] {
    background: #000000;
    border-radius: 6px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: block;
    line-height: 1.6em;
    margin: 1.25em 0 0;
    outline: none;
    padding: 1em 0;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

form input[type="submit"]:hover {
    background: #6E3FB0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

form input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}


.succes-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    gap: 30px;
}

.succes-container h1 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 900;
    text-align: center;
}

.succes-container p {
    font-size: 20px;
    color: #e7e7e7;
    font-weight: 900;
    text-align: center;
}

.succes-container small {
    font-size: 15px;
    color: #e7e7e7;
    font-weight: 400;
    text-align: center;
}


/* body {
  background-color: rgba(110, 63, 176, 0.25) !important;
  color: rgb(0,0,0);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500 !important;

} */

ul i{
  color : rgb(0, 0, 0) !important;
  transition: all 0.2s ease-in-out;

}

a{
  color: rgb(0, 0, 0) !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
}

ul i:hover{
  color : rgb(0,0,0) !important;
}

  a:hover{
      color: rgb(0,0,0) !important;
  }

@media screen and (max-width: 1025px) {
  form .title .images-title .acc_logo {
    width: 145px;
    height: 35px;
    margin-bottom: 7px;
    margin-left: 5px;
    margin-right: 5px;
  }

  form .title .images-title .mega_logo {
    width: 145px;
    height: 21px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
  }
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  form {
    padding: 1.5rem 1.5rem;
    max-height: 95vh;
    width: 90%;
    margin: 0 auto;
    font-size: 0.95rem;
  }
  
  form .title {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  form input[type="submit"] {
    margin-top: 0.75rem;
    padding: 0.7rem 0;
  }
  
  #hint_id_email {
    font-size: 0.8rem;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  form {
    padding: 1.25rem 1rem;
    width: 95%;
  }
  
  form .title {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  .form-group label {
    font-size: 0.9rem;
  }
  
  .message-container {
    margin-top: 0.75rem;
  }
  
  #hint_id_email {
    color: #333;
    font-size: 0.75rem;
  }
}




.start_btn{
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2rem;
          }

/* .start_btn button{
font-size: 55px;
font-weight: 500;
color: #007bff;
padding: 15px 30px; 
outline: none;
border: none;
border-radius: 5px;
background: #fff;
cursor: pointer;
z-index: 5;
} */

/* CSS */
.button-82-pushable {
position: relative;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
outline-offset: 4px;
transition: filter 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-82-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
background: hsl(0deg 0% 0% / 0.25);
will-change: transform;
transform: translateY(2px);
transition:
  transform
  600ms
  cubic-bezier(.3, .7, .4, 1);
}

.button-82-edge {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
/* background:       ; */
}

.button-82-front {
display: block;
position: relative;
padding: 12px 27px;
border-radius: 12px;
font-size: 1.1rem;
color: white;
background:   rgb(0,0,0);
will-change: transform;
transform: translateY(-4px);
transition:
  transform
  600ms
  cubic-bezier(.3, .7, .4, 1);
  font-family: 'WorldCup2026';

}

@media (min-width: 768px) {
.button-82-front {
  font-size: 2rem;
  padding: 12px 42px;
}
}

.button-82-pushable:hover {
filter: brightness(110%);
-webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
transform: translateY(-6px);
transition:
  transform
  250ms
  cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
transform: translateY(-2px);
transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
transform: translateY(4px);
transition:
  transform
  250ms
  cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
transform: translateY(1px);
transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
outline: none;
}