/* =============== ROOT  =============== */ 
        :root {
          --textboxbg: #FBFFFF;
          --bgcolour: rgba(255, 255, 255, 0.5);
          --bggreen: #D5D8EA;
          --bordercolour: rgba(0,0,0,0.85);
          --panelcolour: #f0f0f0;
        }
        /* =============== END ROOT  =============== */ 
 
 
 
 
 
 
 
 
       /* =============== RESET RULES  =============== */ 
               *, *::before, *::after {
                box-sizing: border-box;
              }
              
              html, body {
                margin: 0;
                padding: 0;
                height: 100%;
              }
              
              body {
                overflow-x: hidden;
              }
       /* =============== END RESET RULES  =============== */               
              
              
              
 
       /* =============== BODY AND FONT  =============== */  
     
               body {
                background-color: white;
                color: black;
                margin: 0;
                padding: 0;
                font-family: "JetBrains", monospace;
                font-size:13pt;
                line-height: 1.25;
              }
              


              @font-face {
                font-family: "JetBrains";
                src: url(fonts/JetBrainsMono-Regular.woff2);
              }
              
              p {
                margin: 0 0 0.6em 0;
              }
              
              h1, h2, h3 {
                margin: 0 0 0.5em 0;
              }
              
              ul, ol {
                margin: 0;
                padding-left: 20px;
              }
              
              
              
        /* =============== END BODY AND FONT  =============== */  
 
 
 
 
             /* =============== PAGE FRAME SYSTEM  =============== */
                  /* defines site background and width of outer columns, how they scale */
                          .page-frame {
                            display: grid;
                            grid-template-columns: clamp(80px, 20vw, 550px) minmax(0, 1fr) clamp(80px, 14vw, 380px);
                            grid-template-rows: 10px auto 15px;
                            min-height: 100vh;
                            
                            background-image: url("index assets/framebg.jpg");
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: center;
                            background-attachment: fixed;
                            image-rendering: pixelated;
                          }
                          
                          /* centre content */
                          .frame-center {
                            grid-column: 2;
                            grid-row: 2;
                          }
                          
                          /* surrounding frame areas */
                          .frame-top {
                            grid-column: 1 / -1;
                            grid-row: 1;
                          }
                          
                          .frame-bottom {
                            grid-column: 1 / -1;
                            grid-row: 3;
                          }
                          
                          .frame-left {
                            grid-column: 1;
                            grid-row: 2;
                          }
                          
                          .frame-right {
                            grid-column: 3;
                            grid-row: 2;
                          }
          
                          .site-window {
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            border: 4px solid var(--bordercolour);
                            outline: 2px solid rgba(255,255,255,0.5);
                            filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 0.6));
                          }
          
          
            /* =============== END PAGE FRAME SYSTEM  =============== */




 
   /* =============== HEADER SYSTEM  =============== */
  
                .header-container {
                  position: relative;
                  width: 100%;
                  display: grid;
                  border-bottom: 3px solid #000;
                  flex-shrink: 0;
                }

                /* BACKGROUND LAYER (header image) */
                .header-image {
                  grid-area: 1 / 1;
                  width: 100%;
                  display: block;
                }                
 
                /* OVERLAY LAYER (shared coordinate space) */
                .header-overlay {
                  grid-area: 1 / 1;
                  position: relative;
                  width: 100%;
                  height: 100%;
                }
 

              /* TOMMY'S PARADISE LOGO */  
                .logo-overlay {
                  position: absolute;
                  top: 50%;
                  left: 0%;
                  transform: translateY(-50%);
                  width: clamp(280px, 40vw, 600px);
                  z-index: 2;
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
                
              /* LIZA HEAD */  
                .logo-overlay-2 {
                  position: absolute;
                  top: 50%;
                  right: 5%;
                  transform: translateY(-50%);
                  width: clamp(64px, 12vw, 140px);
                  height: auto;
                  z-index: 2;
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
 
               /* TETO PERCH */  
                .header-pearto {
                  position: absolute;
                  top: 100%;
                  left: 70%;
                  transform: translate(-50%, -95%);

                  width: 100px;
                  z-index: 6;
                
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
 
    /* =============== END HEADER SYSTEM  =============== */
 
 
  
 
 
 
 
 
    /* =============== MAIN BODY SYSTEM  =============== */ 
                
                .main-body-container {
                  display: grid;
                  grid-template-columns: 0.6fr 2fr 1fr;
                  grid-template-areas: "left middle right";
                  width: 100%;
                  align-items: stretch;
                }
                
                /* SITE BODY - used on art page */                
               .site-body {
                  background-color: var(--bgcolour);
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  min-width: 0;
                }
                
                /* LEFT COLUMN */
                .left-column {
                  grid-area: left;
                  display: flex;
                  flex-direction: column;
                  min-width: 0;
                  height: 100%;
                }
                
                /* MAIN CONTENT */
                .middle-top {
                  grid-area: middle;
                  display: grid;
                  grid-template-rows: auto 1fr; /* top content + new bottom section */
                  align-items: start;
                  align-self: stretch;
                  min-width: 0;
                  background-color: var(--bgcolour);
                }
                
                 .middle-bottom {
                  margin: 30px auto;
                  width: 100%;
                  max-width: 80%;
                
                  background-color: rgba(255, 255, 255, 0.5);
                  border: 3px solid var(--bordercolour);
                  padding: 20px;
                
                  box-sizing: border-box;
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
                
                
                /* LEFT BOX */
                .lefttextbox {
                  flex: 1;
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  margin: 0;
                  padding: 0px 0px;
                  background-color: var(--panelcolour);
                  border-right: 3px solid var(--bordercolour);
                  box-sizing: border-box;
                }
                
                .lefttextbox h2 {
                  margin: 0;
                }
                

                
                
                 .link-list {
                    list-style: none;
                    padding: 0;
                    margin: 10px 0 30px 0;
                  }

                .link-list li {
                    margin: 6px 0;
                  }
      
                .link-list a {
                    text-decoration: none;
                    color: white;
                    display: block;
                    padding: 6px 10px;
                    background-color: rgba(0, 0, 0, 0.6);
                    border-top: 2px solid var(--bordercolour);
                    border-bottom: 2px solid var(--bordercolour);
                  }
                
                
                .lefttextbox-jerma {
                  display: block;
                  width: 100%;
                  height: auto;
                  border-bottom: 3px solid var(--bordercolour);
                  border-top: 3px solid var(--bordercolour);
                }
                
                /* MAIN TEXTBOX */
                .textbox {
                  margin: 30px auto 15px auto;
                  width: 100%;
                  max-width: 80%;
                  box-sizing: border-box;
                  background-color: var(--textboxbg);
                  border: 3px solid var(--bordercolour);
                  outline: 2px solid rgba(255,255,255,0.5);
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
                
                .textbox > :not(.textbox-toolbar) {
                  padding: 10px 30px;
                }
                
                .textbox-toolbar {
                  width: 100%;
                  box-sizing: border-box;
                  display: block;
                  border-bottom: 3px solid var(--bordercolour);
                  line-height: 0;
                }


                  .textbox-toolbar img {
                    display: block;
                    width: 100%;
                    height: auto;
                  }
                  
                 .welcome {
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                  width: 300px;
                }
                  
                  .mobile-left-content {
                  display: none;
                }
                  
                  
                  
                  .artcat-link {
                    display: block;
                    margin: 20px auto 0 auto;
                    width: 260px;
                    height: auto;
                  }
                  
                  .artcat-link:hover {
                    transform: scale(1.05);
                    transition: transform 0.15s ease;
                  }


    /* =============== END MAIN BODY SYSTEM  =============== */ 

                
                
                
                
                
                
                
                
                
       /* =============== RIGHT COLUMN SYSTEM  =============== */              
                

                /* RIGHT COLUMN */
                .right-column {
                  grid-area: right;
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  padding: 20px;
                  box-sizing: border-box;
                  background-color: var(--panelcolour);
                  min-width: 0;
                  border-left: 3px solid var(--bordercolour);
                  max-height: 100vh;
                  overflow-y: auto;
                  position: sticky;
                  top: 0;
                }


                .right-column img {
                  width: 100%;
                  max-width: 100%;
                  height: auto;
                  display: block;
                  border: 3px solid var(--bordercolour);
                  border-radius: 0px; /* corner rounding */
                  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
                }
                
                .right-column img:first-child {
                    border: none;
                    margin-top: 0;
                    margin-bottom: 0;
                    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
                  }
                
                
        /* =============== END RIGHT COLUMN SYSTEM  =============== */                 
                
                
                
                
                           
                
                

                .image-link {
                    display: block;
                    width: fit-content;
                    margin-left: auto;
                    margin-right: auto;
                    line-height: 0;
                  }


        
                .secret-link {
                    opacity: 0.05;
                  }
            






    /* =============== GENERAL MOBILE RULES  =============== */
    
    
            @media (max-width: 768px) {
              .main-body,
              .right-column {
                padding: 10px;
              }
              
              body {
                font-size:15px;
              }
                
            }
          
    /* =============== END GENERAL MOBILE RULES  =============== */
    
    
    
    
    
    
    
    
      /* =============== FRAME MOBILE RULES  =============== */  
    
            @media (max-width: 768px) {
          .page-frame {
            grid-template-columns: 16px 1fr 16px;
          }
        }
    
    
    /* =============== END FRAME MOBILE RULES  =============== */








    /* =============== HEADER SYSTEM MOBILE RULES  =============== */
 
             @media (max-width: 768px) {
            
              .header-container {
                width: 100%;
                max-width: 100vw;
              }
            
              .header-image {
                width: 100%;
                max-width: 100%;
                height: auto;
                display: block;
              }
            
             .logo-overlay {
              width: min(70vw, 500px);
              left: 10%;
            }
          
            .logo-overlay-2 {
              width: min(25vw, 160px);
              zoom: 0.6;
              right: 1%;
              width: 80px;
            }
            
            .header-pearto {
              width: 48px;
              left: 6%;
            }
            
            body {
              overflow-x: hidden;
            }

          
  }    
 
  /* =============== END HEADER SYSTEM MOBILE RULES  =============== */


    /* =============== MOBILE MAIN BODY AND RIGHT PANEL RULES  =============== */
        
         @media (max-width: 768px) {
        
           .main-body-container {
                display: grid;
                grid-template-columns: 2fr 1fr;
                grid-template-areas: "middle right";
                align-items: stretch;
              }
          
          .left-column {
              display: none;
            }
          


            .right-column {
              gap: 0px;
              padding: 0px;
            }

            .right-column img {
              border: 0px solid var(--bordercolour);
              border-bottom: 3px solid var(--bordercolour);
              filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.6));
            }
                    
          .right-column img:first-child {
              filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.6));
              border-bottom: 3px solid var(--bordercolour);
              padding-top: 10px;
              padding-bottom: 10px
            }
            
            .textbox {
                max-width: 90%;
                margin: 16px auto;
              }
          
          .textbox > :not(.textbox-toolbar) {
                padding: 8px 16px;
              }
            
           .welcome {
                filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.6));
                width: 180px;
              }
              
            .mobile-left-content {
              display: block;
              margin-top: 0px;
              padding-top: 0px;
            }
            
           .artcat-link {
                width: 220px;
              }
            
         }
          

    /* =============== END MOBILE MAIN BODY AND RIGHT PANEL RULES  =============== */
    
    
              .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns */
            gap: 20px;
            padding: 20px;
            max-width: 80%;
            width: 100%;
            margin: 30px auto;
          }
        
          .grid-item {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;  /* vertical centering */
            align-items: center;      /* horizontal centering */
          }
        
          .grid-item img {
            width: 100%;
            height: auto;
            border: 3px solid var(--bordercolour);
            filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.6));
            transition: transform 0.5s ease;
          }
        
          .image-grid img:hover {
            transform: scale(1.5);
            z-index: 10;
          }
          
          .grid-item p {
            margin-top: 10px;
            font-size: 16px;
            color: #333;
          }