body{
    background-color: #2b2b2b;
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: chartreuse;

}


h1{

    text-decoration: none;
}

h5{

    font-weight: 200;
}

p{

    color: #222;
}

input{
    background-color: rgb(46, 46, 46);
    color: white;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;


}
::placeholder{
    color:rgb(143, 143, 143);
    font-weight: 600;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
} 


.unitBox{

    background-color: rgb(255, 151, 55);
    padding: 10px 10px;
    text-align: left;
    text-decoration: none;
    width: 200px;
    font-size: 16px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    margin-right: 100px;
    display: block;
   
  
  }

.button{

  background-color:rgb(175, 66, 197); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  margin: 10px;

}

.button:hover{

    background-color: rgb(164, 0, 197);
}


.button:active{

    background-color: rgb(175, 66, 197);
}


  

  

  select {
    width: 100%;
    height: 50px;
    font-size: 100%;
    font-weight: 600;
    font-family: 'Barlow Semi Condensed', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    border: none;
    color: rgb(189, 189, 189);
    background-color: #222;
    padding: 10px;
    padding-right: 38px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Adding transition effect */
    transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
    animation-name: color;
    animation-duration: 4s;
    animation-iteration-count: infinite;
              }

                @keyframes color {
                  0% {
                    background-color: #222;
                  }
                  50% {
                    background-color:rgb(164, 0, 197);
                  }
                  100% {
                    background-color: #222;
                  }
                }
  
          /* For IE <= 11 */
          select::-ms-expand {
            display: none; 
          }
          select:hover,
          select:focus {
            color: #dfdfdf;
            animation-name: none;
            background-color:rgb(164, 0, 197);
            outline: 0;
            box-shadow: 0;
          }

       

a{
    text-decoration: none;
}

.topnav {
    overflow: hidden;
    font-weight: 200;
    text-transform: uppercase;
  }
  
.topnav a {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

.topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
.topnav a.active {
    background-color: #e57cf3;
    color: white;
}


.grid-container {
    display: grid;
    grid-row-gap: 50px;
    grid-column-gap: 50px;
    grid-template-columns: 30vw 30vw 30vw;
  

 }

 .mono{

  font-family: 'DM Mono', monospace;
  font-style: italic;

}


.black{

    font-weight: 900;
}

.medium{
    font-weight: 600;
}

.light{

    font-weight: 200;
}


.orange{

    color: rgb(255, 123, 0);
}

.green{

    color: chartreuse;
}

.gray{
    color: gray;
}

.center{

    text-align: center;
}

.orangebackground {
    outline-color: rgb(255, 123, 0);
    outline-width: 10px;
    width: 20vw;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.calculator{
    display: inline-block;
    background-color: rgb(26, 26, 26);
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 25vw;

}

.abvApp{
    display: inline-block;
    background-color: rgb(26, 26, 26);
    padding: 15px;
    margin-left: auto;
    margin-right: auto;

}

.convertApp{
    display: inline-block;
    background-color: rgb(26, 26, 26);
    padding: 15px;
    margin-left: auto;
    margin-right: auto;

}


.box {
    height: 200px;
    width: 200px;
    text-align: center;
  }



  
  .input1{
    display: inline; 
    width: 130px;
    height: 50px;
    color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    font-size: 2rem;
    font-weight: 900;
    outline: none;

    }

    .input1:hover{
      animation: blinker 1s ease-in-out infinite;
      color: rgb(0, 0, 0);
    }

    .input1:focus{
      animation:none;
      color: white;
    }
    
    

@keyframes blinker {
  50% {
    color: rgb(116, 116, 116);
  }

    }

    .unit1{
        display: inline-block; 
    width: 290px;
    height: 50px;
    background-color: rgb(255, 151, 55);
    outline: none;
        

    }

    .unit2{
        display: inline-block; 
    width: 290px;
    height: 50px;
    background-color: rgb(227, 85, 255);
    outline: none;

    }



    .answers{
        display: inline-block; 
    width: 290px;
    height: 50px;
    background-color: chartreuse;
    outline: none;

    }
    .answers2{
        display: inline-block; 
    width: 290px;
    height: 50px;
    background-color: rgb(55, 148, 255);
    outline: none;
    
    }
    
    .smallBlack{
    
        color: black;
        display: inline;
        font-size: 1rem;
        padding:10px;
        text-transform: uppercase;
        font-weight: 900;
        text-align: left;
   
    }

    .XsmallBlack{
    
      color: black;
      display: inline;
      font-size: 0.7rem;
      padding:10px;
      text-transform: uppercase;
      font-weight: 900;
      text-align: left;
 
  }

    .smallWhite{
    
        color: rgb(255, 255, 255);
        font-size: 1rem;
        padding: 3px;
        text-transform: uppercase;
        font-weight: 900;
    }

    .answerText{
        color: black;
        font-size: 2rem;
        font-weight: 900;
        padding: 20px;
          }

    


  

      @media  (max-width: 1121px) {
        

        .grid-container {
            max-width: 700px;
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .calculator{
           
            width: 45vw;
      }
      }



      @media  (max-width: 800px) {
        .grid-container {
            max-width: 700px;
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(1, 1fr);
        }

        .calculator{
           
            width: 85vw;
      }

     
  
    }