body {
    background-color: #ffe1fc;
}

h1 {
    color: #181897;
    text-align: center;
    border-radius: 30px;
    background-color: #c2a8fe;
    padding: 5px;
    font-size: 60px;
}

h2 {
    color: #181897;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
    background-color: #c2a8fe;
    padding: 2px;
    font-size: 30px;
    padding: 0.2rem 1rem;
}

nav {
            display: flex;
            gap: 10px;
            margin-right: 5px;
            padding: 5px;
            font-size: 40px;
        }
nav a {
            color: #9c1b1b;
            text-decoration: none;
            font-weight: bold;
            border-radius: 30px;
            background-color: #ff91ae;
            padding: 3px;
            display: block;
            padding: 0.2rem 1rem;
        }
nav a:hover {
            color: #ff91ae;
            background-color: #9c1b1b;
            top: 3px;
            position: relative;
            rotate: 3deg;
        }

#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    place-items: center;
}
#gallery figcaption {
    padding: 5px;
    text-align: center;
    background-color: #ff91ae;
    color: #9c1b1b;
    font-size:25px;
}

#gallery img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/16;
}

img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}

dialog {
    position: fixed;
    top: 5vh;
    max-width: 100vw;
    max-height: 90vh;
    margin: 0 auto;
}

dialog::backdrop {
    background: #242424;
}

dialog img {
    width: 100%;
}