body {
	overflow: hidden;
	background-color: rgba(251, 201, 100, 0.555);
}

.class1 {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	height: 10.87%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(232, 175, 175);
	border: solid rgb(0, 0, 0) 6px;
	border-radius: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

.aufgabe {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 38.53%;
	left: 7.63%;
	width: 29.67%;
	height: 9.00%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(255, 255, 255);
	border: solid rgb(0, 0, 0) 4px;
	border-radius: 11px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.12vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

.checked {
	display: block;
	position: absolute;
	top: 38.94%;
	left: 0.80%;
	width: 4.96%;
	height: 8.00%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0);
	border: solid rgb(0, 0, 0) 0px;
	margin: 0px;
}

.remove {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 35%;
	left: 39.26%;
	width: 6.61%;
	height: 8.27%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(243, 10, 10);
	border: solid rgb(0, 0, 0) 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.83vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

#header1 {
	top: 0.7%;
	left: 37.02%;
	width: 32.65%;
	font-size: 3.96vw;
}

#div2 {
	top: 12.00%;
	left: 40.74%;
	width: 25.80%;
	font-size: 2.55vw;
}

#eingabe {
	display: block;
	position: absolute;
	top: 25%;
	left: 35%;
	width: 33.26%;
	height: 6%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(255, 255, 255);
	border: solid rgb(0, 0, 0) 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.83vw;
	padding: 0.5%;
	padding-left: 1%;
	margin: 0px;
}

#add_button {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 35.00%;
	left: 54.88%;
	width: 7.28%;
	height: 8.86%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(22, 231, 21);
	border: solid rgb(0, 0, 0) 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.69vw;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

.completed {
	text-decoration: line-through;
 }

 #todo-list {
    position: fixed;
    bottom: 0;
    left: 20%;
    right: 20%;
}

/* Grundstil für mobile Geräte */
#todo-list li {
    font-size: 2.5vw;
    max-width: 100%;
}

/* Anpassungen für größere Bildschirme (z.B., wenn die Breite über 768px liegt) */
@media screen and (min-width: 768px) {
    #todo-list li {
        font-size: 1.8vw;
        max-width: 100%;
    }
}


 #todo-list li {
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(199, 228, 228);
    border: solid rgb(0, 0, 0) 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8vw;
    padding: 0.5%;
    padding-left: 1%;
    margin: 0px;
}

#todo-list li span {
    background-color: rgb(211, 243, 192);
    padding: 10px;
    display: inline-block; /* Stellen Sie das Element auf inline-block zurück */
    border-radius: 5px;
    max-width: 20%; /* Verwenden Sie max-width anstelle von width */
    box-sizing: border-box;
}