body {
    background: url('images/colourful_checkers.jpg') no-repeat center center / cover fixed;
    min-height: 100vh;
    cursor: url('images/pink_butterfly_cursor.png'), auto;
    margin: 0;
    padding: 0;
    font-family: "Times New Roman", Times, serif;
}

h1, h2, h3 {
    font-family: 'Milonga', serif;
}
ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #AB82A4; 
  font-family: 'Milonga', serif; 
} 

ul li { 
  float: left; 
} 

ul li a { 
  display: block; 
  color: white; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
} 

ul li a:hover { 
  background-color: #a63d5b; 
}


.calendar-box {
    position: absolute; 
    top: 250px; 
    right: 200px; 
    width: 320px; 
    height: auto; 
    background-color: #e9cbcd; 
    border: 5px solid #a63d5b; 
    box-sizing: border-box; 
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; 
    text-align: center; 
}

.calendar-box table {
    width: 100%; 
    border-collapse: collapse; 
    background-color: #AB82A4; 
}

.calendar-box td {
    padding: 6px; 
    text-align: center; 
    border: 1px solid white; 
}
.container {
    position: relative;
    height: 1080px;
    width: 1920px
}

.box { 
  position: absolute; 
  border-radius: 8px; 
  padding: 15px; 
  overflow-y: auto; 
  box-sizing: border-box; 
  border: 1px solid rgba(0,0,0,0.1); 
}

.aboutme-box { 
  top: 100px; 
  left: 500px; 
  width: 700px; 
  height: 500px; 
  background-color: #e9cbcd; 
  
  display: flex;
  align-items: center; 
  gap: 20px;        
  border: 5px solid #a63d5b;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.aboutme-box img { 
  width: auto;        
  height: 400px;       
  object-fit: cover;   
  border-radius: 4px; 
}

.aboutme-text {
  flex: 1;            
}

.status-box {
    top: 100px;
    right: 200px;
    width: 400px;
    height:auto;
    background-color: #a2c092;
    border: 5px solid #6d8f62;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}

.currentlywatching-box {
  position: relative; /* Establishes the positioning context for inner elements */
  top: 100px;
  left: 100px;
  width: 300px;
  height: auto;
  background-color: #a2c092;
  border: 5px solid #6d8f62;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.currentlywatching-box .frame-bg {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative; 
  z-index: 2;
}

.currentlywatching-box .frame-overlay {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  object-fit: contain;
  z-index: 1; 
}

.chat-box {
    top: 550px;
    right: 200px;
    width: auto;
    height:200px;
    background-color: #e3f1fb;
    border: 5px solid #99c3e4;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}

.caticon {
  position: absolute; /* or fixed */
  bottom: 50px;
  right: 100px;
  width: auto;
  height: 300px;
}