@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito/Nunito-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

body {
    overflow-x: hidden;
}

h1 {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

h2 {
    font-family: "Nunito", sans-serif;
    font-size: 4rem;

    margin: 0;
}

.main-container {
    max-width: 80%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: auto;
    
}

.content {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.form {
    background-color: white;

    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 8rem;
    padding-bottom: 8rem;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10%;

    z-index: 1;
}

.button-container {
    display: flex;
    justify-content: space-evenly;
}

.yes-button, .no-button {
    border: none;
    border-radius: 0.5rem;

    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

    font-family: "Nunito", sans-serif;
    font-size: 2rem;
    font-weight: bold;
}

.yes-button {
    background-color: crimson;

    color: white;

    cursor: pointer;
}

.yes-button:hover {
    background-color: darkred;
}

.no-button {
    color: gray;
    cursor: not-allowed;
}

.heart {
    position: absolute;
}

#heart1 {
    left: 10%;
    top: 20%;

    transform: rotate(-20deg);
}

#heart2 {
    left: 60%;
    top: 40%;

    transform: rotate(45deg);
}

#heart3 {
    left: 60%;
    top: 10%;
}