*, *::before, *::after { 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { 
    padding: 0; margin: 0; 
    background-color: #000000;
    color: white;
    background-image: url(/images/texture-seamless-wood-5.jpg);
}

#logo {
    display:block; position: absolute;
    top: 2vw; left: 2vw;
    /* border: 1px solid magenta */
}
#logo>img {
    width: 12vw; height: auto;
}
h1 { 
    font-size: clamp(24pt, 8vw, 48pt);
    line-height: 1;
    margin: 0.2em 0; 
    text-align: center;
    padding: 0;
    /* border: 1px solid magenta */
}
h2 {
    font-size: clamp(12pt, 4vw, 30pt);
    /* border: 1px solid magenta; */
    text-align: center;

}
.gallerydescription {
    font-size: 16pt;
    margin-left: 16vw; margin-top: 2vw; margin-right: 2vw;
    /* border: 1px solid magenta */
}
#galleries {
    display: flex;
    justify-content: space-around ;
    margin-bottom: 20pt;
}
#galleries>a {
    max-width: 25vw;
}
#galleries img {
    width:100%; height:auto;
}


a, a:visited, a:active { 
    color: #ffffff; text-decoration: none; font-weight: bold; 
}
#galleries a:hover h2 {
    text-decoration: underline;
}
#galleries a:hover img {
    filter: drop-shadow(0 0 2vw rgb(197, 150, 20));
}

.gallery { 
    display: grid; 
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    margin: 4vw; padding: 0px;
    place-items: center; 
}
.gallery > a { 
    
    width: 200px; height: 350px; 
    margin: 0; padding: 0; 
}
.gallery > a > img { 
    
    width: 200px; height: 200px; 
    margin: 0; padding: 0; 
    object-fit: cover; 
}
.gallery>a>div{
    /* border: 1px solid magenta; */
    text-align: center;
}
#workspace {
    display:block;
    width: 100vw; 
    height: auto;
    max-height: 75vh;
    object-fit: cover; 
    margin:0;
    
}