.menu{align-items: baseline;}
.gallery{
    flex-direction: row;
    width: fit-content;
    height: 100vh;
}

.content{
    padding: 10vh 0;
    height: 100vh;
}

.description {
    position: fixed;
    bottom: 0;
    margin-left: 14px;
    font-size: 1.1em;
    width: 80vw;
    text-shadow: -1px -1px 5px var(--bkg-col), 1px 1px 5px var(--bkg-col);
}
figure{left: 5vw;}
figure.text {
    display: initial;
    max-width: 50vw;
    height: fit-content;
}

/* Scrollbar */
  figure.text::-webkit-scrollbar {
    width: 16px;
  }

  figure.text::-webkit-scrollbar-track {
    background: #d494cc;
    box-shadow: inset 1px 1px 0 #4a1040, inset -1px -1px 0 #f5c8f0;
  }

  figure.text::-webkit-scrollbar-thumb {
    background: #e8a8e2;
    border-top: 2px solid #f5c8f0;
    border-left: 2px solid #f5c8f0;
    border-right: 2px solid #4a1040;
    border-bottom: 2px solid #4a1040;
    min-height: 20px;
  }

  figure.text::-webkit-scrollbar-thumb:hover {
    background: var(--highlight);
  }

  figure.text::-webkit-scrollbar-thumb:active {
    border-top: 2px solid #4a1040;
    border-left: 2px solid #4a1040;
    border-right: 2px solid #f5c8f0;
    border-bottom: 2px solid #f5c8f0;
  }

  figure.text::-webkit-scrollbar-button {
    background: #e8a8e2;
    border-top: 2px solid #f5c8f0;
    border-left: 2px solid #f5c8f0;
    border-right: 2px solid #4a1040;
    border-bottom: 2px solid #4a1040;
    height: 16px;
    width: 16px;
    display: block;
  }

  figure.text::-webkit-scrollbar-button:active {
    border-top: 2px solid #4a1040;
    border-left: 2px solid #4a1040;
    border-right: 2px solid #f5c8f0;
    border-bottom: 2px solid #f5c8f0;
  }

  figure.text::-webkit-scrollbar-button:vertical:decrement {
    background-color: #e8a8e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,4 13,11 3,11' fill='%2337011e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  figure.text::-webkit-scrollbar-button:vertical:increment {
    background-color: #e8a8e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,12 13,5 3,5' fill='%2337011e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
figure.text::-webkit-scrollbar-button:vertical:decrement:increment,
figure.text::-webkit-scrollbar-button:vertical:increment:decrement {
  display: none;
}

  figure.text::-webkit-scrollbar-corner {
    background: #d494cc;
  }

  /* Firefox scrollbar fallback */
@supports not selector(::-webkit-scrollbar) {
    figure.text {
        scrollbar-width: thin;
        scrollbar-color: var(--highlight) var(--bkg-col);
    }
}

/* END of  Scrollbar */

.icon h2 a{
  min-width: 115px;
  display: inline-block;
}

/* Mobile Gradient */
.grad {display: none;}

@media (hover: none) {
  figure.text{
    /* position: relative;  */
    overflow: visible; 
    padding: 0;
  }
  .scroll-text {
    overflow-y: scroll;
    max-height: calc(80vh - 40px);
    height: 100%;
    padding: 20px;
  }
  .grad.grad-bottom {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    pointer-events: none;
    transition: opacity 0.25s ease;
    background: linear-gradient(to top, var(--bkg-col) 0%, transparent 100%);
    opacity: 1;
  }
}

@media screen and (max-width: 500px) {
    .gallery{height: calc(100vh - 170px); padding-right: 20vw;}
    figure img { width: 110vw;}
    figure.text{max-width: 85vw; max-height: 80vh; top: 35px;}
    figure img.portrait { width: 85vw;}
    .icon h2 a{min-width: initial;}
    figure.text {
        scrollbar-width: thin;
        scrollbar-color: var(--highlight) var(--bkg-col);
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .menu{
        width: 50vw;
        height: fit-content;
        margin-left: 10px;
        top: -60px;
    }
    .gallery{  overflow-y: clip; }
    .icon h2 a { min-width: 70px;}
    .description{
        right: 10px;
        text-align: end;
    }
    .scroll-text {max-height: 260px;}
}