@font-face {
    font-family:"Playfair";
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:local("Playfair-Regular"),url(/assets/fonts/playfair.woff) format("woff")
   }
html,body { height:100%; }


div.column{
    margin: 0%;
}

div.title{
    
    font-size: x-large;
    padding-bottom: 0%;
    margin-top: 0%;
    margin-bottom: 0%;
    height: fit-content;
}
div.subtitle{
    font-size: medium;
    font-style: italic;
    padding-top: 0%;
    padding-bottom: 0%;
    margin-top: 1%;
    margin-bottom: 1%;
}   
div.body{
    font-size: small;
    padding-top: 0%;
    padding-bottom: 0%;
    margin-top: -2%;
    margin-bottom: 0%;
    height: fit-content;
}  
div.tag{
    font-style: italic;
    font-size: medium;
    padding-top: 0%;
    padding-bottom: 0%;
    margin-top: 0%;
    margin-bottom: 0%;
    height: fit-content;
}

div.bstyle_big{
    font-size: large;
    font-family: "Playfair";
    font-weight: bold;
    color: teal;
    height: 10%;
}

button.a{
    color: teal;
}

button.bstyle{
    font-family: "Playfair";
    font-size: medium;
    border-color: teal;
    color: teal;
    margin-top: 16px;
}

button.bmobstyle{
    font-family: "Playfair";
    font-size: medium;
    border-color: teal;
    color: teal;
    margin-top: 2px;
    margin-bottom: 16px;
    margin-left: 4%;
}

button.bmobpadrightstyle{
    font-family: "Playfair";
    font-size: medium;
    border-color: teal;
    color: teal;
    margin-top: 2px;
    margin-bottom: 16px;
    margin-left: 18%;
}

body { 
        display:flex; flex-direction:column; 
        /*background:#f5f7fa;*/
     }
    .stage {     
    position: fixed;      
    left: 50%;      
    transform: translateX(-50%);      
    top: 1.6vh;      
    width: min(1800px, 96vw);      
    height: min(480px, 45vh);      
    pointer-events: none;      
    overflow: visible;     
    z-index: 40;      
    border-radius: 12px;     
    display: block;    
    }
    .stage-bg {     
     position:absolute;     
     inset:0;     
     background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,250,0.85));      
     box-shadow: 0 15px 40px rgba(20,20,30,0.12);     
     border-radius: 12px;      
     pointer-events: none;   
     height: 100%;
     }
    .stage .layer {      
    position: absolute;     
    pointer-events: auto;     
    transition: transform .25s ease, opacity .2s ease;     
    will-change: transform, opacity;      
    /*border-radius: 8px;     
    overflow: hidden;    
    box-shadow: 0 10px 30px rgba(10,10,20,0.12);     
    background:#00ffff00;*/    
    }
    .layer.layer-1 { left: 6%; top: 0%; width: 80%;  border-radius: 0px;  z-index:10; transform-origin:center; background:#00ffff00; }    
    .layer.layer-2 { left: 1%; top: 2%; width: 4.2%;  border-radius: 0px;   z-index:20; background:#00ffff00;}    
    .layer.layer-3 { background:#00ffff00;     left: 37.48%; top: 13.24%; width: 17.42%;  z-index:30; transform: rotate(0deg); }
    .layer.layer-4 { background:#00ffff00;     left: 36.51%; top: 22.15% ; width: 19.42%;  z-index:30; transform: rotate(0deg); }
    .layer img { width:100%; height:100%; object-fit:cover; display:block; }
    .section {
      margin-top: 2rem;
      margin-left:8px;
      margin-right: 8px;
    }
    main.container {      
    margin-top: calc(min(420px, 45vh) + 5vh);     
    padding-bottom: 4rem;      flex: 1 0 auto;  
    }
    .icon-scroller {     
    max-height: 55vh;     
    overflow-y: auto;    
    margin-top: -1rem; 
    margin-left: -2rem;
    padding: 1rem;   
    background: transparent;  
    }
    .icon-grid {     
    display: grid;    
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));   
    gap: 1rem;     
    align-items: start;   
    }
    .icon {      
    width: 4.2%;
    color: teal;
    cursor: pointer;     
    user-select: none;      
    text-align: center;     
    transition: transform .12s ease, box-shadow .12s ease;     
    padding: .6rem;     
    border-radius: 10px;     
    background: rgba(255,255,255,0.6);     
    box-shadow: 0 6px 18px rgba(12,12,20,0.06);     
    border: none;   
    }    
    .icon:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(127, 27, 54, 0.12); }   
    .icon img { width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; margin:0 auto 0.5rem; }
    .icon.is-active { outline: 3px solid #2f6be0; box-shadow: 0 18px 40px rgba(47,107,224,0.12); }
    @media (max-width:720px) {     
    .stage { top:0vh; height: 38vh; }     
    .layer.layer-1 { left:0%; top:0%; width:100%; height: 130%; border-radius: 0px;  z-index:10; transform-origin:center; background:#00ffff00;} 
    .layer.layer-2 { left:2%; top:2%; width:10%; } 
    .layer.layer-3 { left:20%; top:11%; width:60%; }  
    .layer.layer-4 { left:18%; top:15%; width:64%;  } 
    .layer.layer-6 { left:33%; top:1%; width:64%;  } 
    .div.title{  font-size: small; font-weight: bold; margin-top: 2%; padding: 16px;}

    main.container { margin-top: calc(min(420px, 36vh) + 6vh); }   
    .no-wrap{
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1rem;
    }
    .horizontal-scroll > * {
        flex-shrink: 0;
        min-width: 200px;
    }
   /* .no-wrap .columns{
        flex-wrap: nowrap;
        margin-bottom: 0;
    }
    .no-wrap .column{
        flex-shrink: 0;
        min-width: 200px;
    }*/
    .icon-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    /*.icon-grid { grid-template-columns: repeat(3, 1fr); }*/    
    } 
   .footer {
    background-color:#f3f2f600;
    color:#4d4b4b;
    margin-top: 0px;
    padding-top: 0px;
    font-size: 14px;
    line-height:22px
   }
   .footer strong {
    color:#4f4e4e;
    display:block;
    font-weight:600;
    margin-bottom:12px
   }
   .footer a {
    color: teal
   }
   .footer a:hover {
    text-decoration:underline
   }
   .image-tinted-blue{
    background-color: teal;
    position: relative;
    display: inline-block;
   }
   .section.columns{
    margin: 3%;
    padding: 3%;
   }