body {
  margin: 0;
  font-family: 'DotGothic16', sans-serif;
  background: #97c0db;
  color: #161b30;
  padding: 20px; /* adds breathing room around the container */
}

.banner {
  background-color: #4b5d70;     /* light blue background */
  color: #334252;                /* dark text color */
  width: 100%; /* Stretches across the full screen */
  height: 60px; /* Adjust this value to make it thinner or thicker */
  text-align: center; /* Centers the text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em; /* Adjust text size if needed */
}


.container {
  display: flex;
  max-width: 700px; /* smaller width */
  max-height: 600px;
  margin: 0 auto;
  border: 3px solid #517385;
  background: white;
  border-radius: 12px; /* optional: makes corners softer */
  overflow: hidden; /* keeps layout tidy */
  margin-left: 40px;
  margin-top: 20px;
}

.sidebar {
  width: 180px; /* slightly smaller sidebar */
  background: #9fd4a2;
  border-right: 1px solid #517385;
  padding: 20px;
}

.sidebar h2 {
  font-size: 1.2em;
  color: #376347;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 5px 0;
}

.sidebar a {
  text-decoration: none;
  color: #376347;
}

.main-box {
  flex: 1;
  padding: 20px;
  background: #8cbf8e;
}

.main-box h1 {
  color: #161b30;
  font-size: 1.6em;
}

.main-box p {
  font-size: 1em;
  margin-bottom: 1em;
} 

/* New Box Styling */
.new-container {
  margin-top: -250px;  /* Add some space above the new container */
  width: 200px;      /* Adjust the width of the new box */
  height: 400px;     /* Adjust the height of the new box */
  border: 2px solid #5cc3f6;
  margin-left: auto;
  padding: 20px;
  background-color: #8fbf92;  /* You can choose your desired background color */
}

.vertical-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #749976; /* You can change the background color here */
}

/* INTERESTS BOX STYLING */
.interest-box {
  top: 420px;
  left: calc(350px);
  position: absolute;
  background-color: #627385; /* You can choose your desired background color */
  border: 5px solid #485766;
  overflow: hidden;
  max-width: 800px;
  max-height: 400px;
}
/* INTERESTS BOX TEXT */
.interest-box h1 {
color: #334252;
}

.borderdec {
  position: absolute;
  top: 0px;         /* Adjust this to match the vertical position of your main box */
  left: calc(20px); /* Moves it to the right of the main box */
}
.borderdec2 {
  position: absolute;
  top: 0px;         /* Adjust this to match the vertical position of your main box */
  left: calc(530px); /* Moves it to the right of the main box */
}
.welcome {
  position: absolute;
  top: 15px;         /* Adjust this to match the vertical position of your main box */
  left: calc(1200px); /* Moves it to the right of the main box */
}
.blinkie1 {
  position: absolute;
  top: 110px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie2 {
  position: absolute;
  top: 135px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie3 {
  position: absolute;
  top: 160px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie4 {
  position: absolute;
  top: 185px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie5 {
  position: absolute;
  top: 210px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie6 {
  position: absolute;
  top: 235px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie7 {
  position: absolute;
  top: 260px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie8 {
  position: absolute;
  top: 285px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie9 {
  position: absolute;
  top: 310px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie10 {
  position: absolute;
  top: 335px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 100px); /* Moves it to the right of the main box */
}
.blinkie11 {
  position: absolute;
  top: 110px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie12 {
  position: absolute;
  top: 135px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie13 {
  position: absolute;
  top: 160px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie14 {
  position: absolute;
  top: 185px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie15 {
  position: absolute;
  top: 210px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie16 {
  position: absolute;
  top: 235px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie17 {
  position: absolute;
  top: 260px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie18 {
  position: absolute;
  top: 285px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie19 {
  position: absolute;
  top: 320px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}
.blinkie20 {
  position: absolute;
  top: 345px;         /* Adjust this to match the vertical position of your main box */
  left: calc(50% + 260px); /* Moves it to the right of the main box */
}

.stamp1 {
  position: absolute;
  top: 360px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp2 {
  position: absolute;
  top: 420px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp3 {
  position: absolute;
  top: 480px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp4 {
  position: absolute;
  top: 540px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp5 {
  position: absolute;
  top: 600px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp6 {
  position: absolute;
  top: 660px;      /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp7 {
  position: absolute;
  top: 720px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp8 {
  position: absolute;
  top: 780px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp9 {
  position: absolute;
  top: 840px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp10 {
  position: absolute;
  top: 900px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp11 {
  position: absolute;
  top: 960px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp12 {
  position: absolute;
  top: 1020px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.stamp13 {
  position: absolute;
  top: 1080px;         /* Adjust this to match the vertical position of your main box */
  left: calc(65px); /* Moves it to the right of the main box */
}
.divider {
  position: absolute;
  top: 360px;         /* Adjust this to match the vertical position of your main box */
  left: calc(300px); /* Moves it to the right of the main box */
}
.tree {
  position: absolute;
  top: 420px;         /* Adjust this to match the vertical position of your main box */
  left: calc(1100px); /* Moves it to the right of the main box */
}
.my-clock {
  position: absolute;
  top: 360px;         /* Adjust this to match the vertical position of your main box */
  left: calc(390px); /* Moves it to the right of the main box */
}
.my-tama {
  position: absolute;
  top: 420px;
  left: 650px;
}