*,*::before,*::after{
    box-sizing:border-box;
}

body{
    font-family:"Lucida Console",Monaco,monospace;
    background-color:#ffffff;
    text-align:center;
    margin:0;
    overflow-y:scroll;
    user-select:none;
    height:165vh;
    overflow-x:hidden;
}

.toptri{
    background-image:url("/assets/on.png");
    background-position:center center;
    background-size:contain;
    position:fixed;
    top:0;
    max-height:150px;
    height:6vmax;
    width:6vmax;
    max-width:150px;
    z-index:900;
    opacity:.8;
    min-height:50px;
    min-width:50px;

}

#topleft{left:0;}

#topright{right:0;}

.toptri:hover{
    background-image:url("/assets/AXISGIF2.gif");
}

#logotri{
    max-width:95vw;
    max-height:95vw;
    margin:0 auto 36px auto;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    height:30vmax; width:30vmax;
    
    
    background-image:url("/assets/AXISGIF1.gif");
}

#linklayout{

    width:85%;
    max-width:2500px;
    margin:3.35vmax auto 0 auto;
}

.roww{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:0 1px;
}

.col{
    flex:1 0 33.333%;
    max-width:33.333%;
    padding:1px;
}

.button{
    display:flex;
    align-items:center;
    justify-content:center;
    height:2.5vmax;
    min-height:25px;
    max-height:60px;
    background:#000;
    border:1px solid #0000;
}

.linktext{
    color:#fff;
    font-size:clamp(.8em,2vw,1.9em);
    letter-spacing:clamp(-1em,.3vw,1.7em);
    pointer-events:none;
}

.activelink2{
    background:#00000055;
    border-color:#000;
}

.activelink3{
    background:#00000033;
    border-color:#000;
}

.activelink2:hover{
    cursor:pointer;
    filter:drop-shadow(0 0 20px #0006);
}

.activelink3:hover{
    cursor:pointer;
    filter:drop-shadow(0 30px 30px #0009);
}

.selectedlink{background:#000;}

#faderdiv{transition:background-color .5s ease;}

#frameblock{
    
    border:none;
    z-index:50;
}

        #menuframe {
            background-color: #000000;
           
            height: 2500px;
            max-height: 250vh;
width:100%;

            margin: 3vh auto 0px auto;max-width: 2500px;
        }
        
     
        



        #backlink {
            background-color: #000000;
            color: #ffffff;
            font-size:clamp(15px,2.4vh, 30px);
            text-decoration: none;
        }
        
        
        #trackframe {
            text-align: center;
            border: solid 0.2vmax #fff;
            height: 100%;
            width: 100%;
            filter: grayscale(1) invert(1);
background-color: #fff;

        }
#triback{
    background-image:url("/assets/bgtri.png");
    background-size:clamp(30px,5.5vw,100px);
    text-align:center;
    padding-top:clamp(1.5vmax,2vmax,4em);
    margin-top:clamp(1.3vw,3vmax,80px);
    background-position:center top;
    margin-bottom:0;

    
}
/* parent */
#h2div{max-height:100px;
    max-width:2500px;
    margin-left:auto;
    margin-right:auto;
    background:rgba(255,255,255,.902);
    border:.3vmax solid #000;
    height:4.5vmax;
width: 70vw;

    /* center the <h2> perfectly */
    display:flex;
    justify-content:center;   /* horizontal */
    align-items:center;       /* vertical   */
}

/* child */
#h2div h2{
    font-size:clamp(25px,4vmax,60px);
    overflow-wrap:break-word;
    margin:0;                 /* remove default margins */
}
#width{
    margin-top:clamp(20px,4vmax,90px) ;
    margin-left: auto;
   margin-right: auto;
margin-bottom: 0px;
    width:95%;
    text-align:center;
    padding-bottom:50px;
}

.album-grid{ width:  100%; max-width: 3000px;
    margin-left: auto;
    display:flex;
    margin-right: auto;
    flex-wrap:wrap;
    gap:0;
    overflow:hidden;
}

.album-item{
    width:33.3333%;
    background-color:#000;
    cursor:pointer;
    display:flex;
    border:#000 solid 1px;
    flex-direction:column;
    filter:brightness(.9);
    transition:background-color .2s ease;
}

.album-item:hover{filter:none; 
    width:33.3333%;
    background-color:#000;
    cursor:pointer;
    display:flex;
    border:#000 solid 1px;
    flex-direction:column;
    filter:none;
    transition:background-color .2s ease;}

.album-cover{
    max-width: 1000px;
    max-height:1000px;
    width:100%;
    height:auto;
    flex:1 1 auto;
}

.caption{
    vertical-align:middle;
    background:#000;
    color:#fff;
    font-size:clamp(10px,1.6vmax,70px);
    padding:0;
    height:100%;
}



.drawingpreview{
    text-align:center;
    border:5px solid #000;
    margin-left:auto; max-width:2500px;
    margin-right:auto;
    width:100%;
       max-height: 1200px;
    height:40vw;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center center;
}

.modal-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0, 0, 0, 0.95);
    justify-content:center;
    align-items:center;
    z-index:9000;
}

.modal-overlay.active{display:flex;}

.modal-image{
    max-width:100%;
    max-height:100%;
   
}

#invv:hover{filter:invert(1);}

#invv{filter:none;}

.linkk{
margin-left: auto;

margin-right: auto;
    position: static;
    text-decoration:none;
    color:#fff;
    font-size:1.4em;
    font-family:"Lucida Console",Monaco,monospace;
    letter-spacing:7px;
}

#toolgroup{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    grid-template-rows:repeat(1,auto);
    gap:0;

    max-width:85%;
    max-width: 1300px;
    min-height:100vh;
    margin-left: auto;
    margin-right: auto;
}

.toolframe{
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    height:100%;
    border:2px solid #000;
    background-color:#ffffffcc;
}

.toolframe:hover{
    height:100%;
    display:block;
    width:100%;
    border:2px solid #000;
    background-color:#fff;
}


.playstop{
    padding:10px;
    z-index:8999;
    height:5vmax;
    width:5vmax;
    position:fixed;
    right:1.1vw;
    bottom:3.3vh;
    background-image:url("/assets/play.gif");
    background-position:center;
    background-size:contain;
    background-color:#fff;
}

#label{
    left:0;
    background-color:#000;
    font-size:3vh;
    width:100vw;
    height:3vh;
    z-index:7777;
    color:#bbb;
    position:fixed;
    bottom:0vh;
}

#playerframe{
    width:100vw;
    border:none;
    position:fixed; 
    margin:0;
    bottom:0;
    left:0;
    z-index:8888;
    height:3vh;
    padding:0;
    background-color:#000;
    color:#000;
    opacity:1;
}


#infoblock{
    text-align:center;
    margin-top:clamp(20px,14.5vh,170px);
    color:#000;
    font-family:"Lucida Console",Monaco,monospace;
}

#tu{
    font-family:"Lucida Console",Monaco,monospace;
    font-size:clamp(12px,4.8vw,45px);
    font-weight:bold;
    margin-bottom:3.3em;
}

#infotext{
    font-family:"Lucida Console",Monaco,monospace;
    font-size:clamp(.5em,2.8vw,23px);
    font-variant:unset;
    margin-top:3em;
    text-align:center;
    padding-bottom:45px;
}

#break{margin-bottom:4.5em;}

.rotate{
    animation-name:rotate;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-direction:alternate;
    animation-fill-mode:forwards;
}

@keyframes rotate{
    0%{filter:invert(.2) contrast(.7);}
    50%{filter:invert(.3) contrast(2);}
    100%{filter:invert(.8) contrast(.7);}
}


#description4{
    column-count:2;        /* stacks items top‑to‑bottom, then left‑to‑right */
    column-gap:1vmax;      /* space between the columns */
      max-width:2500px;    /* optional overall width cap */
    margin:0 auto;         /* center block */
}

/* pictures fill column width and keep shape */
.bigimage{
    
    width:100%;
    height:auto;
    display:block;
    border: 1px inset #000;
    break-inside:avoid;    /* prevent column breaks inside images */
    margin-bottom:1vmax;   /* space below each picture */
}

/* single‑column fallback for narrow screens */
@media(max-width:700px){
    #description4{column-count:1;}
}



[hidden]{display:none;}

.roww[hidden]{display:none;}

#picc{
background-position-x: right;

    max-width: 80vw;
    bottom:0px;
    
margin-left: auto;
margin-right: auto;
background-image: url("/image/about/13.jpg");
background-size: 70vw 50vh;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
}