@font-face {
    font-family: "Manrope";
    src: url("/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    }
    
    @font-face {
    font-family: "Roboto Slab";
    src: url("/fonts/RobotoSlab-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    }

:root{

    --eugenia-red:#D25C57;
    --vistoris-lake:#5F3B3C;
    --maple:#BC9966;
    --white:#FFFEFE;
    --isabella:#BD9F69;
    --trans:#00000000;
    
    }
    

    body{
    
    margin:0;
    font-family:"Manrope", sans-serif;
    font-weight:400;
    
    line-height:1.6;
        
    letter-spacing:0.02em;

    color:var(--white);
    
    background-image:url("../images/background/bg.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    
    }

    h1,h2,h3,h4{

        font-family:"Roboto Slab", serif;
        
        font-weight:500;
        
        letter-spacing:0.03em;
        
        margin-top:0;

        margin-bottom:0.6em;
        
        }

        h1{ font-size:2.6rem; }

        h2{ font-size:1.9rem; }
        
        h3{ font-size:1.4rem; }
    

        a{

            font-weight:500;
            
            text-decoration:none;
            
            }

            .caption{

                font-size:0.85rem;
                
                font-weight:300;
                
                letter-spacing:0.04em;
                
                }
    
    /* INTRO */
    
    #intro{
    
    position:fixed;
    inset:0;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    z-index:1000;
    cursor:pointer;
    
    transition:1s;
    
    }
    
    
    .intro-center{
    
    position:relative;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    }
    
    
    /* decoration */
    
    .decoration{
    
    width:90vw;
    max-width:1920px;
    
    transition:1s;
    
    }
    
    
    /* logo on top */
    
    .logo{
    
    position:absolute;
    
    max-width: 80vw;
    max-height: 80vh;
    
    transition:0.8s;
    
    }
    
    
    /* animation state */
    
    #intro.hide .logo{
    
    opacity:0;
    transform:scale(0.8);
    
    }
    /*
    #intro.hide .decoration{
    
    transform:scale(2);
    opacity:0;
    
    }
    */
    
    
    /* SITE */
    
    #site{
    
    display:none;
    padding:0px;
    
    }
    
    /*NEW*/
    /* CATEGORY BAR */


.categories{

    font-family:"Manrope";
        
    font-weight:600;
        
    letter-spacing:0.06em;
        
    text-transform:uppercase;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    
    margin-bottom:50px;
    
    }
    
    
    /* CATEGORY LINK */
    
    .cat{
    
    display:block;
    
    width:12vw;
    min-width:40px;
    max-width:140px;
    
    background:var(--trans);
    
    padding:8px;
    
    transition:transform 0.2s;
    
    }
    
    
    /* CATEGORY IMAGE */
    
    .cat img{
    
    width:100%;
    height:auto;
    display:block;
    
    }
    
    
    /* hover effect */
    
    .cat:hover{
    
    transform:scale(1.05);
    
    }/* NEW*/
    

    
    /* MAIN BUTTON */


    .main-button{
    
    display:flex;
    justify-content:center;
    margin-bottom:60px;
    
    }
    
    .main-button a{
    
    background:var(--eugenia-red);
    padding:20px 40px;
    border-radius: 40px;
    
    color:white;
    text-decoration:none;
    
    font-family:"Manrope";
        
    font-weight:600;
    
    letter-spacing:0.08em;
    
    text-transform:uppercase;
    
    font-size:1.1rem;
    }

    .main-button a:hover{

        transition:all 0.2s ease;

        transform:translateY(-3px);
        
        box-shadow:0 10px 25px rgba(0,0,0,0.35);
        
        }
    
    
    
    /* CONTENT */
    
    .content{
    
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    
    max-width:1100px;
    margin:auto;
    
    margin-bottom:60px;
    
    }
    
    .left-images{

        position:relative;
        
        }
        
        
        /* first image */
        
        #random-card1{
        
        transform:rotate(15deg);
        margin-left:10%;
        z-index:3;
        
        }
        
        
        /* second */
        
        #random-card2{
        
        transform:rotate(-10deg);
        margin-top:-20%;
        margin-left:0%;
        z-index:2;
        
        }
        
        
        /* third */
        
        #random-card3{
        
        transform:rotate(5deg);
        margin-top:-20%;
        margin-left:20%;
        z-index:1;
        
        }
    
    
    /* ABOUT */
    
    .about{

        font-family:"Manrope";

        font-weight:400;
        
        font-size:1rem;
        
        line-height:1.7;

    background:var(--isabella);
    padding:30px;
    
    }

    .about h2{

        font-family:"Roboto Slab";
        
        font-weight:500;
        
        margin-bottom:10px;
        
        }
    
    
    /* BOTTOM BUTTONS */
    .bottom-buttons{

        display:flex;
        justify-content:center;
        gap:30px;
        
        margin-top:40px;
        margin-bottom:80px;
        
        flex-wrap:wrap;
        
        }

    
        .bottom-buttons a{
            border-radius: 40px;

            background:var(--eugenia-red);
            
            color:var(--white);
            
            font-family:"Manrope", sans-serif;
            font-weight:600;
            
            letter-spacing:0.08em;
            text-transform:uppercase;
            
            font-size:0.95rem;
            
            padding:14px 28px;
            
            text-decoration:none;
            
            box-shadow:0 6px 15px rgba(0,0,0,0.25);
            
            transition:all 0.2s ease;
            
            }

            .bottom-buttons a:hover{

                transform:translateY(-3px);
                
                box-shadow:0 10px 25px rgba(0,0,0,0.35);
                
                }

    .img-card{

        background-image:url("/images/ui/bgTattoodesigns.webp");
        background-size:cover;
        background-position:center;
        
        padding:12px;
        
        box-shadow:0 15px 35px rgba(0,0,0,0.45);
        
        width:80%;
        
        position:relative;
        
        }

        .img-card img{

            width:100%;
            height:auto;
            display:block;
            
            }
        
            .img-card:hover{

                transform:rotate(0deg) scale(1.05);
                z-index:10;
                
                transition:0.25s;
                
                }