* {
    box-sizing: border-box;
}



body {

    color:black;

    background-color:whitesmoke;

    border:4px solid orange;

    padding:20px;

    font-family:'Amatic SC';

}



a {

    text-decoration:none;

    color:white;

}


/*==============================================================
    ADMIN BUTTON
==============================================================*/

.admin-button{

    position:fixed;

    top:18px;

    right:18px;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    box-shadow:0 3px 12px rgba(0,0,0,.25);

    transition:.2s;

}

.admin-button.hidden{

    visibility:hidden;

    opacity:0;

    pointer-events:none;

}

.admin-button:hover{

    transform:scale(1.08);

}

.admin-button img{

    width:34px;

    height:34px;

    display:block;

}



/* =========================================
   MODAL
========================================= */


#modal {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:opacity .4s ease;

    z-index:999;

}



#modal.active {

    opacity:1;

    pointer-events:auto;

}



#modal-content {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}



#modal-img {

    max-width:90vw;

    max-height:85vh;

    transform:scale(.9);

    opacity:0;

    transition:

    transform .4s ease,

    opacity .4s ease;

}



#modal.active #modal-img {

    transform:scale(1);

    opacity:1;

}



#modal-description {

    color:white;

    font-size:2rem;

    text-align:center;

    max-width:80vw;

}




/* =========================================
   IMAGE EFFECTS
========================================= */


.zoom {

    transition:transform .5s ease;

}


.zoom:hover {

    transform:scale(1.08);

}




.fade-in {

    opacity:0;

    transition:opacity .8s ease;

}



.fade-in.is-visable {

    opacity:1;

}





/* =========================================
   GALLERY
========================================= */


#images-root {

    width:100%;

    padding:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

}




.gallery-category {

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-bottom:80px;

}




.gallery-category h1 {

    width:100%;

    text-align:center;

    font-size:3rem;

    margin:20px 0;

}





.gallery-grid {
    border: 1px solid red;

    width:100%;

    display:flex;

    flex-flow:row wrap;

    justify-content:center;

    align-items:center;

    gap:30px;

}





.categories-container {
    border: 3px solid red;

    width:380px;

    height:auto;

    object-fit:contain;

    display:block;

}




/* =========================================
   LANDING
========================================= */


#landing-container {

    padding:15px;

    height:93vh;

}



#logo {

    position:fixed;

    top:50%;

    left:50%;

    height:35vh;

    transform-origin:center;

}





#title {

    width:100%;

}





/* =========================================
   OLD FLEX SUPPORT
========================================= */


.flex {

    display:flex;

    flex-flow:row wrap;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:10px;

    width:90%;

}




/* =========================================
   TOOLBAR
========================================= */


/*==============================================================
    TOOLBAR
==============================================================*/

#toolbar{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:12px 0;

    z-index:1000;

    pointer-events:none;

}




.categories {

    width:19vw;

    height:40px;

    text-align:center;

    background-color:black;

    color:white;

}



/* =========================================
   MOBILE
========================================= */


@media(max-width:700px){


    body{

        padding:10px;

    }



    .categories-container{

        width:90%;

    }



    .gallery-category h1{

        font-size:2.2rem;

    }


}