body {
  background: #222;
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: white;
  font-family: sans-serif;
}

.glitch {
  font-size: 8rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;

  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);

  animation: glitch 500ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
  /* color: green; */
  opacity: 0.8;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(0.0125em, 0.025em);
  /* color: red; */
  opacity: 0.8;
}

/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
.subtitle {
  color: rgba(255, 255, 255, 0.753);
  font-size: 2rem;
  font-weight: 400;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeInUp 2s ease forwards;
  display: block;
  margin-top: -50px;
  max-width: 70rem;
  padding: 0, 1em;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll {
  filter: invert(100%);
  top: -300px;
  display: block;
  margin-top: 120px;
}
.text,
.water-text,
.cheap {
  font-family: "Lemon", cursive;
  font-size: 80px;
  font-weight: 500;
  position: relative;
  max-width: 70rem;
  padding: 0, 1em;
}
.offers {
  font-family: "Lemon", cursive;
  position: relative;
  max-width: 70rem;
  padding: 0, 1em;
  font-weight: 300;
  top: -70px;
}
.water,
.image {
  position: relative;
}
.water {
  margin-top: -300px;
  display: block;
}

input[type="text"],
select,
textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid rgb(94, 94, 94); /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 50px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type="submit"] {
  background-color: rgb(0, 128, 160);
  color: white;
  padding: 12px 0px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  border-bottom: 20px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type="submit"]:hover {
  background-color: #b1b4b1;
}
/*---------------------------------------------------------------------------------about-*/

.about {
  font-family: "Comfortaa", cursive;
  max-width: 60rem;
  font-size: 4.5vw;
  position: relative;
  margin: 0 auto;
  max-width: 60ch;
  padding: 0 1em;
  line-height: 1.6;
  resize: vertical;
  color: rgb(167, 167, 167);
}

.about-title {
  font-family: "Lemon", cursive;
  font-size: 7vw;
  color: rgb(177, 177, 177);
  transform: translateY(3rem);
  animation: fadeInUp 2s ease forwards;
  display: block;
  opacity: 0;
}
/*----------------------------------------------nav bar*/
html {
  scroll-behavior: smooth;
}
#menu-outer {
  height: 84px;
}

.table {
  display: table; /* Allow the centering to work */
  margin: 0 auto;
  text-align: left;
}

ul#horizontal-list {
  min-width: 696px;
  list-style: none;
  padding-top: 20px;
}
ul#horizontal-list li {
  display: inline;
}
.Link-about,
.order {
  color: rgb(184, 184, 184);
  text-decoration: none;
  font-family: "Baloo 2", cursive;
  text-align: left;
  font-size: 40px;
  position: relative;
  resize: none;
  margin-right: 20px;
}
.order-heading {
  font-family: "Lemon", cursive;
  font-size: 80px;
  font-weight: 500;
  position: relative;
  max-width: 70rem;
  padding: 0, 1em;
  margin-top: 400px;
}
body {
  font-family: "Lato", sans-serif;
}
/*--------------------------------------------------------------*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
/*-------------------feedback slide in----------------*/

.feedback {
  color: white;
  font-family: "Lemon", cursive;
  font-size: 6vw;
}
a:hover {
  background-color: rgb(99, 99, 99);
}
.submit:hover {
  background: rgb(39, 195, 223);
}
.submit {
  margin-top: -400px;
  font-family: "Courier New", Courier, monospace;
  position: relative;
}
/*------------------------------how----------------------*/
.main-writing {
  font-family: "Comfortaa", cursive;
  max-width: 60rem;
  font-size: 4.5vw;
  position: relative;
  margin: 0 auto;
  max-width: 60ch;
  padding: 0 1em;
  line-height: 1.6;
  resize: vertical;
  color: rgb(167, 167, 167);
}
.how {
  font-family: "Lemon", cursive;
  font-size: 5.5vw;
  color: rgb(177, 177, 177);
  transform: translateY(3rem);
  animation: fadeInUp 2s ease forwards;
  display: block;
  opacity: 0;
}
/*--------------------------gallary----------------------------------*/

.gallary-title {
  font-family: "Lemon", cursive;
  font-size: 5.5vw;
  color: rgb(177, 177, 177);
}

html,
body {
  background: #222;
}

.slides {
  padding: 0;
  width: 620px;
  height: 620px;
  display: block;
  margin: 0 auto;
  position: relative;
}

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

.slides input {
  display: none;
}

.slide-container {
  display: block;
}

.slide {
  top: 0;
  opacity: 0;
  width: 620px;
  height: 620px;
  display: block;
  position: absolute;

  transform: scale(0);

  transition: all 0.7s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100%;
}

.nav label {
  width: 200px;
  height: 100%;
  display: none;
  position: absolute;

  opacity: 0;
  z-index: 9;
  cursor: pointer;

  transition: opacity 0.2s;

  color: #fff;
  font-size: 156pt;
  text-align: center;
  line-height: 500px;
  font-family: "Varela Round", sans-serif;
  background-color: rgba(255, 255, 255, 0.3);
  text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label {
  opacity: 0.5;
}

.nav label:hover {
  opacity: 1;
}

.nav .next {
  right: 0;
}

input:checked + .slide-container .slide {
  opacity: 1;

  transform: scale(1);

  transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label {
  display: block;
}

.nav-dots {
  width: 100%;
  bottom: 9px;
  height: 11px;
  display: block;
  position: absolute;
  text-align: center;
}

.nav-dots .nav-dot {
  top: -5px;
  width: 11px;
  height: 11px;
  margin: 0 4px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
  background: rgba(0, 0, 0, 0.8);
}
.little {
  font-family: "Comfortaa", cursive;
  max-width: 60rem;
  position: relative;
  margin: 0 auto;
  max-width: 60ch;
  padding: 0 1em;
  line-height: 1.6;
  resize: vertical;
}
/*-----------------------------------raffle--------------*/
.raffle {
  font-family: "Comfortaa", cursive;
  max-width: 60rem;
  font-size: 4.5vw;
  position: relative;
  margin: 0 auto;
  max-width: 60ch;
  padding: 0 1em;
  line-height: 1.6;
  resize: vertical;
  color: rgb(167, 167, 167);
}
.shadow {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.shadow {
  display: inline-block;
  color: white;
  font-family: "Righteous", serif;
  font-size: 12em;
  text-shadow: 0.03em 0.03em 0 hsla(230, 40%, 50%, 1);
}
.shadow:after {
  position: absolute;
  top: 0.06em;
  left: 0.06em;
  text-shadow: none;
  background-image: linear-gradient(
    45deg,
    transparent 45%,
    hsla(48, 20%, 90%, 1) 45%,
    hsla(48, 20%, 90%, 1) 55%,
    transparent 0
  );
}