/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("/_assets/20240804_SelfieBW_7.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: #bbb;
  font-family: Sometype Mono;
  color: #000000;
  font-size: 0.75rem;
  line-height: 1.33;
  box-sizing: border-box;
}

body.info {
  background-image: none;
  background-color: #bbb;
  font-family: Sometype Mono;
  line-height: 1.33rem;
  box-sizing: border-box;
}

H1 {
  font-family: Cormorant,Times;
  font-size: 2.5rem;
  line-height: 2.33rem;
  padding: 10px;
  margin: 10px;   
}

H2 {
  font-family: Cormorant,Times;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

div{
   padding: 10px;
   margin: 10px;   
  
}

ul{
   padding-left: 10px;
   margin: 0px;   
  
}

li{
   padding: 5px;
   margin: 0px;   
  
}

#briefing {
  line-height: 1.33;
}


#briefing_int {
  font-size: 0.75rem;
  line-height: 1.33;
}

.error {
  color: #cc0000;
}

.pillars-container {
  display: flex;
  flex-wrap: wrap;      /* allows wrapping on narrow screens, but columns will still try to be 20% */
  padding: 0px;
  margin: 0px;   
  position: relative;
  z-index: 1;
}


.pillar_b {
  font-family: Cormorant,Times;
  font-size: 1.5rem;
  line-height: 2rem;
   width: 20%;
   flex: 1 1 20%;
   min-width: 180px;
   padding: 10px;
   margin: 10px;   
   background-image: url("_assets/bg2x2.svg");
   background-color: rgba(236, 228, 218, 0.2);
   background-repeat: repeat;
   background-size: 2px;
   
  
}
.pillar {
   width: 20%;
   flex: 1 1 20%;
   min-width: 180px;
   padding: 10px;
   margin: 10px;   
   background-image: url("_assets/bg2x2.svg");
   background-color: rgba(236, 228, 218, 0.2);
   background-repeat: repeat;
   background-size: 2px;
   
  
}

a {
  color: #44563E;
  padding-left: 1px;
  padding-right: 1px;
}

a:hover {
  color: #ffffff;
  background-color: #000;
}
  
.c{
   width: 180px;
   background-image: url("_assets/bg2x2.svg");
   background-color: rgba(236, 228, 218, 0.2);
   background-repeat: repeat;
   background-size: 2px;
}

.c1 {
   max-height: 200px;   
   overflow-y: auto;
   padding: 0px;
   margin: 0px;   
   background-image: none;
   background-color: rgba(236, 228, 218, 0);
}

.c1::-webkit-scrollbar {
    width: 4px;
}

.c1::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 0px;
    transition: background 0.2s ease;
}

.c1::-webkit-scrollbar-thumb {
    background: #000000; 
    border-radius: 4px;
}

.c1:hover::-webkit-scrollbar-track,
.c1:active::-webkit-scrollbar-track {
    background: rgba(236, 228, 218, 0);
}


.c1::-webkit-scrollbar-thumb:hover {
    background: #333333;
}


.c1::-webkit-scrollbar-corner {
    background: transparent;
}

.c1:hover::-webkit-scrollbar-corner {
    background: rgba(236, 228, 218, 0);
}


.c1 {
    scrollbar-width: thin;
    scrollbar-color: #000000 rgba(236, 228, 218, 1);
}



/* Base styles */
.random-letters-container {
    position: 0,0;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-image: none;
    background-color: rgba(236, 228, 218, 0);
    z-index: -10;  
}

.letter {
    position: absolute;
    font-size: 4rem;
    font-family: Cormorant,Times;
    color: rgba(0, 0, 0, 0.20);
}

/* Random positions using classes */
.letter.pos-1 { top: 1%; left: 20%; animation-delay: 0s; }
.letter.pos-2 { top: 5%; left: 45%; animation-delay: 0.5s; }
.letter.pos-3 { top: 22%; left: 80%; animation-delay: 1s; }
.letter.pos-4 { top: 26%; left: 51%; animation-delay: 1.5s; }
.letter.pos-5 { top: 30%; left: 78%; animation-delay: 2s; }
.letter.pos-6 { top: 31%; left: 69%; animation-delay: 2.5s; }
.letter.pos-7 { top: 42%; left: 72%; animation-delay: 3s; }
.letter.pos-8 { top: 54%; left: 60%; animation-delay: 3.5s; }
.letter.pos-9 { top: 57%; left: 85%; animation-delay: 4s; }
.letter.pos-10 { top: 65%; left: 80%; animation-delay: 4.5s; }

/* Random rotations */
.letter.rotate-1 { transform: rotate(-15deg); }
.letter.rotate-2 { transform: rotate(25deg); }
.letter.rotate-3 { transform: rotate(-5deg); }
.letter.rotate-4 { transform: rotate(40deg); }
.letter.rotate-5 { transform: rotate(-30deg); }

/* Random font sizes */
.letter.size-1 { font-size: 2rem; }
.letter.size-2 { font-size: 4rem; }
.letter.size-3 { font-size: 5rem; }
.letter.size-4 { font-size: 8rem; }
.letter.size-5 { font-size: 10rem; }

@keyframes bounce {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
}

pre {
  color: #000000;
  font-family: 'Sometype Mono', 'Courier New', monospace;
  white-space: pre;
  font-size: 0.475rem;
  line-height: 0.375rem;
  overflow: hidden;
}

#ascii {
   width: 180px;
   background-image: url("_assets/bg2x2.svg");
   background-color: rgba(236, 228, 218, 0.2);
   background-repeat: repeat;
   background-size: 2px;
   overflow: hidden;
}




       
        /* Artwork container - exactly 180px wide */
        .artwork-container {
            padding: 0px;
            margin: 0px;
            width: 100%;
            overflow: hidden;
        }
        
        /* Image wrapper - maintains aspect ratio */
        .artwork-image-wrapper {
            width: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        /* Image retains its natural aspect ratio */
        .artwork-image {
            width: 100%;
            height: auto;
            display: block;
            padding: 0px;
            margin: 0px;
        }
        
        .loading {
            padding: 0px;
            margin: 0px;
            text-align: center;
            color: #666;
            font-size: 12px;
        }
        
        
        /* Image info - no styling, just text */
        .image-info {
            padding: 0;
        }
        
        .image-info p {
            margin: 0px;
        }