:root {
    font-family: "neulis-neue", sans-serif;
font-weight: 400;
font-style: normal;
--c-dark: #181815;
    --c-white: #00b3eb;
    --c-red: #FF4D41;
    --c-ReallyDark: #000000;

    

    }

@font-face {
    font-family: icons; 
    src: url(../Icons_Sticker.otf);
    
}

body {
    padding: 0px;
    margin: 0px;
    background-color: var(--c-ReallyDark);
    width:100vw;
    height:100vh;

    overflow:hidden;

    
}

.container {
    
    position: absolute;
  
}

/* background and border to debug tiles */
.tile {
    position: absolute;
    
    
    /* background: #222; */
    
    overflow: visible;
    
}
.showGrid {
    border: 1px solid var(--c-white);
}
.sticker-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    
}

.sticker {
    position: relative;
    object-fit: contain;
    pointer-events: none;
    z-index: 99;
}

.sticker-label {
    position: relative;
    width: 130px;
    font-family: icons;
    font-size: 1rem;
    z-index: 1000;
    
    
}

.controls{
    
    width:80%;
    padding:15px;
    color:var(--c-white);
    z-index:1000;
    margin: 0 auto;
}

.control{
    margin-bottom:15px;
}

/* i can't get rid of the slider border :( */
input[type="range"]{
    
    
    
    accent-color: var(--c-white);
    height: 5px;
    border: none !important; 
    border-radius: 0;
    padding: 0 !important;
}
input[type="range"]::-webkit-slider-runnable-track{
    border: none;
    box-shadow: none;
}

.folderFilters{
    display:flex;
    gap:20px;
}

.folderFilters label{
    display:flex;
    align-items:center;
    gap:5px;
}


label {

    font-size: 1rem;
}

.control label{
    display:block;
    margin-bottom:5px;
}

.control input{
    width:100%;
}

.menu{
    position:fixed;
    top:20px;
    left:20px;
    display: flex;
    gap: 1rem;
    z-index:1000;
}

.menu button{
    display: inline-flex;
    padding: 8px 16px 6px 16px;
    
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* border-radius: 25px; */
    white-space: nowrap;
    font-size: 1.25rem;
    font-style: normal;
    font-variation-settings: "wght" 300;
    line-height: normal;
    letter-spacing: 1.2px;
    transition: 0.2s ease-in-out;
    color: var(--c-white);
    border: 2px solid var(--c-dark);
    background: var(--c-dark);
}
.menu button:nth-child(1){
    transform: rotate(-10deg);
}
.menu button:nth-child(2){
    transform: rotate(4deg);
}
.menu button:nth-child(3){
    transform: rotate(-3deg);
}
.menu button:hover{
    background: var(--c-white);
    color: var(--c-dark);
}


/* overlay */

.overlay-panel{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:5000;

    opacity:0;

    visibility:hidden;

    backdrop-filter:blur(0px);

    transition:
        opacity 0.4s ease,
        backdrop-filter 0.4s ease,
        visibility 0.4s;
}


/* open state */

.overlay-panel.open{

    opacity:1;

    visibility:visible;

    backdrop-filter:blur(25px);

}


/* inside */

.panel-content{

    width:100%;

    height:100%;

    background:rgba(20,20,20,.5);

    color:var(--c-white);

    padding:20px;

    box-sizing:border-box;

}
h1{
    margin: 0;
    padding: 0;
    margin-bottom: 2rem;
}

.legend-Wrapper{
    display: flex;
    justify-content: center;
    height: 90%;
}
.legendImage {
    height:100%;
    margin: 0 auto;
}


.closeButton{

    position:absolute;
    background-color: var(--c-dark) !important;
    color: white;
    border: none;
    top:20px;
    right:20px;

    font-size:30px;
    transition: 0.2s ease-in-out;
}
.closeButton:hover{

    position:absolute;
    background-color: var(--c-white) !important;
    top:20px;
    right:20px;
    color: black;
    font-size:30px;
    transition: 0.2s ease-in-out;
}


@media (max-width: 1080px) {
    .sticker-label {
        font-size: 0.9rem;
        width: 600px;
    }

    .menu button {
        font-size: 1.1rem;
    }

    .legend-Wrapper{
        display: flex;
        justify-content: center;
        height: 70%;
    }
    .legendImage {
        height:100%;
        margin: 0 auto;
    }

    
}


@media (max-width: 720px) {
    .sticker-label {
        font-size: 0.75rem;
        width: 450px;
    }

    .menu {
        gap: 0.5rem;
    }

    .menu button {
        font-size: 1rem;
        padding: 6px 12px;
    }

    .legend-Wrapper{
        display: flex;
        justify-content: center;
        height: 50%;
    }
    .legendImage {
        height:100%;
        margin: 0 auto;
    }

    
}


@media (max-width: 400px) {
    .sticker-label {
        font-size: 0.6rem;
        width: 320px;
    }

    .menu {
        flex-direction: column;
        top: 10px;
        left: 10px;
        gap: 2rem;
    }

    .menu button {
        font-size: 0.9rem;
        padding: 5px 10px;
    }

    .legend-Wrapper{
        display: flex;
        justify-content: center;
        height: 40%;
    }
    .legendImage {
        height:100%;
        margin: 0 auto;
    }

    
}