* {
  margin: 0px;
  padding: 0px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: large;
  font-weight: bold;
  text-transform: uppercase;
}

nav {
  background-color: #34146b;
  color: white;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 20% 80%;
      grid-template-rows: 20% 80%;
 
  padding: 0% 5%;
}
 .array-inputs {
  place-content: center;
    padding-top: 2%;
    padding-bottom: 1%;
    background-color: #7756b0;
    color: rgb(255, 255, 255);
}
.array-inputs div{
  display: inline;
 }
  .array-inputs ul{
    list-style: none;
    justify-content:space-around;
    display: flex;
    font-size: medium;
    
  }

 .array-inputs #a_generate {
  background-color:white;
  border: none;
  outline: none;
  color: black;
  padding: 4% 0% 0% 0%;
  padding-left: 20%;
  border-radius: 20px;
}
.array-inputs p{
  padding-bottom: 10px;
  position: relative;
  right: 20px;
}

 .array-inputs #a_generate:hover {
  cursor: pointer;
}

nav .header_right {
  justify-content:space-around;
    display: flex;
    display: block;
    padding-bottom: 1%;
}

nav .header_right .nav-heading {
  text-align: center;
    font-size: xxx-large;
    padding: 3%;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

nav .header_right .algos {
  display:flex;
  display: inline;
  text-align: center;
  place-content: center;
  justify-content:space-around;
}
.algos ul{
  justify-content:space-around;
  list-style: none ;
  display:flex;
  padding-top: 1%;
  padding-bottom: 0%;
}
.algos li{
  display: inline;
}
nav .header_right .algos button {
  background-color: transparent;
    border: none;
    color: white;
    outline: none;
    border-radius: 20px;
    font-size: x-large;
    justify-content:space-around;
   
}

nav .header_right .algos button.but{
  justify-content:space-around;
  
}
nav .header_right .algos button:hover {
  background-color: rgb(129, 82, 158);
  cursor: pointer;
  width:220px;
  height:50px;
  
}
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: rgb(222, 211, 227);
  color: rgb(179, 125, 255);
  padding: 2%;
}

nav .header_right .algos .butt_selected:hover {
  background-color: white;
  cursor: pointer;
 
}

nav .header_right .algos .butt_unselected:hover {
  background-color: rgb(175, 138, 255);
  cursor: pointer;
  
}

section {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20% 60% 20%;
      grid-template-columns: 20% 60% 20%;
}

section .Complexity_Containers {
  margin-top: 5%;
}

section .Complexity_Containers .Pair_Definitions {
  margin-top: 10%;
}

section .Complexity_Containers .Pair_Definitions p {
  display: inline;
}

section .Complexity_Containers .Pair_Definitions p.Sub_Heading {
  font-size: medium;
  text-transform: none;
}

section #Info_Cont1 {
  padding: 10% 10%;
  background-color: lavender;
}

section #Info_Cont1 p {
  text-decoration: underline;
  font-size: 20px;
}

section #array_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 70vh;
}

section #Info_Cont2 {
  padding: 10% 10%;
  background-color: lavender;
}

section #Info_Cont2 p {
  text-decoration:underline;
  font-size: 20px;
}

.hide {
  display: none;
}

@media (max-width:1500px){
  nav.algos {
    flex-direction: column;
    align-items: center;
  }
}