body {
background: #ffffff; /* WHITE background */
margin: 0;
padding: 0;
}

h1 {
font-size: 24pt;
font-family: arial;
}

h2 {
font-size: 18pt;
font-family: arial;
}

#wrapper {
border-radius: 40px;
text-align: left;
width: 1050px;
margin: 0 auto;
padding: 0;
background-color: #ffff99; /* match body */
border: 20px solid #ffff00;
}

#header {
border: 2px blue solid;
height: 160px;
margin: 0;
padding: 0;
}

#contents {
border: 2px white solid;
width: 800px;
float: right;
margin: 0;
padding: 10px 0;
text-align: center;
background: transparent;
}

#sidebar {
border: 2px black solid;
background-color: #f6921e;
padding: 10pt;
width: 180px;
float: left;
margin: 0;
}

#footer {
border: 2px green solid;
text-align: center;
clear: both;
margin: 0;
padding: 0.5em 0;
}

/* BOX AROUND THE WHOLE CALENDAR */
.calendar-box {
background: #fff8c4; /* light yellow box */
border-radius: 30px;
padding: 25px;
border: 4px solid #f2c200;
display: block;
max-width: 100%;
margin: 30px auto; /* centers it */
box-sizing: border-box;
}


/* The big 12-month table */
.year-calendar {
margin: 0 auto;
}

/* Each month calendar: only inside is white */
table.calendar {
border-collapse: collapse;
margin: 0 auto;
background: #ffffff; /* white only inside calendar */
}

table.calendar th,
table.calendar td {
border: 3px solid #000;
padding: 2px 4px;
font-size: 10pt;
font-family: arial;
background: #ffffff; /* make sure each cell is white */
}

/* MAP */
.map-box {
margin: 30px 0;
text-align: center;
}

.map-box iframe {
max-width: 100%;
}

/* SIDE BUTTONS */
.side-btn {
display: block;
margin-top: 12px;
background-color: #0b58a8;
color: white;
text-decoration: none;
padding: 8px 0;
border-radius: 14px;
text-align: center;
font-weight: bold;
}

.side-btn:hover {
background-color: #083f7a;
}

/* INTRO TITLE */
.intro-title {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}

/* WRAPPER: add padding so everything sits nicely inside the yellow box */
#wrapper {
border-radius: 40px;
text-align: left;
width: 1050px;
margin: 0 auto;
padding: 20px; /* <-- add padding */
background-color: #ffffff;
border: 20px solid #ffff00;
box-sizing: border-box; /* include padding in width */
}

/* CONTENTS: slightly narrower + inner padding */
#contents {
/* border: 2px white solid; // optional, you can remove this line if you don’t want the white line */
width: 760px; /* was 800px */
float: right;
margin: 0;
padding: 20px; /* add left/right padding */
text-align: center;
background: transparent;
box-sizing: border-box;
}

/* CALENDAR BOX: never wider than contents, centered */
.calendar-box {
background: #ffffff;
border-radius: 50px ;
padding: 60px;
border: 6px solid #ffffff;
display: block;
width: 95%; 
min-height: 1200px;
margin: 40px auto;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex start;
}

#wrapper {
border: 20px solid #ffff00;
}

/* ==== TIME TABLE BOX (like the picture) ==== */

.timetable-block {
position: relative;
margin: 40px auto 20px;
width: 90%;
max-width: 700px; /* fits inside #contents */
background: #fff8c4; /* light cream like screenshot */
border-radius: 30px;
border: 3px solid #f2c200; /* yellowish border */
padding: 40px 30px 30px; /* top padding extra so bar can “sit” */
box-sizing: border-box;
}

/* orange bar with “Time Table” */
.timetable-bar {
position: absolute;
top: -30px; /* makes it float a bit above the box */
left: 0;
right: 0;
margin: 0 auto;
width: 70%;
background: #f6921e;
color: #003366;
padding: 10px 20px;
border-radius: 10px 10px 0 0;
font-family: Arial, sans-serif;
font-size: 26px;
font-weight: bold;
text-align: left;
}

/* inside of the box */
.timetable-body {
margin-top: 10px;
}

/* the table itself */
.timetable-table {
width: 100%;
border-collapse: collapse;
background: #fff8c4; /* same as box so it blends */
font-family: Arial, sans-serif;
font-size: 11pt;
}

.timetable-table th,
.timetable-table td {
border: 1px solid #000;
padding: 4px 8px;
text-align: left;
}

.timetable-table th:first-child,
.timetable-table td:first-child {
text-align: center; /* Time column numbers centered */
width: 40px;
}

/* ===== PROFILE PAGE LAYOUT ===== */
body.profile-page {
background: #ffffff;
}

/* outer yellow frame */
body.profile-page #wrapper {
width: 900px;
margin: 20px auto;
border: 20px solid #ffff00;
border-radius: 40px;
background: #ffff99;
padding: 0;
box-sizing: border-box;
}

/* inner rounded white box with pink border */
body.profile-page #inner-box {
margin: 20px;
border-radius: 40px;
border: 3px solid #cc0066;
background: #ffffff;
padding: 20px 20px 40px 20px;
box-sizing: border-box;
}

/* header (text itself already pink from <font>) */
body.profile-page #header {
text-align: center;
margin-bottom: 10px;
}

/* left orange Introduction block */
body.profile-page #sidebar {
float: left;
width: 220px;
background: #f6921e;
padding: 20px 15px;
box-sizing: border-box;
min-height: 260px; /* enough height to match picture */
}

/* main content to right of sidebar */
body.profile-page #contents {
margin-left: 220px;
padding: 20px;
box-sizing: border-box;
}

/* orange bar with "Photo" */
body.profile-page .contenttitle {
background: #f6921e;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
padding: 8px 16px;
}

/* picture spacing */
body.profile-page #contents img {
margin-top: 20px;
}

/* blue "Home" button */
body.profile-page .bluebotton {
display: inline-block;
padding: 6px 18px;
background: #0b58a8;
color: #ffffff;
text-decoration: none;
border-radius: 10px;
font-family: Arial, sans-serif;
}

body.profile-page .bluebotton:hover {
background: #083f7a;
}

/* footer centered at bottom of white box */
body.profile-page #footer {
clear: both;
text-align: center;
margin-top: 20px;
font-size: 12px;
}

body {
font-family: Arial;
background: #ffffff;
}

/* Main wrapper */
#wrapper {
width: 900px;
margin: auto;
border: 8px solid yellow;
border-radius: 30px;
padding: 20px;
}

/* Header */
#header {
padding: 20px;
}

/* Sidebar (left menu) */
#sidebar {
float: left;
width: 200px;
background: orange;
padding: 15px;
border-radius: 20px;
}

/* Content (right side) */
#contents {
margin-left: 230px;
background: #ffffff;
padding: 20px;
border-radius: 20px;
}

/* Title inside content */
.contenttitle {
font-size: 25px;
font-weight: bold;
padding-bottom: 10px;
}

/* Home button style */
.bluebutton {
background: blue;
color: white;
padding: 8px 15px;
border-radius: 8px;
text-decoration: none;
}

.bluebutton:hover {
background: darkblue;
}

/* Footer */
#footer {
clear: both;
padding-top: 20px;
text-align: center;
}