body {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-image: url('https://echoescapes.neocities.org/Backdrop.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.escritoire_desk{
  position: relative;
  background-image: url('https://echoescapes.neocities.org/Desk_Beta.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 1915px;
  height: 1620px;
  top: 5px;
  background-attachment: fixed;
  z-index: 1;
  left: -9px;
}

.diary1 {
  position: fixed;
  background-image: url('https://echoescapes.neocities.org/Diary1_Uninterested.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 7vw;
  height: 35vh;
  left: 29vw;
  top: 29vh;
  z-index: 2;
  cursor: pointer;
}

.diary1:hover {
  background-image: url('https://echoescapes.neocities.org/Diary1_Interested.png');
}

.diary1_upclose {
  display: none;
  position: fixed;
  background-image: url('https://echoescapes.neocities.org/Diary1_Opened.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 58vw;
  height: 93vh;
  left: 22vw;
  top: 24vh;
  z-index: 3;
}

.diary_textbox {
  display: grid;
  grid-template-columns: 2.8fr 3fr;
  padding: 153px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  top: -105px;
  position: relative;
  padding-left: 111px;
  padding-bottom: 180px;
}

.diary_tabs {
  display: flex;
  flex-direction: column;
}

.diary_content {
  overflow-y: auto;
  padding-left: 20px;
  color: black;
  padding-left: 40px;
}

.diary_open {
  display: none;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff5c5c;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 4;
}

.close-button:hover {
  background-color: #ff1e1e;
}

.glare-animation {
  position: absolute;
  background: url('https://echoescapes.neocities.org/Glare.png') no-repeat;
  background-size: cover;
  animation: glareLoop 10s infinite;
  width: 1927px;
  height: 1620px;
  top: -10px;
  background-attachment: fixed;
  left: -2px;
}

@keyframes glareLoop {
  0% { opacity: 0; transform: translateX(0px); }
  50% { opacity: 1; transform: translateX(0); }
  75% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0px); }
}