:root[data-theme="light"] {
  --background-color: #fff;
  --text-color: #000;
  --accent-text-color: #000;
  --link-color: #000;

  --container-background-color: #fff;
  --accent-background-color: #fff;
}

:root[data-theme="dark"] {
  --background-color: #fff;
  --text-color: #000;
  --accent-text-color: #000;
  --link-color: #000;

  --container-background-color: #fff;
  --accent-background-color: #fff;
}

@font-face {
src: url(https://files.catbox.moe/bi1ixl.ttf);
font-family: wiener;
}
@font-face {
src: url(https://files.catbox.moe/bgypu8.ttf);
font-family: wiener2;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #fff;
  }

  .container {
    display: flex;
    align-items: center;
    position: relative;
  }

  .image-box {
    width: 300px;
    height: 450px;
    overflow: hidden;
    transition: transform 0.6s ease;
  }

  .image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
  }

.text-stack {
  display: flex;
  flex-direction: column;
  align-items: center; /*maybe change to flex l8r*/ 
  margin-left: 0px;
}

.text-header {
  font-family: wiener;
  letter-spacing: 2px;
  font-size: 33px;
  font-weight: bold;
    text-shadow: -1px 0 #000, 0 2px #000, 2px 0 #000, 0 -1px #000, 0 0;
  color: #fff;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.6s ease;
}

  .text-box {
    width: 220px;
    height: 250px;
    overflow: auto;
    text-align: justify;
    font-size: 20px;
    font-family: EB_Garamond;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    color:#fff;
    background: #fff;
    border: 4px double #000;
    margin-left: 0px;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
    padding: 20px;
    box-sizing: border-box;
  }

.image-box:hover,
.text-box:hover,
.text-header:hover {
  transform: translateX(-20px);
}

.image-box:hover + .text-stack .text-box,
.text-stack:hover .text-box {
  opacity: 1;
  transform: translateX(0);
}

.image-box:hover + .text-stack .text-header,
.text-stack:hover .text-header {
  opacity: 1;
  transform: translateY(0);
}

  .text-container {
width: 520px;
    height: 500px;
      padding: 0 !important;
  margin: auto;
  position: relative;
  overflow: visible;
}

  .publish-timestamp, .edit-timestamp, .site-footer, #theme-toggle {
  visibility: hidden;
}

.text-box::-webkit-scrollbar {
  width: 8px;            
}

.text-box::-webkit-scrollbar-track {
  background: transparent;       
}

.text-box::-webkit-scrollbar-thumb {
  background: #fff;       
  box-shadow: inset 0 0 0 1px #000; 
  border-radius: 10;       
}

.text-box::-webkit-scrollbar-thumb:hover {
  background: #f2f2f2;    
}

.text-box::-webkit-scrollbar-thumb:active {
  background: #e6e6e6;   
}

.text-box::-webkit-scrollbar-corner {
  background: #fff;
  box-shadow: inset 0 0 0 1px #000;
}