html,
body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}

 /* Header */

header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: #00ADB5;
}

header h1 {
    margin: 0;
    padding: 0;
    font-family: 'Dancing Script', sans-serif;
    font-size: 1.5rem;
    color: #222831;
    margin-right: auto;
}

header ul {
    display: flex;
    list-style: none;
    gap: 1rem;
}

header a {
    text-decoration: none;
    color: #FEFBF6;
}

/* Content */

.wrapper {
    display: flex;
    background-color: #EEEEEE;
    justify-content: center;
    padding: 3rem 1rem 3rem 1rem;
}

.container-holder {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 360px;
    gap: 10px;
}

.left-container,
.right-container {
    display: flex;
    flex-direction: column;
    max-width: 180px;
}

.container-holder h1 {
    text-align: center;
    color: #222831;
    font-family: 'Fuzzy Bubbles', sans-serif;
    font-size: 1.8rem;
    width: 360px;
}

.random-peek {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.random-peek img {
    border-radius: 10px;
    width: 158px;
    height: 158px;
    object-fit: cover;
    margin: .5rem 0 0 0;
}

.random-peek a {
    text-decoration: none;
}

.random-peek p {
    max-width: 158px;
    height: 35.2px;
    text-align: center;
    color: #222831;
    font-weight: 700;
    margin: .5rem 0 .5rem 0;
}

/* Footer */

footer {
    display: flex;
    background-color: #222831;
    padding: 1rem;
    justify-content: center;
    font-size: .9rem;
    color: #EEEEEE;
}