body{
    margin: 0;
    padding: 0;
    background-color: lightgray;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.Config{
    height: 6vh;
    display: flex;
    border-radius: 10px;
    padding: 10px;
    justify-content: right;
}

.content{
    background-color: rgba(220, 220, 220, 0.6);
    display: flex;
    position: absolute;
    top: -85px;
    margin: auto;
    border-radius: 999px;
    transition: .3s;
    z-index: 1;
    width: auto;
}

.drop{
    width: 100px;
    height: 40px;
    background-color: rgba(220, 220, 220, .6);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0 0 20px 20px;
    display: flex;
    cursor: pointer;
}
.drop i{
    margin: auto;
    font-size: 40px;
    transition: .3s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 25px;
    border-radius: 9999px;
    background: rgb(160, 37, 156);
    cursor: pointer;
}
  
.slider::-moz-range-thumb {
    width: 30px;
    height: 25px;
    border-radius: 9999px;
    background: rgb(160, 37, 156);
    cursor: pointer;
}

.slider{
    margin: auto;
    -webkit-appearance: none;
    border-radius: 999px;
    transition: .4s;
    opacity: .9;
    display: flex;
}

.slider:hover{
    opacity: 1;
}


.box{
    margin: 0 20px;
    height: 100%;
    aspect-ratio: 1;
    background-color: white;
    border-radius: 9999px;
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#Map{
    width: 98.5%;
    height: 97vh;
    display: grid;
    margin: auto;
    outline: 3px solid limegreen;
    border-radius: 2px;
    padding: 2px;
}

#square{
    border-radius: 5%;
    outline: 0.5px solid lightgray;
    transition: transform 0.1s;
}

.box p{
    margin: auto;
    position: absolute;
    font-family: 'Comic Neue';
    font-size: 15px;
    color: black;
    text-shadow:
    -1px -1px 0 #ffffff,  
     1px -1px 0 #ffffff,
     -1px 1px 0 #ffffff,
      1px 1px 0 #ffffff;
}

.box div{
    aspect-ratio: 1;
    transition: .3s;
    margin: auto;
    left: 0;
}

.erase{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: white;
    height: 50%;
    border-radius: 10px;
}

.start{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: rgb(30, 176, 224);
    height: 50%;
    border-radius: 10px;
}

.end{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: rgb(255, 76, 48);
    height: 50%;
    border-radius: 10px;
}

.wall{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: rgb(119, 136, 153);
    height: 50%;
    border-radius: 10px;
}

.clear{
    outline: 2px dashed rgba(0, 0, 0, .6);
    border-radius: 10px;
    font-size: 30px;
    color: red;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: white;
    height: 50%;
    aspect-ratio: 1;
}

.astr{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: rgb(11, 210, 97);
    height: 50%;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    align-items:  center;
    display: flex;
}

.maze{
    outline: 2px dashed rgba(0, 0, 0, .6);
    background-color: rgb(210, 11, 160);
    height: 50%;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    align-items:  center;
    display: flex;
}

.clear span{
    rotate: 45deg;
}

.GO{
    outline: 2px dashed rgba(0, 0, 0, .6);
    height: 50%;
    background-color: greenyellow;
    font-size: 20px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
}

.slider p{
    margin: auto;
}

.slider input{
    box-shadow: 3px 11px 17px 4px rgba(0,0,0,0.24);
    -webkit-box-shadow: 3px 11px 17px 4px rgba(0,0,0,0.24);
    -moz-box-shadow: 3px 11px 17px 4px rgba(0,0,0,0.24);    
}

.box:hover .clear{
    outline: 3px solid green;
    height: 100%;
    border-radius: 9999px;
    font-size: 50px;
}

.box:hover .maze{
    outline: 3px solid green;
    height: 100%;
    border-radius: 9999px;
    font-size: 90px;
}

.clicked{
    outline: 3px solid rgb(47, 255, 75);
    height: 80%;
    border-radius: 9999px;
}