/* *********************************** */
/* ANIMATIONS */
/* *********************************** */
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.hvr-float-shadow {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform; }

.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(238, 255, 238, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(238, 255, 238, 0.3) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity; }

.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */ }

.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ }

@property --rotate {
  syntax: '<angle>';
  initial-value: 132deg;
  inherits: false; }

@keyframes spin {
  0% {
    --rotate: 0deg; }
  100% {
    --rotate: 360deg; } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background: #161724; }

li {
  list-style: none; }

img {
  max-width: 100%; }

a {
  text-decoration: none; }
*,
*::before,
*::after {
  box-sizing: border-box;
}


.download {
    display: flex;
    align-content: center;
    justify-items: center;
}
.download_button {
    cursor: pointer;
    height: 3.5rem;
    font-size: 1.5rem;
    font-style: italic;
    width:200px;
    color: black;
    outline: none;
	margin-left: 42%;
    position:absolute;
    /*transform: skewX(20deg); */
    
    
    
}

 @keyframes glowing {
        0% {
          background-color: white;
          box-shadow: 0 0 5px #efe;
        }
        50% {
          background-color: aliceblue;
          box-shadow: 0 0 20px #efe;
        }
        100% {
          background-color: azure;
          box-shadow: 0 0 5px #efe;
        }
      }

.download_button {
    animation: glowing 1300ms infinite;
}


/*================================================================*/
.header {
  width: clamp(300px, 80%, 1100px);
  margin: 0 auto;
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Mouse Memoirs", sans-serif;
  font-size: clamp(1rem, 8vw, 3.5rem); }
  .header-title {
    text-align: center;
    width: 100%;
    color: #efe;
    letter-spacing: 2px;
    width: clamp(200px, 80%, 1100px); }
    .header-title__texts > {
      display: flex;
      justify-content: center;
      align-items: center; }
      .header-title__texts > .galley {
        color: #161724;
        position: relative;
        display: inline-block;
        margin-left: 0.1em;
        padding: 0 0.2em; }
        .header-title__texts > .galley::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          right: 0;
          top: 0;
          background: #efe;
          z-index: -1;
          border-radius: 5px; }
        .header-title__texts > .galley::after {
          content: '';
          width: 131%;
          height: 135%;
          position: absolute;
          left: -0.39em;
          top: -0.2em;
          z-index: -2;
          margin: 0 auto;
          transform: scale(0.8);
          filter: blur(3px);
          border-radius: 5px;
          background-image: linear-gradient(var(--rotate), #4b6cb7 0%, #182848 100%);
          opacity: 1;
          transition: opacity 0.5s;
          animation: spin 2.5s linear infinite; }
.text{
    
    position: absolute;
	top: 0%;
    left: 50%;
    margin-left: -390px;
    width: 800px;
    height: 200px;
    text-align: center;
    transform: scale(0.8);
    
}
.welcometext{
    
    position: absolute;
	top:-10%;
    left: 50%;
    margin-left: -390px;
    width: 800px;
    height: 200px;
    text-align: center;
    transform: scale(0.8);
    
}
@keyframes glowing2 {
        0% {
         
          text-shadow: 0 0 5px #efe;
        }
        50% {
         
          text-shadow: 0 0 20px #efe;
        }
        100% {
          
          text-shadow: 0 0 5px #efe;
        }
      }
.word {
    animation: glowing2 1300ms infinite;
    font-family: "Mouse Memoirs", sans-serif;
    font-style: italic;
    font-size: 2.5rem;
	margin-top: 0%;
    
    
}
.word1 {
  animation: glowing2 1300ms infinite;
  font-family: "Mouse Memoirs", sans-serif;
  font-style: normal;
  font-size: 2.2rem;
 
  
}
.container {
  width: clamp(300px, 80%, 1100px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgba(204, 204, 204, 0.1);
  padding: 2em;
  border-radius: 5px;
  margin-top: 5em;
  position: relative; }
  .container ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; }
  .container li {
    width: clamp(200px, 30%, 1100px);
    flex-grow: 1;
    margin: 0.6em;
    object-fit: cover;
    overflow: hidden;
    box-shadow: 0 5px 8px rgba(204, 204, 204, 0.2);
    border-radius: 5px; }
  .container img {
    height: 100%;
    display: flex;
    object-fit: cover;
    overflow: hidden;
    transform: scale(1);
    filter: saturate(0%); }
    .container img:hover {
      transform: scale(1.06);
      filter: saturate(100%); }

:is(img, img:hover) {
  transition: 0.7s; }

footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  z-index: 3;
  margin-top: 6em;
  border-top: solid 1px rgba(238, 255, 238, 0.3); }
  footer ul {
    display: flex;
    justify-content: space-evenly;
    width: clamp(200px, 40%, 1100px);
    padding: 1em 0; }
  footer li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    background: #efe;
    border-radius: 100px;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    margin: 0 0.5em;
    position: relative;
    box-shadow: 0 0 0 transparent; }
  footer a {
    display: inline-block;
    color: #161724;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute; }
  footer p {
    color: #efe;
    font-family: lato; }
    .download-buttons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
  }

  .download-buttons {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}


  @media (max-width: 768px) {
      .download-buttons {
          flex-direction: column;
          align-items: center;
      }
  }
 
.download-button {
    margin: 0 10px;
    
}

.badge-windows,
.badge-linux,
.badge-mac {
    margin-right: 10px;
    width: 300px;
    height: 100px;
    color: #efe;
    background-color: black;
}
@keyframes glowing1 {
  0% {
    background-color: black;
    box-shadow: 0 0 5px #000;
  }
  50% {
    background-color:#161724;
    box-shadow: 0 0 20px #000;
  }
  100% {
    background-color:#000;
    box-shadow: 0 0 5px #000;
  }
}
.badge-windows,
.badge-linux,
.badge-mac{
  animation: glowing1 1300ms infinite;
}
.badge-android img {
    height: 20px; /* Adjust the height as needed */
    margin-right: 5px;
}
.section-header {
  padding: 40px 0; /* Adjust the padding as needed */
  
  text-align: center;
}
.col-full {
  margin-top: 15px;
  margin-left: 60px;
  color: #efe;
}
@keyframes glowing3 {
  0% {
   
    text-shadow: 0 0 5px #efe;
  }
  50% {
   
    text-shadow: 0 0 20px #efe;
  }
  100% {
    
    text-shadow: 0 0 5px #efe;
  }
}
.col-full{
  animation: glowing3 1300ms infinite;
}
/* Responsive typography */
@media (max-width: 768px) {
  .display-1 {
      font-size: 2.5rem; /* Adjust the font size for smaller screens */
  }
}

.end{
  color: aliceblue;

}

.end{
  animation: glowing3 1300ms infinite;
  
}