body {
    font-family: -apple-system, BlinkMacSystemFont, 'Ubuntu', 'Segoe UI', 'Roboto', 'Oxygen',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    background-image: linear-gradient(#070824ff, #23002cff);
    display: flex;
    flex-direction: column;
    align-items: center;
}

header > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

header > div > div {
    background-color: #fff4ecff;
    color: #0f1c2cff;
    margin: 16px;
    border-radius: 16px;
    padding-bottom: 16px;
    padding-right: 32px;
    padding-left: 128px;
    transform: translate(-128px, 0);
}

@media only screen and (max-width: 800px) {
    header > div {
        display: flex;
        flex-direction: column;
    }
    
    header > div > div {
        padding-left: 32px;
        padding-top: 128px;
        transform: translate(0, -160px);
    }
    
    header{
        margin-bottom: -128;
    }

  }

header > div > img {
    z-index: 9  ;
}

.bio {
    display: flex;
    flex-direction: column;
    background-color: black;
    border-style: solid;
    border-width: 1px;
    border-color: #6c0b9fff;
    padding: 64px;
    border-radius: 32px;
    margin: 32px;
    max-width: 1024px;
}

.bio > h2{
    margin: 32px;
    align-self: center;
}

.bio > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.bio > div > div{
    max-width: 512px;
    min-width: 256px;
    margin-left: 32px;
    margin-right: 32px;
}

table {
    border-collapse: collapse;
}

th{
    padding-left: 16px;
    padding-right: 16px;
}

tr {
    border-bottom: 1px solid #6c0b9fff;
    background-color: #161033ff ;
}

tr:nth-child(even) {
    background-color: black ;
}


.gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery > div {
    height: 256px;
    width: 256px;
    background-size: contain;
    margin: 16px;
}

.gallery > div > *{
    transition: .3s all;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    opacity: 0;
    padding: 8px;
}

.gallery > div > *:hover{
    backdrop-filter: blur(4px);
    opacity: 1;
    background-image: linear-gradient(#23002c33, #070824ee);
    border-bottom: 1px solid white;
    padding-left: 16px;
    margin-right: -16px;
}

a {
    text-decoration-line: none;
    color: #d04adcff;
    font-weight: 600;
}

a:visited{
    color: #6761eeff;
}