html {
   background: radial-gradient(#FBE9E9, #EAECFA);
   background-size: 100vw 100vw;
}

.grid {
    display: grid;
    grid-template-columns: 150px 250px;
    gap: 10px;
    width: fit-content;
    min-height: 22px;
    font-family: Roboto, sans-serif;
}

h1 {
    color: black;
    font-family: Limelight, sans-serif;
}

h3, h4, h5 {
    font-family: Roboto, sans-serif;
}

.button {
    background: linear-gradient(90deg, #E66465, #9198E5);
    font-family: Lexend Deca, sans-serif;
    font-weight: 500;
    color: white;
    border: 0px solid black;
    border-radius: 10px 0px 10px 0px;
    background-size: 100%;
    transition: background-size 0.5s ease-in-out;
}

.button:hover {
    background-size: 200%;
}

.input {
    border: 1px solid;
    border-color: black;
    border-radius: 5px 0px 5px 0px;
}

.input:focus {
    background: linear-gradient(90deg, #FBE9E9, #EAECFA);
    border: 2px solid black;
}

a {
    color: black;
    text-decoration: none;
    transition: color 0.5s ease-out;
}

a:hover {
    color: #E66465;
}

.checkbox {
    appearance: none;
    clip-path: polygon(20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%, 20% 0%, 0% 20%, 30% 50%, 0% 80%);
    width: 15px;
    height: 15px;
    background: #E66465;
    margin: 0px;
    transition: all 0.6s ease-in-out;
}

.checkbox:checked {
    background: #9198E5;
    clip-path: polygon(40% 100%, 40% 100%, 100% 40%, 100% 40%, 100% 40%, 100% 40%, 80% 20%, 40% 60%, 20% 40%, 0% 60%, 0% 60%, 0% 60%);
}