html::-webkit-scrollbar {
    display: none;
}

body{
    width: 100vw;

    /*background-image: url(../images/buddys-stuff/coreTeamPixel.png);*/
    /*background-image: url(../images/backgrounds/graphpaper.jpg);*/
    background-image: url(../images/backgrounds/blueFabric.jpg);

    background-repeat: repeat;
    background-size: cover;
    margin: 0;

    overflow-x: hidden;
}

.liberate{
    width: 10vw;
    height: 10vw;

    position: fixed;
    right: 5vw;
    bottom: 5vw;

    display: block;
    z-index: 999;

    background-color: red;
}

.container{
    /*position: relative;*/
    background-image: url(../images/backgrounds/graphpaper.jpg);
    z-index: -20;

    width: 100vw;
    height: 100vh;
}


.scissor-block1 {
    position: absolute; 
    top: 4.5vh;
    left: 10vh;
    width: 15vh;
    height: 26vh;
    background-color: aqua;
    opacity: 50%;
}

.scissor-block2 {
    position: absolute; 
    top: 8vh;
    left: 25vh;
    width: 18vh;
    height: 17vh;
    background-color: blue;
    opacity: 50%;
}

.menu-block{
    position: absolute; 
    top: 4.5vh;
    left: 37vh;
    width: 35vh;
    height: 22vh;
}

.scissors{
    width: 30vh;
    /* This height causes the two scissor images to overlap */
    height: 0vh;

    position: relative;
    top: -4vh;
    left: 10vh;
    z-index: 999;
}

.scissor_img_top{
    height: 40vh;
    width: auto;
    rotate: -90deg;
}

.scissor_img_bottom{
    height: 40vh;
    width: auto;
    rotate: -90deg;
}

.menu{
    width: 10vh;
    height: 5vh;
    z-index: 100;

    position: relative;
    top: 12vh;
    left: 35vh;
}

.menu_img{
    width: 20vh;
    z-index: 100;
}

.expanded_menu{
    position: relative;
    top: -5vh;
    left: 35vh;
    visibility: hidden;
    z-index: 100;
}

.expanded_menu_img{
    position: absolute;
    width: 38vh;
    z-index: 100;
}

.svg{
    width: 38vh;
    position: absolute;
    top: 0vh;
    left: 35vh;
    /* This allows the svg to be invisible 
    but still clickable */
    opacity: 0;
    z-index: 100;
}

.coreImg{
    position: absolute;
    z-index: 00;
    /*aspect-ratio: 1;*/

    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 1000px;
    min-width: 750px;
    height: auto;
    /*height: 70vh;*/

    margin: 0 auto;
}

.website {
    position: absolute;
    z-index: 10;

    max-width: 300px;
    min-width: 200px;
    width: 20%;
    top: 45%;
    left: 20%;
    margin: 0 auto;
}


/*IMAGE TRAIL*/
.trailcontainer {
    width: 80%;
    height: 90vh;
    position: absolute;
    /*background-color: blue;*/
    z-index: 0;

}
.image{
    /*z-index: 999;*/
    width: 150px;
    position: absolute;
    display: none;
    transform: translate(-50%, -50%);
}

/*OVERLAY*/
.overlay {
    width: 100%;
    height: 100vh;
    z-index: 20;

    position: absolute;
    display: grid;

    grid-template-columns: .08fr repeat(3, 1fr) .08fr;
    grid-template-rows: .15fr repeat(3, 1fr) .15fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

}
.background{
    position: relative;
}

.outer1 { grid-area: 1 / 1 / 2 / 6;
    background-image: url(../images/backgrounds/blueFabric.jpg);
    background-repeat: repeat;
    background-size: cover;}
.outer2 { grid-area: 2 / 1 / 6 / 2;
    background-image: url(../images/backgrounds/blueFabric.jpg);
    background-repeat: repeat;
    background-size: cover;}
.outer3 { grid-area: 2 / 5 / 6 / 6;
    background-image: url(../images/backgrounds/blueFabric.jpg);
    background-repeat: repeat;
    background-size: cover;}
.outer4 { grid-area: 5 / 2 / 6 / 5;}

.recents {
    position: absolute;
    z-index: 10;

    /*top: 85vh;*/
    left: 15%;
    width: 100%;
}
.recents img{
    width: 40%;
    min-width: 300px;
}

.emulate{
    width: 40%;
    height: auto;
    min-width: 400px;
    z-index: 20;

    position: absolute;
    top: 50vh;
    left: 50%;
}

.emulate_img{
    /*width: 20vh;*/
    width: 100%;
    z-index: 99;
}

.star{
    position: absolute;
    top: 43vh;
    left: 60vh;
}

.star_img{
    width: 10vh;
    visibility: visible;
    rotate: 10deg;
}

.star2{
    position: absolute;
    top: 65vh;
    left: 120vh;
}

.star2_img{
    width: 10vh;
    visibility: visible;
    rotate: -20deg;
}

/*.events{*/
/*    position: relative;*/
/*    width: 100%;*/
/*    !*height: fit-content;*!*/
/*    background: red;*/
/*}*/
/*.events img{*/
/*    max-height: 100vh;*/
/*}*/

.new_work{
    position: absolute;
    top: 90vh;
    display: grid;
    grid-template-columns: 1fr repeat(2, 2fr) 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 10px;
}

.div1 { grid-area: 1 / 2 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4;}
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 2 / 3 / 3 / 4; }
.div5 { grid-area: 3 / 2 / 4 / 3; }
.div6 { grid-area: 3 / 3 / 4 / 4; }

.bg {
    width: 100%;
    height: fit-content(150%);
    position: absolute;
    top: 95%;
    z-index: 0;
    background-image: url(../images/backgrounds/blueFabric.jpg);
}

.recent-work {
    position: relative;
    top: 30vh;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5vh;
    flex-wrap: wrap; /* ✅ allows wrapping */
}

.col1, .col2 {
    flex: 1 1 400px; /* ✅ grow and shrink naturally */
    max-width: 500px;
    padding: 0 20px;
}

.recent_cover {
    border: 5px solid white;
    width: 100%;
    height: auto;
}

.caption {
    font-family: 'Spectral', 'Courier New', monospace;
    font-size: 15px;
    color: white;
    font-style: italic;
}

.genre {
    font-family: 'Spectral', 'Courier New', monospace;
    font-size: 13px;
    color: gold;
    font-style: italic;
}
/*.recent-work {*/
/*    position: absolute;*/
/*    top:30vh;*/
/*    !*top: 105vh;*!*/
/*    width: 100%;*/
/*        !*background-color: red;*!*/
/*    */
/*    display: grid;*/
/*    grid-template-columns: 0.5fr, 1fr, 1fr, 0.5fr;*/
/*    grid-template-rows: 1fr;*/
/*    grid-column-gap: 5vh;*/
/*    grid-row-gap: 0px;*/
/*}*/
/*    */
/*.col1 { grid-area: 1 / 2 / 2 / 3; }*/
/*.col2 { grid-area: 1 / 3 / 2 / 4;*/
/*padding-right: 40px}*/

/*.left-margin{*/
/*    !*background-color: blue;*!*/
/*    grid-area: 1 / 1 / 2 / 2;*/
/*}*/
/*.right-margin{*/
/*    grid-area: 1 / 4 / 2 / 5;*/
/*}*/
/*.recent_cover{*/
/*    border: 5px solid white;*/
/*    width: 50vh;*/
/*}*/
/*.caption {*/
/*    font-family: 'Spectral', 'Courier New', monospace;*/
/*    font-size: 15px;*/
/*    color: white;*/
/*    font-style: italic;*/
/*}*/

/*.genre {*/
/*    font-family: 'Spectral', 'Courier New', monospace;*/
/*    font-size: 13px;*/
/*    color: gold;*/
/*    font-style: italic;*/
/*}*/

/* Change to phone view */
@media only screen and (max-width: 750px) {
    .container{
        display: inline-flex;
        align-items: flex-end;
        flex-flow: row wrap;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .container img{
        position: relative;
        max-width: 500px;
    }
    .scissors{
        width: 10vh;
        /* This height causes the two scissor images to overlap */
        height: 0vh;
    
        position: relative;
        top: -4vh;
        left: 10vh;
        z-index: 999;
    }
    
    .scissor_img_top{
        height: 20vh;
        width: auto;
        rotate: -90deg;
    }
    
    .scissor_img_bottom{
        height: 20vh;
        width: auto;
        rotate: -90deg;
    }

    .menu{
        position: relative;
        left: 15vh;
        top: 12vh;
    }
    .expanded_menu{
        position: relative;
        top: -5vh;
        left: 15vh;
    }
    .svg{
        position: absolute;
        top: 0vh;
        left: 15vh;
        opacity: 0;
    }

    /*.coreImg{*/
    /*    max-width: 500px;*/
    /*}*/


}