/* Project By - Faishal Rahman
Email - rahmanfaishal2002@gmail.com */

@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@500&family=Josefin+Sans&family=Signika:wght@300&display=swap');


*{
    margin: 0;
    padding: 0;
    font-family: 'Afacad', sans-serif;
}

#title{
    color: white;
}
.navbar{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 20vh;
    color: white;
    background-color: #282A35;
    text-align: center;
}

h1{
    margin: 5px;
    text-align: center;
}

.navbar-elements{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .custom-select select{
        position: relative;
        cursor: pointer;
        width: 200px;
        height: 45px;
        font-size:large;
        padding: 5px;
        margin: 0 25px;
        text-align: center;
        border: 0;
        border-radius: 10px;
        background-color: #04AA6D;
        color: white;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .array-info div, button{
       margin: 0 20px;
       font-size:large;
    }

    button {
        background-color: #04AA6D;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        font-size:large;
        cursor: pointer;
    }
    button:hover{
        background-color: #059862;
    }
    .array-info{
        display: flex;
        align-items: center;
      }

.array-info div .slider{
  -webkit-appearance: none;  
  appearance: none;
  width: 150px; 
  height: 10px; 
  background: white; 
  outline: none; 
  background-color: #52545f;
  border-radius: 10px;
}
.array-info div .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; 
    height: 20px; 
    border-radius: 20px;
    background: #04AA6D;
    cursor: pointer; 
  }
  
  .array-info div  .slider::-moz-range-thumb {
    width: 25px; 
    height: 25px; 
    background: #04AA6D; 
    cursor: pointer; 
  }
  .array-info div .slider::-webkit-slider-thumb .disabled{
    -webkit-appearance: none;
    appearance: none;
    width: 20px; 
    height: 20px; 
    border-radius: 20px;
    background: #036944;
    cursor: pointer; 
  }
  
  .array-info div  .slider::-moz-range-thumb .disabled{
    width: 25px; 
    height: 25px; 
    background: #036944; 
    cursor: pointer; 
  }
body{
    background-color: #3c3d45;
    color: white;
}
.body{
    display: flex;
    margin: 10px 20px;
    flex-direction: row;
    font-size: larger;
    justify-content: space-evenly;
}

#array-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 75%;
    margin: 0 10px;
    height: 70vh;
}

.custom-select option .disabled{
    color: rgb(182, 180, 180);
    background-color: #065d3d;
}
.custom-select option .disabled:hover{
    color: rgb(182, 180, 180);
    background-color: #065d3d;
}
.custom-select option .selected{
    color: white;
    background-color: #04AA6D;
}

 #space{
    width: 10%;
    text-align: center;
}
#time{
    width: 10%;
    text-align: center;
}

@media only screen and (max-width: 900px) {
    /* Adjust font sizes and margins for smaller screens */
    *{
        font-size: medium;
    }
    .navbar-elements {
        flex-direction: column;
        align-items: center;
    }

    .custom-select select {
        width: 100%;
        margin: 0 0 10px;
    }

    .array-info div,
    button {
        margin: 0 0 10px;
    }

    .button {
        padding: 10px;
    }

    .array-info div .slider {
        width: 100%;
    }
}

/* Project By - Faishal Rahman
Email - rahmanfaishal2002@gmail.com */