main {
width: 90%;
margin: auto;
}

.btn-hp{
  font-family: 'MujFont';
      src: url('../fonts/Miskiefont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;

  background-color: var(--yellow);

}
a.button {
    font-size: 24px ;
    padding: 5px 6px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    margin-right: 20px;

    font-family: 'MujFont';
      src: url('../fonts/Miskiefont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;

  color: var(--primary);
  background-color: var(--yellow);
}

.hero{
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 80vh;

}

.left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 20px;
  margin: 20px;
  
  width: 700px;
  height: 400px;
}

.buttons {

  display: flex;
  flex-direction: row;
  
  width: 100%;
  align-items:flex-end; 
}

.right{
  width: 700px;
  height: 500px;
}