:root{
   --theme: #ffcd80;
}

*{margin:0; padding:0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; color: gainsboro;}

hgroup{
    background-color: var(--theme);
}

h1,h2{
    padding:0.3rem;
    text-align:left;
    font-size: 1.5rem;
    background-color: var(--theme);
    color: black;
}

hgroup p{
    font-style: italic;
    font-size: 1.2rem;
    color: black;
}

::backdrop{

  background-color: rgba(0,0,0,0.6);
}


body{  
    background-color: darkgrey;
    height:100vh;
}



.objects{
    min-height:3rem;
}

optgroup{
    color:white;
}



select{
    background-color: #101010;
    text-align: left;
    width: 100%;
    
    &:focus{
        border:none;
        outline: none;
    }
}

input, textarea{
    text-align: left;
    height: 1.4rem;
    outline: none;  
    background-color: #3e3e3e;
    font-size: 1rem;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;
   height:1.5rem;
   width:1.8rem;
   
}

.property-detail{
    display:none; 

    label{
        margin:0.5rem 0 0.5rem 0;
    }
}

input[type=range] { 
    appearance: none;
    height: 7px; 
    background: #D2D2D2; 
    outline: none; 
    transition: opacity .2s;
    border-radius:.2rem;
}

#scale-value{
    min-width:2.2rem;
    max-width:2.2rem;
}

input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 10px; 
    height: 20px; 
    background: #D2D2D2; 
    cursor: pointer;
    border-radius:.2rem;
  }
  
  input[type=range]::-moz-range-thumb {
    appearance: none;
    width: 10px; 
    height: 20px; 
    background: #D2D2D2; 
    outline:0;
    border-radius:.2rem;
    cursor: pointer;
  }

input[type='color']{
    visibility: hidden;
}


#property-filter div{
    display: flex;
    gap:0.3rem;
}

.column{
    flex-direction:column; 
    align-items:start;
    gap:0.3rem;
}

.space-between{
    display:flex;
    width:100%;
    justify-content: space-between;
}

#start-modal{
    width:calc(3 * 16rem + 5rem);
    top:1rem;
    overflow-x: hidden;
    border: 4px solid white;
    border-radius: 0.25rem;

    ul{
        padding:1rem 2rem 1rem 2rem;
        font-weight: bold;
    }

    div{
       display: grid;
       grid-template-columns: repeat( 3, 16rem);
       grid-template-rows: repeat(1, 10rem);
       justify-content: center;
       grid-gap:1rem;
       padding: 0.5rem 1rem 0.5rem 1rem;  
    }

    #start{
        padding: 1rem;

        button{
            background-color: var(--theme);
            font-size: 1.1rem;
        } 
    }

    details {       
        padding: 0.5rem 1rem 0.5rem 1rem;

        section{
        display: grid;
        grid-template-columns: repeat( 3, 16rem);
        grid-template-rows: repeat( 3, 10rem);
        justify-content: center;
        grid-gap:1rem;       
        }

        summary{
            width:15rem;
        }
    }

    button{
        border:none;
        border-radius: 0.25rem;
        background-color: white;
        outline:none;
        padding:.1rem;

        img{
                width:100%;
            }
   }

    &::backdrop{
        background-color: rgba(0,0,0,0.8);
    }

}

article{
    display: flex;
}

button{
    border: none;
    width:100%;
    
}



label, .tools-column{
    display: flex;
    justify-content: space-between;
}



.flex-column{
    display: flex;
    flex-direction: column;  
    gap:0.2rem; 
}

.awesome-button{
       background-color: transparent;
       border:none;
       color:gainsboro;
       font-size: 1.3rem;
       width:1.5rem;

}

button:hover{
   transform: scale(1.1);
}


summary{
    font-weight: bold;
}

#image{
    overflow: auto; 

    height:100vh;
    width: 100%;

    display:block;
    padding:0.2rem
}

#canv{
    transform-origin: 0% 0%;
}

#tools, #properties{
    display:flex;
    flex-direction: column;
    gap:.5rem;
    padding:.5rem;
    background-color: #101010;
    height: 100vh;
}


#tools{
    overflow-y: auto;
    overflow-x: hidden;
    min-width:12rem;
    max-width:12rem;
    gap:.5rem;   
    scrollbar-width: thin;
    
    input{
        width:5rem;
        font-size:1rem;
    }
}

.tool-section{
    border: 0.1rem solid rgb(111, 111, 111);
    padding:0.1rem;
    border-radius: 0.15rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#properties{
    right:180px;
    min-width:16rem;
    max-width:16rem;
    display:none; 
    overflow-y:auto;
    overflow-x:hidden;

    label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 0.1rem solid rgb(111, 111, 111);
        padding:0.1rem;
        border-radius: 0.25rem;
    }

    input, select{
        width:5rem;
        border:none;
    }

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

    input[type='color']{
       visibility: visible;
    }

    input[type='checkbox']:checked{
        color:grey;
    }

    textarea{
        width:100%;
        resize:none;
        height:4rem;
        border:none;
    }

    details{
        display:flex;
        flex-direction: column;
        gap:0.2rem;
    }
}

#ads{
    right:0; 
    padding-left: 10px;
    color:black;
    min-width: 160px;
    max-width: 160px;
    height:100vh;
    overflow:hidden;
    background-color: #101010;
    p{
       font-size: 0.7rem;  
       font-family: Arial, Helvetica, sans-serif;
       color:gainsboro;
    }
}

input{
   width:100%;
   border:none;
}

.object-panel{
    color:black;
    display:flex;
    gap:0.1rem;

    button, i{
        color:black;
    }
}

.highlight{
    outline: 2px solid red;

}

.object-btn, .object-btn{
    width:1.5rem;
}

.object-selection{
    padding-left:0.3rem;
    text-align:left;
    max-width:calc(7.5rem - 3rem -0.2rem);
}

.disabled-btn{
    text-decoration: line-through;
}

dialog{  
    margin:1vh auto;
    border-radius:0.5rem;
    width:60.5rem;
    background-color:#101010;
    z-index: 2;
    section{
        padding:1rem;
        display: flex;
        flex-direction: column;
        gap:1rem;
    }
    
    fieldset, button, label{
        border: 2px solid #b6b6b6; 
        border-radius: 0.25rem;
        padding:0.25rem;

        button{
            padding:0;
            color:greenyellow;
        }
    }

    label{
        height:2rem;
        display:flex;
        gap:1rem;
    }
     

    #result-container{
        height: calc( 100vh - 23rem);
        overflow-y: scroll;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap:0.5rem;
        padding:0.5rem;

        button{
            color: black;
        }
    }

    button{
        background-color: #101010;
        flex-grow: 1;
    }

    input[type="number"]{
        width:4rem;
    }
}

.thumbnail-load-button{
   color: white;
   font-weight: bold;
}
.pixabay-tumbnail{
  width:18rem;
  border: 2px solid gainsboro;
  padding:0.25rem;
  border-radius: 0.25rem;
  overflow: hidden;

  img{
    height:10rem;
  }

  figcaption{
    display: flex;
    flex-direction: column;
    gap:0.2rem;
  }
}

.transparent-color{
    width: 1rem;
    font-size: 1.3rem;
    background-color: transparent;
    color: white;
}

summary:not(#tools summary), legend, dialog button{
    background-color: var(--theme);
    padding:0 0.25rem 0 0.25rem;
    border-radius: .25rem;
    margin-bottom:0.3rem;
    color:black;
    font-weight: bold;
}

.label-group{
    border: 0.1rem solid rgb(111, 111, 111);
    border-radius:0.25rem;
    padding:0.2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap:0.1rem;
    margin-bottom: 0.5rem;

    label{
        margin:0;
        border:none;
    }
}

#pixabay-api{
    min-height: 98vh;
    max-height: 98vh;
    overflow: hidden;
}