::-webkit-scrollbar {
   display: none;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
   --SAP-color: #00A6E1;
   --Red-color: #f1181b;
   --gray-color: #808080;
   --Blue-color: #365ca9;
   --Purple-color: #c300e7;
   --Orange-color: #ff8c00;
   --Black-color: #050505;
}

body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   min-height: 100vh;
   display: flex;
   color: white;
   font-size: 30px;
   overflow-x: hidden;
   max-width: 100vw;
   position: relative;
   align-items: center;
   flex-direction: column;
   scroll-behavior: smooth;
   background-color: var(--Black-color);
   font-family: Arial, Helvetica, sans-serif;
}

a {
   text-decoration: none;
   color: var(--Orange-color);
}

main {
   max-width: 800px;
}

h1,
h2 {
   text-shadow: 1px 1px 1px white, 0 0 1px white, 0 0 0.2em white;
}

footer {
   bottom: 0;
   width: 90%;
   height: auto;
   max-width: 1440px;
   text-align: center;
   margin: 20px 0 0 0;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 10px;
   background-size: 200% 200%;
   border-radius: 50px 50px 0 0;
   padding: 10px 20px calc(10px + env(safe-area-inset-bottom)) 20px;
   animation: animateGlow 6s ease infinite;
   background: linear-gradient(180deg, var(--Red-color), var(--Purple-color));
}

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

   50% {
      background-position: 0% 75%;
   }

   100% {
      background-position: 50% 0%;
   }
}

button {
   outline: none;
   color: white;
   font-size: 30px;
   margin: 5px 2.5px 5px 2.5px;
   padding: 5px 10px 5px 10px;
   background-color: transparent;
   border: 2px var(--Red-color) solid;
   border-radius: 25px 25px 25px 25px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

h3 {
   font-weight: bold;
   padding: 20px 0 10px 0;
}

button:active {
   transform: translateY(4px);
}

svg {
   overflow: hidden;
}

.shakingImages:hover {
   animation: shake 0.5s;
   animation-iteration-count: infinite;
}

.noSelect {
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
}

@keyframes shake {
   0% {
      transform: translate(1px, 1px) rotate(0deg);
   }

   10% {
      transform: translate(-1px, -2px) rotate(-1deg);
   }

   20% {
      transform: translate(-3px, 0px) rotate(1deg);
   }

   30% {
      transform: translate(3px, 2px) rotate(0deg);
   }

   40% {
      transform: translate(1px, -1px) rotate(1deg);
   }

   50% {
      transform: translate(-1px, 2px) rotate(-1deg);
   }

   60% {
      transform: translate(-3px, 1px) rotate(0deg);
   }

   70% {
      transform: translate(3px, 1px) rotate(-1deg);
   }

   80% {
      transform: translate(-1px, -1px) rotate(1deg);
   }

   90% {
      transform: translate(1px, 2px) rotate(0deg);
   }

   100% {
      transform: translate(1px, -2px) rotate(-1deg);
   }
}