* {
  box-sizing: border-box;
}

:root {
  --color-background: #f9f8f6;
  --color-dark: #313647;
  --color-lighter: #1A3D64;
  --color-2: #6DC3BB;
  --color-3: #BF1A1A;
  ---color-4: #607B8F;
  ---color-5: #002455;
  ---color-6: #C8C00FF;
  
  
}

html {
  font-family: "Roboto", open-sans;
  font-size: 0.7rem;
}

body {
  margin: 0;
  background-color: var(--color-background);
  
}

.landing{
  height:165vh;

}

header {
  background: var(---color-5);
  color: #f6f7f8;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  width: 100%;
}

.h1-header{
  font-size: 3rem;
}

.img-container {
  display: flex;
  justify-content: center;
}

.img-yakuza {
  position: relative;
  left: 15vw;
  top: 5vh;
  height: 42vh;
}

.img-majima {
  position: relative;
  top: 5vh;
  right: 15vw;
  height: 45vh;
}

.data-entry-section{

  display: flex;
  justify-content: row; 
  width: 80vw;
      
}

#calculator, #calculator-2 {

  position: relative;
  top: 10vh;
 left: 10vw;
  margin: 0 auto;
  height: 90vh;
  width: 30vw;

  background-color: var(---color-4);
  border-radius: 10px;

  color: var(--color-lighter);
  text-align: center;

  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#calc-actions, #calc-actions-2 {


  position: relative;
  margin-top: 1rem;
  text-align: center;
}


.h1-calc-actions-title{
  font-size: 3rem;
}

.h1-calc-title{
  position: relative;
  top: 2vh;


}

.res-main-section{
    display: flex;
  justify-content: row; 
  width: 80vw;
  height: 38vh;
}

.res-sections{
  position: relative;
  top: -40vh;
  

 left: 10vw;
  margin: 0 auto;
 
}

#results,
#results2,
#results3,
#results4,
#results-water,
#results-electricity,
#results-water-price,
#results-electricity-price

 {
  position: relative;
  top: 5vh;
  margin: 2rem auto;
  width: 40rem;
  background-color: var(---color-4);
  border: 1px solid var(---color-4);
  border-radius: 10px;
  padding: 1rem;
  color: #023d6d;
  text-align: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

#results {
  text-align: center;
}

#results5{
    position: relative;
  top: 1vh;
  bottom: 20vh;
  margin: 2rem auto;
  width: 40rem;
  height: 20vh;
  background-color: var(---color-4);
  border: 1px solid var(--color-4);
  border-radius: 10px;
  padding: 1rem;
  color: #023d6d;
  text-align: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);

}

#calculator input {
  position: relative;
  top: 10px;
  font: inherit;
  font-size: 2vh;
  border: 3px solid var(--color-background);
  border-radius: 5px;
  width: 5vw;
  height: 4vh;

  margin: 0 auto;
  display: block;
  color: #023d6d;
  text-align: center;

   line-height: 2vh
}

#calculator input:focus {
  outline: none;
}

.btn-main{
    position: relative;
  top: 2vh;
  font: inherit;
  background: var(--color-lighter);
  color: white;
  border: 1px solid var(--color-lighter);
  border-radius: 5px;
  height: 3vh;
  width: 5vw;


  cursor: pointer;
}



#btn-calculate {
  
  position: relative;
  top: 8vh;
  font-family: "Roboto", open-sans;
  font-size: 2rem;

  background: var(--color-lighter);
  color: white;
  border: 1px solid var(--color-lighter);
  border-radius: 5px;
  width: 10vw;
  height: 6vh;
  cursor: pointer;
}

#btn-calculate-2{
    position: relative;
  top: 5vh;
  font-family: "Roboto", open-sans;
  font-size: 2rem;

  background: var(--color-lighter);
  color: white;
  border: 1px solid var(--color-lighter);
  border-radius: 5px;
  width: 10vw;
  height: 6vh;
  cursor: pointer;
  
}

#btn-calculate-3{
      position: relative;
  top: 3vh;
  font-family: "Roboto", open-sans;
  font-size: 2rem;

  background: var(--color-lighter);
  color: white;
  border: 1px solid var(--color-lighter);
  border-radius: 5px;
  width: 10vw;
  height: 6vh;
  cursor: pointer;
}

#btn-calculate:hover{
  background-color: var(--color-3);
  border: var(--color-3);
}

#btn-calculate-2:hover{
    background-color: var(--color-3);
  border: var(--color-3);

}

#btn-calculate-3:hover{
    background-color: var(--color-3);
  border: var(--color-3);

}


#calculator button:focus {
  outline: none;
}

.btn-main:hover{
    background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-lighter);

}

#btn-powder-pack:hover{
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-lighter);
}
#btn-add:hover{
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-lighter);
}
#btn-powder-price:hover
 {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-lighter);
}