@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
/* Body */
body {
  background: url('gifs/first.gif') repeat center center fixed;
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  animation: changeBackground 30s infinite; /* 30s für die Gesamtdauer, ändern Sie dies nach Bedarf */
}

@keyframes changeBackground {
  0% {
    background-image: url('gifs/first.gif');
  }
  33% {
    background-image: url('gifs/second.gif');
  }
  66% {
    background-image: url('gifs/third.gif');
  }
  100% {
    background-image: url('gifs/fourth.gif');
  }
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.cookie-banner p {
    margin: 0;
}

#accept-btn,
#reject-btn {
    margin: 10px;
    padding: 5px 10px;
    background-color: #4CAF50;
    border: none;
    color: #fff;
    cursor: pointer;
}

#reject-btn {
    background-color: #f44336;
}

#header {
  font-size: 75px;
  font-weight: bolder;
  color: rgb(36, 36, 36, 05);
  font-family: "Open Sans";
}
/* Container0 */
.container0 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  height: 70px;
}

.pinleft {
height: 610px;
border-radius: 40px;
}

.pinmiddle {
  height: 610px;
  border-radius: 40px;
  }

.pinright {
    height: 610px;
    border-radius: 40px;
    }

/* Reset  || Clear */
.blank {
  background-color: #2c2b2b;
  flex-basis: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.reset,
.clear {
  font-weight: bolder;
  font-size: 25px;
  padding: 5px 30px 5px 30px;
  border-radius: 10%;
}

.clear {
  background-color: rgb(62, 166, 255);
  font-size: 20px;
  font-family: sans-serif;
  box-shadow: 0 0 5px rgb(62, 166, 255),
  0 0 25px  rgb(62, 166, 255);
  background-color:  rgb(62, 166, 255),;
  color: #000000; /* Textfarbe des Buttons */
  border: none; /* Entfernt den Rand des Buttons */
  border-radius: 5px; /* Runde Ecken für den Button */
}

.clear:hover {
  background-color: rgba(62, 166, 255, 0.4);
  color: #000000;
  cursor: pointer;
}

.reset {
  background-color: rgb(211, 75, 75);
  font-size: 20px;
  font-family: sans-serif;
  box-shadow: 0 0 5px rgb(211, 75, 75),
  0 0 25px rgb(211, 75, 75);
  background-color: rgb(211, 75, 75);
  color: #000000; /* Textfarbe des Buttons */
  border: none; /* Entfernt den Rand des Buttons */
  border-radius: 5px; /* Runde Ecken für den Button */
}

.reset:hover {
  background-color: rgb(211, 75, 75, 0.4);
  color: #000000;
  cursor: pointer;
}

/* Background color, pen color */

.default {
  background-color: rgba(255, 255, 255, 0.2);
  flex-basis: 700px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.pen-bg-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.color-picker,
.grid-size {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-adjust {
  display: flex;
  gap: 0px;
  flex-direction: column;
  align-items: center;
}
.size-adjust p {
  margin: 0;
  color: #000000;
  font-weight: 600;
}

label {
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-family: sans-serif;
}

/* Container  */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
}

/* Function */
.toggle {
  background-color: rgba(255, 255, 255, 0.1);
  width: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.container .toggle {
  height: 700px;
  flex-direction: column;
}

#draw,
#fill {
  display: flex;
  flex-direction: column;
  gap: 30px;

}
.toggle .title {
  color: rgb(0, 0, 0);
  font-weight: bolder;
  text-align: center;
  font-size: 30px;
}

button,
.grid-line {
  background-color: rgba(0, 255, 255, 0.5);
  font-size: 20px;
  padding: 5px 40px 5px 40px;
  border: 0;
  border-radius: 10px;
  font-family: sans-serif;
  box-shadow: 0 0 5px rgb(0, 255, 255),
  0 0 25px cyan;
  background-color: cyan(00, 255, 255, 0,7);
  color: #000000; /* Textfarbe des Buttons */
  border: none; /* Entfernt den Rand des Buttons */
  padding: 10px 50px; /* Innenabstand des Buttons */
  border-radius: 5px; /* Runde Ecken für den Button */
}

button:hover {
  background-color: rgba(0, 255, 255, 0.4);
  color: #000000;
  cursor: pointer;
}

.btn-on {
  background-color: rgba(72, 255, 0, 0.5);
  font-size: 20px;
  box-shadow: 0 0 5px rgba(72, 255, 0, 0.5),
  0 0 25px rgba(72, 255, 0, 0.5);
  color: #000000; /* Textfarbe des Buttons */
  border: none; /* Entfernt den Rand des Buttons */
  border-radius: 5px; /* Runde Ecken für den Button */
}

/* Grid */
.grid {
  width: 700px;
  height: 700px;
  /* New to learn (grid)*/
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.square {
  box-sizing: border-box;
}

.square-border {
  border-bottom: 1px rgb(156, 156, 156) solid;
  border-right: 1px rgb(156, 156, 156) solid;
}

.content-div {
  display: block; /* Standardanzeige */
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.green {
  background-color: green;
}

/* Klasse für ausgeblendete Divs */
.hidden {
  display: none;
}

/* Media Query, um bei kleineren Bildschirmen die Anordnung zu ändern */
@media screen and (max-width: 768px) {
  .footer-content {
      flex-direction: column;
      text-align: center;
  }

  .left, .right, .center {
      flex-basis: auto;
  }
}

  .UIButton {
    background-color: rgba(0, 255, 255, 0.5);
    font-size: 20px;
    padding: 5px 40px 5px 40px;
    border: 0;
    border-radius: 10px;
    font-family: sans-serif;
    box-shadow: 0 0 5px rgb(0, 255, 255),
    0 0 25px cyan;
    background-color: cyan(00, 255, 255, 0,7);
    color: #000000; /* Textfarbe des Buttons */
    border: none; /* Entfernt den Rand des Buttons */
    padding: 10px 50px; /* Innenabstand des Buttons */
    border-radius: 5px; /* Runde Ecken für den Button */
  }