/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

body{
    font-family: "Roboto", sans-serif;
    padding: 20px;
    background-color: #1fa586;
    color: #080932;
    font-size: var(--step-0);

}
.box1{ 
  display: flex;
  justify-content: center;
}
.box2{
    font-size: var(--step-2);
    color: white;
    margin-left: 10%;
    margin-top: 30px;
    margin-bottom: 60px;
}

button{
  margin: 20px;
  font-size: var(--step-2);
  padding: 10px 60px;
  background-color: #032e16;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
h1{
    text-align: center;
    margin-bottom: 20px;
    font-size: var(--step-5);
    color: #080932;
    border-bottom: #080932 5px dashed;
    width: fit-content;
    
}
.grid-container{
    margin-left: 15px;
    display: flex;
    border: 10px dashed #080932;
    max-width: 900px;
    margin: 30px 15%;
    background-color: #94bcb3;
    background-size: 95% 95%;
    padding: 10px 20px;
    background-clip: padding-box;
    border-radius: 40px;

}
.numero{
    font-size: var(--step-3);
    align-items: center;
    line-height: 90%;
    margin: auto 0;
    padding: 0 10px;
      font-family: "Geostar", serif;


}
.phrase{
 
margin-left: 20px;
align-items: center;
}