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: 500px;
}


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

 .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 styles */
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;
}

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

}


/* Bucket colors */
.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;
}



/* Aligning the image */
.img {
  display: block;     /* makes <img> respect margin auto */
  margin-left: auto;
  margin-right: auto;
   height: 500px;
   width: 500px;
}