:root{
  --max-width:1400px;
 --dark:#18171c; 
  --bg-color:var(--dark);
  /*--foreground-color:#1e1d21;*/
  --foreground-color:#1e1d21;
  --foreground-color-transparent: rgba(30, 29, 33,.7);
  --border-radius:3rem;
  /*text-shadow: horizontal-offset vertical-offset blur color;*/
  --text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  --orange-accent: #f7724f; /* Coral Orange */
  --transition:300ms cubic-bezier(.25,.8,.25,1);
  --primary:#ccf1d0; 
  --secondary:#fce4fe;
  --tertiary:#ffffff;
  --queternary:#1c1a1d;
  --quinary:#151515;

}
/*RESET*/
h1,h2,h3,h4,h5,h6{
  margin: 0;
}
p{
  margin: 0;
  padding: 0;
}
html,body{
  margin:0;
  padding:0;
  font-size: 10px;
}

*{
  box-sizing:border-box;
  
}


body {
  background-color: var(--bg-color);
  background-image:
          linear-gradient(rgba(30, 29, 33,0.7) 1px, transparent 1px),
          linear-gradient(90deg, rgba(30, 29, 33,0.7) 1px, transparent 1px);
  background-size: 80px 80px;
  font-family: "Oswald", serif;

  height: 100vh;
  box-shadow: var(--foreground-color) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
button{
  font-family: "Oswald", serif;
}

  header{
    
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
  header nav{
    background: var(--foreground-color-transparent);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:2rem 4rem;
  }
header nav .logo {
  color: #fff;
  font-size: 4rem;
  font-family: "Rubik Glitch", serif;
  font-weight: 400;
  font-style: normal;
}
header nav ul{
  list-style: none;
  display: flex;
  gap:4rem;
  
}
header nav ul a {
  text-decoration: none;
  color:#fff;
  font-size: 2rem;
  
}
header nav ul a.active{
  background:var(--primary);
  color:var(--quinary);
  padding:.5rem 2rem;
  border-radius:var(--border-radius);
  --text-shadow:var(--text-shadow);

}
.container{
  width: 100%;
  max-width: var(--max-width);
  margin-inline:auto;
}
section.calculations {
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:1.5rem;
}
section.calculations *{

  font-family: "Oswald", serif;
}
section.calculations form{
  color:#fff;
  background-color: var(--foreground-color);
  padding:2rem 4rem;
  border-radius: var(--border-radius);
}

.calculations .input-group label{
  font-size: 3rem;
}
.calculations .input-group input,
.calculations .input-group select
{
  background: transparent;
  outline: none;
  border: 1px solid rgba(255, 255, 255,.5);
  border-radius: var(--border-radius);
  font-size: 2rem;
  padding: 1rem;
  color: #fff;
  transition: all var(--transition);
}

.calculations .input-group input:hover,
.calculations .input-group select:hover
{
  border-color: var(--tertiary);
}
.input-group select option{
  background: var(--secondary);
  color: var(--quinary);
}
.input-group{
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
  width: 100%;
}
/*Info Card*/
.info-card{
  color:#fff;
  background-color: var(--foreground-color);
  padding:2rem 4rem;
  border-radius: var(--border-radius); 
  width: 100%;
}

.info-card--header h6{
  font-size:2rem;
  line-height: 3rem;
  font-weight: lighter;
}
.info-card--header h4{
  font-size:4rem;
  line-height: 4rem;
  white-space: nowrap;
}

.info-card p{
  font-size: 1.8rem;
  font-weight: lighter;
  white-space: nowrap;
}
.info-card--body{
  padding-block: 2rem;
}

.strike-through{
  width: 100% ;
  position: relative;
}

.input-and-unit{
  position: relative;
  display: flex;
  align-items:flex-end;
}
.input-and-unit select{
  position: absolute;
  right: 0;
  border:none!Important;
}

#body-variables-form button[type="submit"]{
  padding: 2rem 3rem;
  background: var(--primary);
  color: var(--quinary);
  font-weight: bold;
  font-size: 2rem;
  /*border: 1px solid var(--orange-accent);*/
  border-radius: var(--border-radius);
  cursor: pointer;
  float: right;
  margin-top:4rem;
}




/*General*/
.d-flex{
  display: flex;
  width: 100%;
}

button{
  transition: all var(--transition);
}
button:hover{
  transform: scale(1.05);
  
}
button:active{
  transform: scale(.9);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number]{
  -moz-appearance: textfield;
}

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  background: var(--quinary );
}

body::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--border-radius);
  
}

/*Responsive*/
@media (max-width: 870px){
  section.calculations {
    grid-template-columns:1fr;
  }
}