@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*,*::after,*::before {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

:root {
    /*Primary*/

    --green-200: hsl(148, 38%, 91%);
    --green-600: hsl(169, 82%, 27%);
    --red: hsl(0, 66%, 54%);

    /*Neutral*/

    --white: hsl(0, 0%, 100%);
    --grey-500: hsl(186, 15%, 59%);
    --grey-900: hsl(187, 24%, 22%);

    /*Size*/

    --Margin-Size: 1vw;
}

html {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100vh;
    background: var(--green-200);
    accent-color: var(--green-600);
}

#contact {
    width: 50vw;
    height: auto;
    background: var(--white);
    padding: 2vw;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    transform: scale(0.9);
}

input {margin: 10px 0;}

textarea {margin-top: 10px;}

#firstname{margin-right: 1vw}

#firstname, #lastname {
    width:22.5vw;
    border-radius: 5px;
    height:40px;
    padding: 10px;  
}

#message {resize: none;padding:10px 17px;}

#email {
    width: 46vw;
    border-radius: 5px;
    height:40px;
    padding: 10px; 
}

h1 {display:block;width:50vw;}

input, .type div {border:1px solid var(--grey-900)}
input:hover, .type div:hover {cursor: pointer}

.type {display:flex;gap:1vw;flex-wrap: wrap;flex-direction:row;}

.type div {
    height: 40px;
    width:22.5vw;
    border-radius: 8px;
    padding: 5px 15px;
    display:flex;
    text-align: center;
    align-items: center;
    cursor: pointer;
}

.type input[type="radio"], .agreement label {margin: 0 0.5vw;}
.type p {margin-bottom: 2px}

.type input[type="radio"], #agreement {
    transform: scale(1.4);
}

.agreement {margin: 1vw 0}

#message {
    width: 46vw;
    height: 100px;
    border-radius: 8px;
}

button {
    width: 46vw;
    height: 6vh;
    color: var(--white);
    background: var(--green-600);
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-weight: 700;
}

button:hover {background: hsl(169, 81%, 19%)}

button:active {background: hsl(169, 81%, 39%)}

.error, .typeError, .errorMessage {color: var(--red)}

#success_state {
    position:absolute;
    display: none;
    background: var(--grey-900);
    border-radius: 12px;
    top:20px;
    width: 30vw;
    padding: 20px;
    color: var(--grey-500);
    z-index: 2;
    animation: success 1.5s ease-in-out 1;
}

.successMessage {display: flex;margin-bottom: 10px}

#success_state h1 {color: var(--white);margin-left:10px}

.attribution { font-size: 13px }
.attribution a { color: hsl(228, 45%, 44%); text-decoration: none; }

@keyframes success {
    0% {transform: scale(1)}
    50%{transform: scale(1.1)}
    100%{transform: scale(1)}
}

@media screen and (width <= 768px) {

    body {min-height: fit-content;}

    #success_state {width: 300px}

    #contact {width: 90vw}

    #firstname, #lastname, #email, #message, .type div, button {width: 85vw}
}