body,
html {
 overflow-x: hidden;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}

a {
 text-decoration: none;
 color: lightblue;
 transition: all 0.3s ease;
}

a:hover {
 color: rgb(24, 139, 188);
}

body {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #f0f0f0;
 font-family: Arial, sans-serif;
 transition: all 0.2s ease-in-out;
 min-height: 100vh;
 max-width: 100%;
 overflow-x: hidden;
}

footer {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: #333;
 color: white;
 text-align: center;
 font-size: 12px;
 border-top: 1px solid white;
}

body.dark-theme {
 background-color: #202020;
 color: #fff;
}

.dark-theme .splash-text {
 color: gray;
}

.dark-theme .splash-screen {
 color: #ccc;
}

.dark-theme .theme-toggle-label {
 color: #ccc;
}

.dark-theme .memory-text {
 background-color: rgba(255, 255, 255, 0.5);
 color: #000;
}

.dark-theme .detail-view {
 background-color: rgba(0, 0, 0, 0.9);
}

.dark-theme .detail-view #detailTitle {
 color: #fff;
}

.dark-theme .detail-view #imageTotal {
 color: #fff;
}

.dark-theme .arrow {
 color: #fff;
}

/* body {
 background: linear-gradient(to right, #ffffff, #ffffff);
 transition: background 0.5s linear;
} */

/* * {
 transition: all 0.5s linear;
} */

/* body::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #ffffff, #ffffff);
 z-index: -1; 
 opacity: 0;
 transition: opacity 0.5s linear;
}

body.dark-theme::before {
 opacity: 1;
 background: linear-gradient(135deg, #2e2e2e, #000000);
} */

/* @keyframes slideBackground {
 from {
  background-position: -100% 0;
 }

 to {
  background-position: 100% 0;
 }
}

body {
 background: linear-gradient(90deg, #ffffff, #000000);
 background-size: 200% 100%;
 animation: slideBackground 0.5s linear forwards;
}

body.dark-theme {
 background: linear-gradient(90deg, #ffffff, #000000);
} */

.theme-toggle {
 position: fixed;
 top: 10px;
 right: 10px;
 z-index: 99;
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
}

#themeToggle {
 position: absolute;
 left: 21%;
 transform: translateX(-70%);
}

.theme-toggle:focus {
 outline: none;
}

.theme-toggle-button {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 30px;
 background-color: #dddddd;
 border-radius: 15px;
 right: 30px;
 transition: background-color 0.3s ease;
}

.theme-toggle-button::before {
 content: '';
 position: absolute;
 top: 2px;
 left: 2px;
 width: 26px;
 height: 26px;
 background-color: #ffffff;
 border-radius: 50%;
 transition: left 0.3s ease;
}

.dark-theme .theme-toggle-button {
 background-color: #555555;
}

.dark-theme .theme-toggle-button::before {
 left: 32px;
}

.theme-toggle-label {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 50%;
 font-family: Arial, sans-serif;
 font-size: 14px;
 color: #555555;
 transition: color 0.3s ease;
}

.dark-theme .theme-toggle-label {
 color: #ffffff;
}

.splash-screen {
 position: absolute;
 top: 50%;
 transform: translateY(-50%) scale(1);
 text-align: center;
 width: 100%;
 transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.splash-text {
 font-size: 2em;
 font-weight: bold;
 transition: transform 1s ease-in-out;
}

/* .dark-theme .splash-text {
 color: gray;
} */

.main-content {
 display: none;
 text-align: center;
}

.main-title {
 font-size: 2em;
 margin-bottom: 20px;
}

.memories {
 display: flex;
 justify-content: space-between;
 /* Mengatur jarak antar elemen */
 flex-wrap: wrap;
 padding: 0 20px;
 /* Memberi padding pada kontainer agar ada jarak di sisi kiri dan kanan */
}

/* .memory {
 width: 260px;
 height: 170px;
 background-color: #fff;
 border: 2px solid #000;
 border-radius: 10px;
 position: relative; --
 position: absolute;
 top: 50%;
 overflow: hidden;
 transition: transform 0.5s ease-in-out;
} */

.memory {
 margin: 0 10px;
 /* Jarak kanan kiri untuk setiap elemen */
 margin-top: 160px;
 width: 260px;
 /* Mengatur lebar elemen dengan memperhitungkan margin */
 max-width: 260px;
 height: 170px;
 background-color: #fff;
 border: 2px solid #000;
 border-radius: 10px;
 overflow: hidden;
 position: relative;
 transition: transform 0.5s ease-in-out;
}

.memory img {
 width: 100%;
 /* Adjust image width to fit landscape orientation */
 height: 100%;
 /* Adjust image height to fit landscape orientation */
 position: absolute;
 top: 0;
 left: 0;
 transition: opacity 0.5s ease-in-out;
}

.memory .hover-image {
 opacity: 0;
}

.memory:hover:has(.hover-image) .default-image {
 opacity: 0;
}

.memory:hover .hover-image {
 opacity: 1;
}

.memory.hidden {
 transform: translateY(100vh);
}

.memory.visible {
 transform: translateY(0);
}

.memory-text {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 padding: 5px;
 border-radius: 5px;
 font-size: 1.2em;
 transition: transform 0.5s ease-in-out, color 0.3s ease, background 0.3s ease-in, background-color 0.2s ease-in-out;
 text-decoration: none;
}

.memory-text:hover {
 background-color: #fff;
 color: #000;
}

.memory:hover .memory-text {
 transform: translateX(-50%) translateY(5px);
 cursor: pointer;
}

.detail-view {
 top: 0px;
 height: 100%;
 width: 100%;
 /* width: 56%;
 height: 75%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); */
 background-color: rgba(255, 255, 255, 0.9);
 padding: 24px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 z-index: 999;
 transition: all 0.5s ease;
 position: fixed;
}

/* .detail-view {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgba(255, 255, 255, 0.9);
 padding: 24px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 z-index: 999;
 transition: all 0.5s ease-in;
} */

.additionalDiv {
 /* margin-right: 100%; */
 /* margin-left: 185px; */
 width: 62%;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* max-width: 80%; */
 /* max-height: 80%; */
 /* background: #8080804f; */
 /* border-radius: 10px; */
 padding: 20px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 /* overflow: auto; */
 height: 80%;
}

/* .additionalDiv {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(128, 128, 128, 0.3);
 /* Transparan abu-abu
} */

.detail-view.hide {
 /* right: 100%; */
 transform: translateX(-150%);
}

.detail-view #detailTitle {
 border-bottom: none !important;
 font-size: large;
 padding-bottom: 0px !important;
 text-align: center;
 margin-top: -20px;
 margin-bottom: 2px;
 /* position: fixed; */
}

.detail-view #detailDesc {
 top: 25px;
 transform: translateX(-50%);
 left: 50%;
 position: absolute;
 font-size: 10px;
 text-align: center;
}

.detail-view #imageTotal {
 float: right;
 /* margin-top: -29px; */
 /* margin-bottom: -10px; */
 font-size: medium;
 transition: all 0.3s ease, margin 0.5s ease, transform 0.3s ease;
 position: absolute;
 bottom: 80px;
 left: 50%;
 transform: translateX(-50%);
}

/* .detail-view .close-button {
 margin-top: -25px;
 position: fixed;
} */

.detail-view .close-button {
 font-size: 32px;
 background: none;
 border: none;
 padding: 1px;
 margin-top: -10px;
 margin-left: 10px;
 position: fixed;
 padding-right: 5px;
 padding-left: 5px;
 cursor: pointer;
}

.close-button .icon {
 color: white;
}

/* .detail-image {
 /* max-width: 53vw;
 margin-left: 9%;
 margin-top: 10%;
 max-width: 80vw;
 max-height: 80vh;
 border-radius: 10px;
 overflow: hidden;
 filter: brightness(90%) contrast(120%) sepia(10%) grayscale(10%) saturate(100%) blur(0px);
} */

.detail-image {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 80vw;
 max-height: 80vh;
 border-radius: 10px;
 overflow: hidden;
 filter: brightness(90%) contrast(120%) sepia(10%) grayscale(10%) saturate(100%) blur(0px);
}

.arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 font-size: 2em;
 cursor: pointer;
 color: #000;
}

.left-arrow {
 left: 90px;
}

.right-arrow {
 right: 90px;
}

.username-box {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 14px;
 display: none;
 transition: opacity 0.3s;
 white-space: nowrap;
 z-index: 10;
 transform: translateX(0%);
}

.username-box a {
 color: #1da1f2;
 text-decoration: none;
}

.username-box a:hover {
 text-decoration: underline;
}

/* .hover-area {
 position: absolute;
 cursor: pointer;
 border-radius: 50%;
 display: inline-block;
}

.hover-area::before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 /* background-color: rgba(255, 0, 0, 0.3);
 border-radius: 50%;
}

.hover-area.always-show::before {
 background-color: rgba(255, 0, 0, 0.3);
}

.dark-theme .detail-view {
 background-color: #555555;
}

.detail-view #detailTitle {
 text-align: center;
 margin-top: -20px;
 margin-bottom: 2px;
 /* position: fixed;
 transition: all 0.5s ease-in;
}

.dark-theme .detail-view #detailTitle,
.dark-theme .detail-view #imageTotal {
 color: rgb(201, 198, 198);
}

.detail-view #imageTotal {
 float: right;
 margin-top: -25px;
 margin-bottom: -10px;
 transition: all 0.5s ease-in-out;
}

.detail-view .close-button {
 margin-top: -25px;
 position: fixed;
}

.detail-image {
 max-width: 80vw;
 max-height: 80vh;
 border-radius: 10px;
 overflow: hidden;
 filter: brightness(90%) contrast(120%) sepia(10%) grayscale(10%) saturate(100%) blur(0px);
}

.arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 font-size: 2em;
 cursor: pointer;
 color: #000;
}

.left-arrow {
 left: 2px;
}

.right-arrow {
 right: 2px;
} */

.hidden {
 display: none !important;
}

@media only screen and (min-width: 1213px) {
 .memoryShow {
  transform: scale(1) translateY(-50%) !important;
 }
}

@media only screen and (max-width: 1212px) {
 #themeToggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
 }

 .memories {
  justify-content: center;
 }

 .memory {
  width: 260px;
  height: 170px;
  /* width: 100%;
  height: auto; */
  /* position: absolute; */
 }

 .memory {
  /* margin-bottom: -140px; */
  width: 260px;
  margin-top: 0px;
  margin-right: 45px;
 }

 .memoryShow {
  transform: scale(1) translateY(0%) !important;
 }

 .memory.visible {
  transform: translateY(40%);
 }

 /* .detail-image {
  max-width: 90vw;
  max-height: 70vh;
 } */

 .main-content {
  position: absolute;
  /* top: 40%; */
  left: 50%;
  transform: translateX(-45%);
 }

 .detail-image {
  max-width: 70vw;
  max-height: 50vh;
 }

 .detail-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

 .detail-view #imageTotal {
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
 }

 .splash-text {
  font-size: 20px;
 }

 .splash-screen {
  transform: translateY(150%) scale(0.7);
  top: 35%;
  /* top: calc(100% - 36rem); */
  width: auto;
 }

 .detail-view .close-button {
  margin-top: -15px;
  margin-left: 20px;
 }

 .detail-view #detailTitle {
  margin-top: 15px;
 }
 .detail-view #detailDesc {
  margin-top: 45px;
 }
}

@media only screen and (max-width: 480px) {
 /* .memory {
  /* width: calc(100% - 20px); --
  /* height: auto; --
  width: 200px;
  height: 140px;
 } */

 .memories {
  justify-content: center;
  padding: unset;
 }

 .memory {
  /* margin-bottom: -140px; */
  width: 260px;
  margin-top: 0px;
  margin-right: 45px;
 }

 .left-arrow {
  left: 40px;
 }
 
 .right-arrow {
  right: 40px;
 }
 
 /* footer {
  /* width: 95%;
 } */
}