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

image {
    display: block;
}

body {
    font-family: monospace;

}

input,
button,
textarea {
    font-family: monospace;
}

h1 {
    text-align: center;
    margin-block: 2em;
}

form {
    display: flex;
    flex-direction: column;
    border: 3px solid rgb(0, 0, 0);
    padding: 1em;
    gap: 0.75em;
    max-width: 300px;
    margin: 1em auto 4em auto;
    border-radius: 15px;
    box-shadow: 7px 7px 0 0 rgba(0, 0, 0, 0.991)
}



form>input {
    padding: .5em;
    border-radius: 7px;
    border-width: 3px;
}

form>button {
    padding: .5em;
}

form>.buttons>button[type=submit] {
    flex-grow: 1;
    border-radius: 100px;
    padding: .25em;
    display: grid;
    place-content: center;
    border-width: 3px;


}

form>.buttons>button[type=reset] {
    background-color: rgb(237, 121, 121);
    border-radius: 100px;
    width: 36px;
    height: 36px;
    padding: .25em;
    display: grid;
    place-content: center;
    border: 3px solid rgb(154, 78, 78);
}

form>.buttons>button[type=button] {
    background-color: rgb(236, 29, 29);
    border-radius: 100px;
    width: 36px;
    height: 36px;
    padding: .25em;
    display: grid;
    place-content: center;
    border: 3px solid darkred;
}

form>.buttons {
    display: flex;
    gap: .25em;
}

#listOfNames {
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 5000px;
}

.card {
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 0 0 black;
    border-radius: 10px;
    transition: transform 1000ms ease-out, box-shadow 1000ms ease-out;
}

.card>img {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.card>div {
    padding: 0.25em;
}

.card>h2 {
    padding: 0.25em;
}

.card:hover {
    transform: rotate3d(0, 1, 0, 180deg);
    box-shadow: -7px 7px 0 0 black;
}