*{
    border-radius: 0.1rem;
 }

header{
    width:100%;
    color: var(--txt);
    font-size: var(--txt-size-large);
    background-color: steelblue;
    padding: 0.25rem;

}

#play-bar{
    width:100%;
    background-color: rgb(49, 49, 49);
    display:flex;
    flex-wrap:wrap;
    padding:0.2rem;
}

audio{
    background-color: white;
}

h1{
    font-size: 1.5rem;
}

h3{
    display: flex;
}

details{
    color: var(--fg2);
}

main{
    display:grid;
    grid-template-columns: 250px calc( 100vw - 405px) 140px;
    grid-template-rows: calc(100vh - 3.5rem);
}

label, legend{
    display: flex;
    align-items: center;
    gap: var(--dist-small);
    color: var(--fg2);
    padding: 0.1rem;
}


legend{
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem;
    font-size: 1.1rem;
    width:100%;
    p{
        width:100%;
        text-align:left;
    }
}

button{
    border: none;
    border-radius:0.1rem;
    padding:0.1rem;
}

input, select{
    height: 1.2rem;
    width: 3.5rem;
}

select{
    width: 6rem;
}

[type=checkbox]{
    width:1rem;
}

.fa-btn{
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background-color: transparent;
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    border: none;
}

.fa-btn:hover{
    background-color: var(--fg2);
    color: steelblue;
    transition: 0.1s ease-in-out;
}


label .fa-btn:hover{
    transition: 0.1s ease-in-out;
}

#mobile-warning{
      display: none;
      color: white;
}

a{
    color: var(--text);
}

#anim-modal label{
    width:47%;
    display:flex;
    justify-content: space-between;
    background-color: steelblue;
}


#effects{
    display: flex;
    flex-direction: column;
    gap: var(--dist-small);
    border-right: 2px solid var(--fg2);
    overflow-y:scroll;
    scrollbar-width: thin;
    padding: var(--dist-small);

    label{
        width:100%;
        background-color: steelblue;
       
    }

    .fa-btn{
        display: flex;
        justify-content: space-between;
        color: black;
        width:100%;

       
    }

    .close-btn{
    width: 1.1rem;
    color: steelblue;
    margin-left:0.2rem;
    }

    span{
        width:1.2rem;
        height:1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2rem;
        background-color: black;
        color: var(--fg2);
    }

}

audio{
    height: 1.5rem;
    &::-webkit-media-controls-enclosure {
       border-radius: 0rem;
       background-color: var(--fg2);
   }

}

canvas{
    border: 1px solid var(--fg2);
    transform-origin: 0 0;
}

#canvas-container{
    scrollbar-width: thin;
    overflow: scroll;
    background-color: rgb(49,49,49);
}

#ads-container{
    color:grey;
    padding:0.5rem;
    display:flex;
    flex-direction: column;
    gap:0.5rem;
   

    a{
        overflow: hidden;
    }

    p{
        line-height:0.8rem;
    }
}

#effect-container{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    
   details, .global-settings{
        border: 1px solid var(--fg2);
        padding: 0.1rem;
        color: var(--fg2);

        label{
            margin-top: 0.2rem;
        }
    }
    summary,label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        [type=checkbox]{
            width: 1.3rem;
        }

        p:first-of-type{
            font-size: 1.5rem;
            margin-right: 0.3rem;
            font-weight: bold;
        }
    }
}

.choose-buttons{
    height: 80vh;
    padding:0.25rem;

    .preset-button{
        width: 17rem;
    }

    button{
        height: 8.5rem;
        width: 8.5rem;
        padding:0;
        border: none;
        background-color: transparent;
        text-align: center;

        img{
            width:100%;
            pointer-events: none;
        }

        i{
            pointer-events: none;
            color: white;
            font-size:3rem;
            margin-top: -2rem;
        }
        div{
            width:100%;
            position: relative;
            background-color: rgba(255,255,255,0.7);
            margin-top: 1rem;
            pointer-events: none;
            font-weight:bold;
        }
    }
}

.choose-buttons button:hover div{
    background-color: steelblue;
    color: white;
    font-size:1.1rem;
}

.separator-headline{
    width: 100%;
    padding: 2rem 0 2rem 0;
}

.gizmo{
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.3rem;
    background-color: rgba(255,0,0,0.5);
    border-radius: 2rem;
    position:absolute;
    z-index: 1000;
    display:flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    cursor: pointer;
    
}

[data-animated=true]~button{
    color: red;
}

/* Mobile */
@media only screen and (max-width: 900px) {
   #mobile-warning{
      display: block;
   }

   main{
    display:grid;
    grid-template-columns: 100vw;
    grid-template-rows: 100vh 100vh 100vh;
}
}