*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;   
}

body{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
        background-color: #c3add1;

}


main{
   display:flex;
   flex-direction: column;
   height: calc(100vh - 41px);
}

header{
   position:fixed;
   width:100%;
   background-color: var(--fg1);
   height: 40px;
   display: flex;
   gap: 1rem;
   align-items: center;
   padding-left: 5px;
   padding-right: 5px;
   color: var(--txt);

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

   h1{
      font-size: 1.3rem;
   }
}

.fa-btn{
   border: none;
   background-color: transparent;
   font-size: 1.3rem;
   cursor: pointer;
   color: var(--txt);
}

i:hover, button:hover, a:hover{
   text-shadow: 2px 2px 2px grey;
   transform: scale(1.05);
}

.item{
    position: absolute;
    background-color: var(--fg1);
    padding: 0.5rem;

    background-size: cover ;
    background-repeat: no-repeat ;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.box{
   box-shadow: 2px 2px 2px grey;
}

.text-over{
      justify-content: end;
}

.item-text{
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.25rem;
    text-align: center;
    position:relative;
    padding: 0.25rem;
    
    
}

.item:hover{
   outline: 2px solid grey;
}

.option-btn{
   font-size: 1.2rem;
   color: var(--fg2);
   text-shadow: 3px 3px 3px black;
}

.option-container{
   position: absolute;
   display: flex;
   gap:0.5rem;
   top: 2px;
   margin:auto;
   visibility: hidden;
   z-index: 1000;
}

.item:hover .option-container{
   visibility: visible;
}

#chart{
     height:100vh;
     label{
         width: 1.5rem;
        }
}

#options-bar{
    position:fixed;
    width:100%;
    top: 40px;
   color: var(--fg1);
   padding: 0.25rem;
   display: flex;
   gap: 0.4rem;
   align-items: center;
   background-color: gainsboro;
   .fa-btn{
      color: var(--fg1);
   }

   #title{
      font-size: 1.2rem;
      width: 100%;
   }
}


.grid{
     background-image: linear-gradient(rgba(235, 235, 235, 0.4) .1em, transparent .1em), linear-gradient(90deg, rgba(235, 235, 235, 0.4) .1em, transparent .1em);
     background-size: 25px 25px;
}


#bg-color{
   display: none;
}

.type-btn{
   display: flex;
   width: 100%;
   background-color: grey;
   justify-content: space-between;
}

.type-btn:hover{
   transform: scale(1);
}

.arrow, .icon{
    text-shadow: 2px 2px 2px grey;
}

#item-options, #solve-modal{
   width: 330px;
   position: absolute;
   margin:0;
   top:0px;
   left:0px;

   label{
      padding: 0.25rem;
      color: white;
      width: 100%;
      background-color: grey;
      display: flex;
      justify-content: space-between;

      div{
        width: 160px;

        input:not(input[type=checkbox]){
           width: 120px;
        }

        input[type=color]{
          width: 40px;
        }
      }
   }
}

#solve-modal{
   div{
      display: flex;
     justify-content: end;

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

#item-pixabay{
button{
   width: 1.3rem;
   height: 1.3rem;
   padding:0;
}
img{
   width: 100%;
   height: 100%;
}

}

#pixabay-modal{
  width:570px;
  overflow: hidden;
}

#pixabay-container{
     max-height:70vh;
  }

  .cursive-title-link{
   font-size: 1.1rem;
   font-style: italic;
   color: white;

  }

  

  .text{
   color: rgb(48, 48, 48);
  }

table{
   width: 100%;
   text-align: left;
}

#welcome-modal{

   height: 90vh;
   h3{
    background-color: transparent;
    color: black;
    font-size: 1.1rem;
  }

  div{
   height:90%;
  }

}

#iframe-code{
   width:100%;
}