@font-face {
  font-family: 'ballpointpen-Regular';
  src: url('https://koerbi.neocities.org/Kalam-Regular.ttf');
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #F1E5CD;
  max-width: 1440px;
  max-height: 2048px;
}

.dropbtn {
  position: absolute;
  background-color: #BC4B51;
  color: white;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  margin-top: 130px;
  margin-left: 1150px;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  width: 160px;
  height: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
  margin-left: 1150px;
  margin-top: 180px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #F29E58;
}

.branch {
  position: absolute;
  margin-top: -120px;
  z-index: 1;
}

.circle1 {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #8FB369;
  margin-top: 320px;
  margin-left: 89px;
}

.circle2 {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #BC4B51;
  margin-top: 448px;
  margin-left: 89px;
}

.circle3 {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #A5957E;
  margin-top: 576px;
  margin-left: 89px;
}

.circle4 {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #F29E58;
  margin-top: 704px;
  margin-left: 89px;
}

.mushroom {
  position: absolute;
  margin-top: 1760px;
  margin-left: 1207px;
  overflow: hidden;
}

.acab {
  position: absolute;
  margin-top: 319px;
  margin-left: 1135px;
  z-index: 999;
}

.anarchie {
  position: absolute;
  margin-top: 754px;
  margin-left: 894px;
  z-index: 999;
}

.maingrid {
  display: grid;
  grid-template-columns: 720px 720px;
  grid-template-rows: 83px 920px 400px 372px 262px;
}

.grid-item-1 {
  margin-top: 138px;
  margin-left: 188px;
}

.grid-item-2 {
}

.paper {
  position: absolute;
  margin-top: 78px;
  z-index: 1;
}

.textpaper p {
  position: absolute;
  width: 417px;
  font-family: ballpointpen-Regular;
  line-height: 54px;
  color: #21158E;
  font-size: 32px;
  z-index: 999;
  content: 417px 50px;
  margin-top: 214px;
  margin-left: 165px;
}

.grid-item-3 {
}

.likes {
  background: #BA6F4D;
  width: 602px;
  height: 390px;
  margin-left: 59px;
}

.likes h1 {
  font-family: system-ui;
  color: white;
  text-align: center;
  padding-top: 20px;
}

.line {
  background: white;
  width: 540px;
  height: 3px;
  margin-top: 20px;
  margin-left: 27px;
}

.likes ul {
  font-family: system-ui;
  color: white;
  font-size: 32px;
  padding-top: 70px;
  padding-left: 100px
}

.grid-item-4 {
}

.dislikes {
  background: #BA6F4D;
  width: 602px;
  height: 390px;
  margin-right: 59px;
  margin-left: auto;
}

.dislikes h1 {
  font-family: system-ui;
  color: white;
  text-align: center;
  padding-top: 20px;
}

.line {
  background: white;
  width: 540px;
  height: 3px;
  margin-top: 20px;
  margin-left: 27px;
}

.dislikes ul {
  font-family: system-ui;
  color: white;
  font-size: 32px;
  padding-top: 70px;
  padding-left: 100px
}

.grid-item-5 {
  grid-column: 1 / 3;
}

.stick1 {
  margin-left: 376px;
  margin-top: 10px;
}

.grid-item-5 p {
  font-family: system-ui;
  font-size: 24px;
  margin: 50px 20px;
}

.stick2 {
  margin-left: 376px;
  margin-top: 70px;
}

.grid-item-6 {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: row;
}

.moss {
  margin-top: 50px;
  margin-left: 414px;
}

.mushroom {
  margin-top: 55px;
}

.grid-item-7 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  z-index: 99;
}

.grid-item-7 ul {
  background: #687259;
  padding: 20px 30px;
}

.grid-item-7 a {
  color: #F1E5CD;
  text-decoration: none;
  text-transform: uppercase;
  font-family: system-ui;
  font-size: 32px;
  padding: 20px;
}

.grid-item-7 li {
  display: inline;
  text-align: center;
}

.grid-item-7 a:hover {
  color: #F1E5CD;
  text-decoration: none;
  text-transform: uppercase;
  font-family: system-ui;
  background: #3E4A2D;
}

@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: absolute;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}