/* Reset CSS */

html, body {
  background: #fff;
  z-index: 1;
  font-size: 16px;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button, input, label {
  cursor: pointer
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0
}

/* Your CSS */

h1{
  color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
}

.pixel{
  height: calc(100vh / 11);
  background-color: #98a5dd;
}

@keyframes meine-animation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.winner {
  animation-name: meine-animation;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
  /* weitere animation-Eigenschaften */
}


#pixel1 {
  background-color: #98a5dd;
}
#pixel2 {
  background-color: #98a5dd;
}
#pixel3 {
  background-color: #98a5dd;
}
#pixel4 {
  background-color: #3aaa35;
}
#pixel5 {
  background-color: #98a5dd;
}
#pixel6 {
  background-color: #006633;
}
#pixel7 {
  background-color: #006633;
}
#pixel8 {
  background-color: #094c29;
}
#pixel9 {
  background-color: #006633;
}
#pixel10 {
  background-color: #094c29;
}
#pixel11 {
  background-color: #3aaa35;
}
#pixel12 {
  background-color: #006633;
}
#pixel13 {
  background-color: #3aaa35;
}
#pixel14 {
  background-color: #006633;
}
#pixel15 {
  background-color: #98a5dd;
}
#pixel16 {
  background-color: #3aaa35;
}
#pixel17 {
  background-color: #006633;
}
#pixel18 {
  background-color: #98a5dd;
}
#pixel19 {
  background-color: #98a5dd;
}
#pixel20 {
  background-color: #98a5dd;
}
/************************************************************** zweite Reihe */
#pixel21 {
  background-color: #98a5dd;
}
#pixel22 {
  background-color: #98a5dd;
}
#pixel23 {
  background-color: #98a5dd;
}
#pixel24 {
  background-color: #98a5dd;
}
#pixel25 {
  background-color: #008d36;
}
#pixel26 {
  background-color: #094c29;
}
#pixel27 {
  background-color: #094c29;
}
#pixel28 {
  background-color: #008d36;
}
#pixel29 {
  background-color: #006633;
}
#pixel30 {
  background-color: #008d36;
}
#pixel31 {
  background-color: #006633;
}
#pixel32 {
  background-color: #3aaa35;
}
#pixel33 {
  background-color: #006633;
}
#pixel34 {
  background-color: #3aaa35;
}
#pixel35 {
  background-color: #008d36;
}
#pixel36 {
  background-color: #006633;
}
#pixel37 {
  background-color: #98a5dd;
}
#pixel38 {
  background-color: #006633;
}
#pixel39 {
  background-color: #98a5dd;
}
#pixel40 {
  background-color: #98a5dd;
}
/***************************************************************dritte Reihe */
#pixel41 {
  background-color: #98a5dd;
}
#pixel42 {
  background-color: #98a5dd;
}
#pixel43 {
  background-color: #98a5dd;
}
#pixel44 {
  background-color: #006633
}
#pixel45 {
  background-color: #094c29;
}
#pixel46 {
  background-color: #006633;
}
#pixel47 {
  background-color: #3aaa35;
}
#pixel48 {
  background-color: #006633;
}
#pixel49 {
  background-color: #006633;
}
#pixel50 {
  background-color: #094c29;
}
#pixel51 {
  background-color: #3aaa35;
}
#pixel52 {
  background-color: #006633;
}
#pixel53 {
  background-color: #3aaa35;
}
#pixel54 {
  background-color: #7d4e24;
}
#pixel55 {
  background-color: #3aaa35;
}
#pixel56 {
  background-color: #98a5dd;
}
#pixel57 {
  background-color: #006633;
}
#pixel58 {
  background-color: #006633;
}
#pixel59 {
  background-color: #98a5dd;
}
#pixel60 {
  background-color: #98a5dd;
}
/************************************************************** vierte Reihe */
#pixel61 {
  background-color: #98a5dd;
}
#pixel61 {
  background-color: #98a5dd;
}
#pixel62 {
  background-color: #98a5dd;
}
#pixel63 {
  background-color: #006633;
}
#pixel64 {
  background-color: #98a5dd;
}
#pixel65 {
  background-color: #094c29
}
#pixel66 {
  background-color: #094c29;
}
#pixel67 {
  background-color: #006633;
}
#pixel68 {
  background-color: #683c11;
}
#pixel69 {
  background-color: #006633;
}
#pixel70 {
  background-color: #3aaa35;
}
#pixel71 {
  background-color: #094c29;
}
#pixel72 {
  background-color: #006633;
}
#pixel73 {
  background-color: #7d4e24;
}
#pixel74 {
  background-color: #683c11;
}
#pixel75 {
  background-color: #006633;
}
#pixel76 {
  background-color: #3aaa35;
}
#pixel77 {
  background-color: #006633;
}
#pixel78 {
  background-color: #98a5dd;
}
#pixel79 {
  background-color: #98a5dd;
}
#pixel80 {
  background-color: #98a5dd;
}
/************************************************************** fünfte Reihe */
#pixel81 {
  background-color: #98a5dd;
}
#pixel82 {
  background-color: #98a5dd;
}
#pixel83 {
  background-color: #008d36;
}
#pixel84 {
  background-color: #094c29;
}
#pixel85 {
  background-color: #006633;
}
#pixel86 {
  background-color: #094c29;
}
#pixel87 {
  background-color: #683c11;
}
#pixel88 {
  background-color: #432918;
}
#pixel89 {
  background-color: #3aaa35;
}
#pixel90 {
  background-color: #006633;
}
#pixel91 {
  background-color: #094c29;
}
#pixel92 {
  background-color: #006633;
}
#pixel93 {
  background-color: #008d36;
}
#pixel94 {
  background-color: #3aaa35;
}
#pixel95 {
  background-color: #006633;
}
#pixel96 {
  background-color: #006633;
}
#pixel97 {
  background-color: #98a5dd;
}
#pixel98 {
  background-color: #98a5dd;
}
#pixel99 {
  background-color: #98a5dd;
}
#pixel99 {
  background-color: #98a5dd;
}
#pixel100 {
  background-color: #98a5dd;
}
/************************************************************* sechste Reihe */
#pixel101 {
  background-color: #98a5dd;
}
#pixel102 {
  background-color: #98a5dd;
}
#pixel103 {
  background-color: #98a5dd;
}
#pixel104 {
  background-color: #98a5dd;
}
#pixel105 {
  background-color: #094c29;
}
#pixel106 {
  background-color: #006633;
}
#pixel107 {
  background-color: #3aaa35;
}
#pixel108 {
  background-color: #094c29;
}
#pixel109 {
  background-color: #006633;
}
#pixel110 {
  background-color: #006633;
}
#pixel111 {
  background-color: #006633;
}
#pixel112 {
  background-color: #008d36;
}
#pixel113 {
  background-color: #006633;
}
#pixel114 {
  background-color: #008d36;
}
#pixel115 {
  background-color: #008d36;
}
#pixel116 {
  background-color: #98a5dd;
}
#pixel117 {
  background-color: #98a5dd;
}
#pixel118 {
  background-color: #98a5dd;
}
#pixel119 {
  background-color: #98a5dd;
}
#pixel120 {
  background-color: #98a5dd;
}
/************************************************************** siebte Reihe */
#pixel121 {
  background-color: #98a5dd;
}
#pixel122 {
  background-color: #98a5dd;
}
#pixel123 {
  background-color: #98a5dd;
}
#pixel124 {
  background-color: #008d36;
}
#pixel125 {
  background-color: #006633;
}
#pixel126 {
  background-color: #094c29;
}
#pixel127 {
  background-color: #094c29;
}
#pixel128 {
  background-color: #432918;
}
#pixel129 {
  background-color: #432918;
}
#pixel130 {
  background-color: #094c29;
}
#pixel131 {
  background-color: #3aaa35;
}
#pixel132 {
  background-color: #683c11;
}
#pixel133 {
  background-color: #006633;
}
#pixel134 {
  background-color: #3aaa35;
}
#pixel135 {
  background-color: #094c29;
}
#pixel136 {
  background-color: #006633;
}
#pixel137 {
  background-color: #98a5dd;
}
#pixel138 {
  background-color: #98a5dd;
}
#pixel139 {
  background-color: #98a5dd;
}
#pixel140 {
  background-color: #98a5dd;
}
/*************************************************************** achte Reihe */
#pixel141 {
  background-color: #98a5dd;
}
#pixel142 {
  background-color: #98a5dd;
}
#pixel143 {
  background-color: #98a5dd;
}
#pixel144 {
  background-color: #98a5dd;
}
#pixel145 {
  background-color: #98a5dd;
}
#pixel146 {
  background-color: #008d36;
}
#pixel147 {
  background-color: #98a5dd;
}
#pixel148 {
  background-color: #094c29;
}
#pixel149 {
  background-color: #432918;
}
#pixel150 {
  background-color: #432918;
}
#pixel151 {
  background-color: #683c11;
}
#pixel152 {
  background-color: #006633;
}
#pixel153 {
  background-color: #008d36;
}
#pixel154 {
  background-color: #008d36;
}
#pixel155 {
  background-color: #006633;
}
#pixel156 {
  background-color: #3aaa35;
}
#pixel157 {
  background-color: #98a5dd;
}
#pixel158 {
  background-color: #98a5dd;
}
#pixel159 {
  background-color: #98a5dd;
}
#pixel160 {
  background-color: #98a5dd;
}
/************************************************************** neunte Reihe */
#pixel161 {
  background-color: #98a5dd;
}
#pixel162 {
  background-color: #98a5dd;
}
#pixel163 {
  background-color: #98a5dd;
}
#pixel164 {
  background-color: #98a5dd;
}
#pixel165 {
  background-color: #98a5dd;
}
#pixel166 {
  background-color: #98a5dd;
}
#pixel167 {
  background-color: #094c29;
}
#pixel168 {
  background-color: #98a5dd;
}
#pixel169 {
  background-color: #98a5dd;
}
#pixel170 {
  background-color: #683c11;
}
#pixel171 {
  background-color: #936037;
}
#pixel172 {
  background-color: #98a5dd;
}
#pixel173 {
  background-color: #3aaa35;
}
#pixel174 {
  background-color: #008d36;
}
#pixel175 {
  background-color: #98a5dd;
}
#pixel176 {
  background-color: #98a5dd;
}
#pixel177 {
  background-color: #98a5dd;
}
#pixel178 {
  background-color: #98a5dd;
}
#pixel179 {
  background-color: #98a5dd;
}
#pixel180 {
  background-color: #98a5dd;
}
/************************************************************** zehnte Reihe */
#pixel181 {
  background-color: #98a5dd;
}
#pixel182 {
  background-color: #98a5dd;
}
#pixel183 {
  background-color: #98a5dd;
}
#pixel184 {
  background-color: #98a5dd;
}
#pixel185 {
  background-color: #98a5dd;
}
#pixel186 {
  background-color: #98a5dd;
}
#pixel187 {
  background-color: #98a5dd;
}
#pixel188 {
  background-color: #98a5dd;
}
#pixel189 {
  background-color: #98a5dd;
}
#pixel190 {
  background-color: #432918;
}
#pixel191 {
  background-color: #7d4e24;
}
#pixel192 {
  background-color: #98a5dd;
}
#pixel193 {
  background-color: #98a5dd;
}
#pixel194 {
  background-color: #98a5dd;
}
#pixel195 {
  background-color: #98a5dd;
}
#pixel196 {
  background-color: #98a5dd;
}
#pixel197 {
  background-color: #98a5dd;
}
#pixel198 {
  background-color: #98a5dd;
}
#pixel200 {
  background-color: #98a5dd;
}
/*************************************************************** elfte Reihe */
#pixel201 {
  background-color: #98a5dd;
}
#pixel202 {
  background-color: #98a5dd;
}
#pixel203 {
  background-color: #98a5dd;
}
#pixel204 {
  background-color: #98a5dd;
}
#pixel205 {
  background-color: #98a5dd;
}
#pixel206 {
  background-color: #98a5dd;
}
#pixel207 {
  background-color: #98a5dd;
}
#pixel208 {
  background-color: #98a5dd;
}
#pixel209{
  background-color: #98a5dd;
}
#pixel210 {
  background-color: #432918;
}
#pixel211 {
  background-color: #683c11;
}
#pixel212 {
  background-color: #98a5dd;
}
#pixel213 {
  background-color: #98a5dd;
}
#pixel214 {
  background-color: #98a5dd;
}
#pixel215 {
  background-color: #98a5dd;
}
#pixel216 {
  background-color: #98a5dd;
}
#pixel217 {
  background-color: #98a5dd;
}
#pixel218 {
  background-color: #98a5dd;
}
#pixel219 {
  background-color: #98a5dd;
}
#pixel220 {
  background-color: #98a5dd;
}
.counter-text {
    position: absolute;
    right: 0;
    bottom: 0;
    color: red;
    height: 200px;
    width: 200px;
}
@font-face {
    font-family: 'Pixel';
    src: url('../Pixel.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
body  {
    font-family: "Pixel";
    font-size: 80px;
    }

/* Media Queries */

@media screen and (max-width:500px){
  h1{
    color: blue;
  }
}

.red{
  cursor: pointer;
  background-color: red !important;
}