*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: uppercase;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    /* color: rgb(29, 199, 66); */
}

:root{
    --theme:rgb(178, 178, 228);
    --SecoColor:rgb(7, 7, 66);
}

nav {
    background-color:var(--theme);
    color: var(--SecoColor);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 30% 60%;
        grid-template-columns: 30% 60%;
    -webkit-column-gap: 10%;
            column-gap: 10%;
    padding: 0% 5%;
  }

  nav .array_inputs {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 60% 40%;
        grid-template-columns: 60% 40%;
    place-content: center;
    padding: 5% 0%;

  }

  #array_size,#array_speed{
    padding: 5% 0%;
  }


  #generate{
    background-color: transparent;
    border: 2px solid var(--SecoColor);
    color: var(--SecoColor);
    padding: 0.5rem 0;
    border-radius: 0.5rem;

  }

  #generate:hover,.AlgoButton:hover{
      cursor: pointer;
      background-color: var(--SecoColor);
      color: var(--theme);
      border-color: var(--theme);
      transition: all 0.5s ease-in-out;
  }

  
nav .header_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  nav .header_right .nav-heading {
    display: inline-block;
    font-size: xxx-large;
    padding: 3% 0%;
  }
  
  nav .header_right .algos {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (16.66667%)[6];
        grid-template-columns: repeat(6, 16.66667%);
    place-content: center;
    padding: 2% 0%;
  }
  
  .AlgoButton{
    background-color: transparent;
    border: 2px solid var(--SecoColor);
    color: var(--SecoColor);
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
  }


  
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
  }
  

  
  #array_container {

    
    position: absolute;
    width: 80vw;
    height: 70vh;
    /* margin: auto; */
    /* border: 2px solid red; */
    padding-top: 2rem;
    
  }

  .hide {
    display: none;
  }


  
nav .header_right .algos .butt_locked {
    background-color: transparent;
    cursor: pointer;
  }
  
  nav .header_right .algos .butt_locked:hover {
    background-color: transparent;
    cursor: pointer;
  }
  
  nav .header_right .algos .butt_selected {
    background-color: white;
    color: green;
  }
  
  nav .header_right .algos .butt_selected:hover {
    background-color: white;
    cursor: pointer;
  }
  
  nav .header_right .algos .butt_unselected:hover {
    background-color: blue;
    cursor: pointer;
  }
  
  .footer{
    text-align: center;
    color:var(--SecoColor);
    border: 2px solid  var(--SecoColor);
    border-bottom: none;
    border-left: none;
    border-right: none;
    color: rgb(233, 233, 47);
    color: rgb(115, 196, 228);
    color:rgb(29, 199, 66);
  }