body {
    font-family: "Arial Rounded MT", sans-serif;
    font-size: large;
    color: #000;
    margin: 0 auto; 
    display: block; /* Add this */

}

.box{
	display: block;
	width: 100%;
	padding: 5%;
	background-color: rgb(154, 68, 241);
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 auto;
	font-size: x-large;
} 

iframe{
    width: 100%;
    height:300px;
}

.top{
    background-color: #050112; /* Adjust background colors */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Add this */
    padding: 2%; /* Add padding */
width: 10%;
}

 .container{
    background-color: rgb(255,102,0); /* Adjust background colors */
    margin: 0 auto; /* Center horizontally */
    display: block; /* Add this */
    padding: 2%; /* Add padding */
    width: 50%;
    border: 24px solid black;
}

button {
    font-size:200% ;
    background-color: #e0f309;
    padding: 10px 20px; /* Add padding */
    text-align: center;
}

.main {
    font-size:200% ;
    background-color: #e0f309;
    padding: 10px 20px; /* Add padding */
    text-align: center;
    border: black solid 10px;
}

.buffer{
    background-color: white;
  height: 50px;
}

h2 {
    font-size: large;
    text-align: center;
}

.logo,.container,.bucketArea, .chairArea, .pathArea, .ropeArea, .testArea {
    max-width: 100%; /* Ensure responsiveness */
    margin: 0 auto; /* Center horizontally */
    padding: 2%; /* Add padding */
    text-align: center;

}



.bucket1 {
    padding: 2%;
background-color: rgb(240, 143, 110);}
.bucket2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.bucket3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.bucket4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.bucket5 {
padding: 2%;
background-color: rgb(109, 221, 246);}

/* Chair colors */
.chair1 {
padding: 2%;
background-color: rgb(240, 143, 110);}
.chair2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.chair3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.coat4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.coat5 {
padding: 2%;
background-color: rgb(118, 244, 246);}

/* Path colors */
.path1 {
padding: 2%;
background-color: rgb(240, 143, 110);}
.path2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.path3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.path4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.path5 {
padding: 2%;
background-color: rgb(105, 231, 238);}

/* Rope colors */
.rope1 {
padding: 2%;
background-color: rgb(240, 143, 110);}
.rope2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.rope3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.rope4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.rope5 {
padding: 2%;
background-color: rgb(108, 243, 234);}

/* Test colors */
.test1 {
padding: 2%;
background-color: rgb(240, 143, 110);}
.test2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.test3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.test4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.test5 {
padding: 2%;
background-color: rgb(239, 145, 217);}

/* extra colors */
.extra1 {
padding: 2%;
background-color: rgb(240, 143, 110);}
.extra2 {
padding: 2%;
background-color: rgb(236, 187, 110);}
.extra3 {
padding: 2%;
background-color: rgb(240, 234, 115);}
.extra4 {
padding: 2%;
background-color: rgb(118, 236, 105);}
.extra5 {
padding: 2%;
background-color: rgb(238, 135, 226);
}
.bucketbox {
    display: block;
    width: 50%;
    padding: 2%;
    background-color: rgb(154, 68, 241);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30pt;
    margin: 0 auto;
}

.bucketchallenge {
            display: block;
            width: 50%;
            padding: 2%;
            background-color: rgb(24, 10, 226);
            color: white;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30pt;
            margin: 0 auto;
}

.img {
    display: block; /* Add this */
    margin: 0 auto; /* Center horizontally */
   height: 500px;
   width: 500px;
}

.thetask{
    display: block;
    width: 50%;
    padding: 2%;
    background-color: rgb(154, 68, 241);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30pt;
    margin: 0 auto;

}

.hr {
  border: none;        /* remove default border */
  height: 20px;        /* thickness */
  background-color: black; /* or any color you want */
  margin: 20px 0;      /* optional spacing above/below */
}