body {
    margin: 0;
    font-family: monospace;
    background-color: rgb(253, 246, 237);
    font-size: 150%;
}

nav {
    display: flex;
    justify-content:flex-end;
    background-color: rgb(80, 80, 80);
    grid-template-columns: repeat(12,1fr);
    gap: 30px;
}

nav a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
}

nav a:hover {
    transition: 0.1s ease;
    text-shadow: 0px 0px 5px;
}

.container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 30px;
    padding: 20px;
}

header h1 {
    grid-column: span 6;
    padding: 5px 20px 0px;
}

.card {
    padding: 5px;
    border: 2px solid black;
    border-radius: 5px;
    grid-column: span 4;
    box-shadow: 3px 3px 10px grey;
    place-items: center;
    max-width: 400px;
    margin: auto;
}

.card:hover {
    cursor: pointer;
    border-color:rgb(155, 155, 155);
    transition: 0.3s ease;
    box-shadow: 0px 0px 30px;

}

h2 {
    text-shadow: 1px 1px 2px grey;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow: 5px 5px 5px grey;
}

#pic {
    grid-column: span 4;
    place-items:center;
}

#bio {
    grid-column: span 8;
}