@font-face {
  font-family: 'odditymedium';
  src: url('file-webfont.woff2') format('woff2'),
       url('file-webfont.woff') format('woff');
}

/* Scrollbar styling */ 
::-webkit-scrollbar { width: 12px; } 

::-webkit-scrollbar-track { background: white; border: double; border-color: darkgray} 

::-webkit-scrollbar-thumb { background-color: darkseagreen; border-radius: 20px; border: double; border-color: white}

a:link {
    color:darkolivegreen;
    text-decoration: none;
}
a:visited{
    color: darkolivegreen;
}

a:hover{
    color:forestgreen;
}

body {
    margin: 0;
    background-image: url("https://sadhost.neocities.org/images/tiles/tumblr_inline_mlkwolhobQ1r53miq.png");
    background-position: center;
    font-family: monospace;
    font-size: 1.75vh;
    overflow: hidden; 
}

/* MAIN ROW - three columns */
.main-row {
    display: flex;
}

/* LEFT COLUMN */
.left-column {
    display: flex;
    flex-direction: column;
    width: 200px;
    background-color: white;
    min-height: 98vh;
    border-width: 7px;
    padding: 0.5%;
    opacity: 95%;
    
    
    border-style: solid;
    border-image-source: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/de283233162c752d-89/s75x75_c1/62ee23af1906bc552dbea259f32e0801263b4635.pnj");
    border-image-slice: 8;
    border-image-repeat: round;
    
    border-left-style: none;
    border-top-style: none;
    border-bottom-style: none
}

/* MIDDLE COLUMN */
.middle-column {
    display: flex;
    flex-direction: column;
    padding: 1vh;
    padding-top: 2vh;
    margin-left:  2vh;
    margin-right: 2vh;
    gap: 6px;
    opacity: 95%;
}

/* HEADER ONLY OVER MIDDLE COLUMN */
.header {
    width: 99%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGOPHhcjTdjrdBKpruL2NTIpWm2v36AD0Xsg&s")
}

/* RIGHT COLUMN */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 250px;
    padding: 1vh;
    padding-top: 4vh;
    opacity: 95%;
}

/* BOX STYLE */
.lacescr {
    border-width: 7px;
    border-style: solid;
    border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/de283233162c752d-89/s75x75_c1/62ee23af1906bc552dbea259f32e0801263b4635.pnj") 8 fill round;
    overflow: auto;
    box-sizing: border-box;
    padding: 1vh;
    background-color: white;
}

/* TITLE BAR */
.title {
    background-color: darkseagreen;
    height: 8%;
    padding: 3px;
    margin-bottom: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}


/* Image gallery */
.image-gallery {
  display: inline-grid;
  grid-template-columns: repeat(4, 3fr);
  gap: 1vh;
}

.gallery-img {
  width: 150px;
  height: 150px;
  cursor: pointer;
  border: 2px solid darkseagreen;
  transition: transform 0.3s ease, opacity 0.3s;
}

.gallery-img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Gallery overlay */
.gallery-overlay {
  display: none; /* hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13,13,13,0.95);
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 999999;
  flex-direction: column;
}

.gallery-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border: double 5px darkseagreen;
}

.close-btn {
  position: absolute;
  top: 3vh;
  right: 5vw;
  font-size: 6vh;
  color: darkseagreen;
  cursor: pointer;
  font-family: 'OddityMedium', sans-serif;
  z-index: 1000000;
}

.floating-image { 
    position: fixed;
    left: 0vh;
    top:79vh;
    height: auto; 
    z-index: 9999; 
    transition: transform 0.2s; 
} 
    
.floating-image:hover { 
    animation: shake 0.2s infinite; } 
    @keyframes shake { 0% { 
        transform: translate(0px, 0px); } 25% { 
        transform: translate(2px, 2px); } 50% { 
        transform: translate(-2px, -2px); } 75% { 
        transform: translate(2px, -2px); } 100% { 
        transform: translate(-2px, 2px); } 
}

.taped {
  position: relative;
}

.taped::before {
  content: "";
  position: absolute;
  top: -20px;
  width: 150px;
  height: 50px;
  background-image:url('https://hillhouse.neocities.org/materials/stickers/images/tape/pattern-practicaltaxidermy.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  left: 20%; /* default center-ish */
}

/* RANDOMIZED POSITIONS */
.taped:nth-of-type(odd)::before {
  left: auto;
  right: 20px;
    background-image: url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-purple.png');
}

.taped:nth-of-type(3n)::before {
  left: 10%;
   background-image: url('https://hillhouse.neocities.org/materials/stickers/images/tape/algae-bluepink.png');
    height: 40px;
}

.taped:nth-of-type(4n)::before {
  left: 60%;
    background-image: url('https://hillhouse.neocities.org/materials/stickers/images/tape/stars-constellations2.png');
}

.taped:nth-of-type(5n)::before {
  left: 60%;
    background-image: url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-purple.png')
    
}

.taped:nth-of-type(7n)::before {
  left: 30%;
    background-image: url('https://hillhouse.neocities.org/materials/stickers/images/tape/flowers-daisies2.png')
}

.taped:nth-of-type(8n)::before {
  left: 30%;
}

#autoGalleryContainer {
  padding: 1px;
  overflow: hidden;
  position: relative;
  background: white;
}

#autoGalleryImage {
  max-width: 200px;
  max-height: 300px;
  object-fit: contain;
  display: block;
}

#autoGalleryText {
  text-align: center;
  font-size: 12px;
  padding: 5px;
}