body {
	overflow: hidden;
	background-color: rgba(223, 205, 191, 0.494);
}

#header1 {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: -0.14%;
	left: 25.12%;
	width: 49.76%;
	height: 12.83%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0);
	border: solid rgb(0, 0, 0) 0px;
	border-radius: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.41vw;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	user-select: none;
	text-align: center;
}

#button {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 74.41%;
	left: 38.88%;
	width: 25.95%;
	height: 20.00%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(12, 122, 26);
	border: solid rgb(0, 0, 0) 6px;
	border-radius: 88px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3.54vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

#div5 {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 12.69%;
	left: 29.95%;
	width: 44.93%;
	height: 58.69%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(234, 138, 138);
	border: solid rgb(0, 0, 0) 3px;
	border-radius: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.20vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
	text-align: center;
}

.leftside {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 4.00%;
	height: 7.10%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(103, 217, 68);
	border: solid rgb(0, 0, 0) 0px;
	border-radius: 94px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.83vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

.rightside {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 4.00%;
	height: 7.10%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(103, 217, 68);
	border: solid rgb(0, 0, 0) 0px;
	border-radius: 94px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.83vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
}

#circle1 {
	top: 7.75%;
	left: 3.92%;
}

#circle2 {
	top: 12.05%;
	left: 14.34%;
}

#circle3 {
	top: 21.37%;
	left: 6.53%;
}

#circle4 {
	top: 33.55%;
	left: 1.69%;
}

#circle5 {
	top: 39.28%;
	left: 9.50%;
}

#circle6 {
	top: 27.10%;
	left: 13.96%;
}

#circle7 {
	top: 48.60%;
	left: 15.08%;
}

#circle8 {
	top: 50.75%;
	left: 6.52%;
}

#circle9 {
	top: 62.22%;
	left: 2.43%;
}

#circle10 {
	top: 65.80%;
	left: 10.24%;
}

#circle11 {
	top: 76.55%;
	left: 14.70%;
}

#circle12 {
	top: 79.42%;
	left: 6.14%;
}

#circle13 {
	top: 86.52%;
	left: 2.14%;
}

#circle14 {
	top: 86.52%;
	left: 2.14%;
}

#circle16 {
	top: 4.88%;
	left: 77.21%;
}

#circle17 {
	top: 9.18%;
	left: 83.53%;
}

#circle18 {
	top: 5.60%;
	left: 92.09%;
}

#circle19 {
	top: 21.37%;
	left: 91.72%;
}

#circle20 {
	top: 21.37%;
	left: 84.28%;
}

#circle21 {
	top: 27.10%;
	left: 77.96%;
}

#circle22 {
	top: 34.98%;
	left: 85.03%;
}

#circle23 {
	top: 40.71%;
	left: 92.47%;
}

#circle24 {
	top: 48.59%;
	left: 86.89%;
}

#circle25 {
	top: 41.42%;
	left: 78.71%;
}

#circle26 {
	top: 55.04%;
	left: 79.08%;
}

#circle27 {
	top: 58.62%;
	left: 86.52%;
}

#circle28 {
	top: 54.32%;
	left: 92.84%;
}

#circle29 {
	top: 71.52%;
	left: 93.21%;
}

#circle30 {
	top: 72.95%;
	left: 85.40%;
}

#circle31 {
	top: 77.25%;
	left: 79.45%;
}

#circle32 {
	top: 85.85%;
	left: 86.89%;
}

#circle33 {
	top: 88.00%;
	left: 93.21%;
}

#circle34 {
	top: 88.00%;
	left: 93.21%;
}
#nameenter {
	display: flex;
	position: absolute;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	top: 12.69%;
	left: 29.95%;
	width: 44.93%;
	height: 58.69%;
	z-index: 9;
	color: rgb(0, 0, 0);
	overflow: hidden;
	background-color: rgb(234, 138, 138);
	border: solid rgb(0, 0, 0) 3px;
	border-radius: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.20vw;
	padding: 0px;
	margin: 0px;
	user-select: none;
	text-align: center;
}

/* Add responsive design for index.html */

/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#header1 {
    text-align: center;
    font-size: 2rem;
    margin: 20px 0;
}

#button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    width: fit-content;
}

#div5 {
    padding: 20px;
    text-align: center;
}

/* Circles */
.leftside, .rightside {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 10px;
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 768px) {
    #header1 {
        font-size: 1.5rem;
    }

    #button {
        width: 80%;
        font-size: 1rem;
    }

    #div5 {
        font-size: 0.9rem;
        padding: 10px;
    }

    .leftside, .rightside {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    #header1 {
        font-size: 1.2rem;
    }

    #button {
        width: 100%;
        font-size: 0.9rem;
    }

    #div5 {
        font-size: 0.8rem;
    }

    .leftside, .rightside {
        width: 20px;
        height: 20px;
    }
}