p {
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 27px;
    text-decoration: none;
    color: rgb(139, 139, 255);
    text-shadow: 1px 1px 2px #000000;
    text-indent: 50px;
    margin-left: 50px;
    margin-right: 75px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#PE {
    vertical-align: middle;
    margin-bottom: 16px;
    margin-left: 365px;
    height: auto;
    width: 1000px;
    border-radius: 20px;
}

.title {
    text-align: center;
    color: rgb(139, 139, 255);
    font-family: "Nanum Pen Script", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: 66px;
    animation: titleColor 6s linear infinite;
    text-shadow: 1px 1px 2px #000000;
}

.stitle {
    text-align: right;
    color: rgb(139, 139, 255);
    font-family: "Nanum Brush Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 52px;
    margin-right: 50px;
    text-shadow: 1px 1px 2px #000000;
}

.subtitle {
    text-align: left;
    color: rgb(139, 139, 255);
    font-family: "Nanum Brush Script", cursive;
    font-weight: 200;
    font-style: normal;
    font-size: 56px;
    margin-left: 50px;
    text-shadow: 1px 1px 2px #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

img{
    vertical-align: middle;
    margin-bottom: 16px;
    margin-left: 50px;
    height: auto;
    width: 1000px;
    border-radius: 20px;
}

/* .title:hover {
    color: rgb(255, 105, 180);
    transition: 3s;
} */

body {
    margin: 0;
    background-color: rgb(255, 207, 157);
}

.paragraphs {
    text-align: center;
    font-family: 'Operator Mono', monospace;
    font-size: 36px;
    text-decoration: none;
    color: rgb(139, 139, 255);
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
}

.container {
    /* remove auto margin so flex parent controls layout */
    height: 75px;
    /* precise sizing to fit 4 boxes per row: subtract total gaps (3 gaps of 12px) */
    flex: 0 0 calc((100% - 48px) / 4);
    max-width: calc((100% - 48px) / 4);
    border-radius: 20px;
    background-color: rgb(255, 255, 116);
    /* center children both vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    /* ensure text is readable on dark background */
    color: rgb(139, 139, 255);
    text-align: center;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Reset margins on direct children so they don't collapse and push content out */
.container > * {
    margin: 0;
}

/* Make link fill the container and center its text so the whole box is clickable */
.container > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Parent flex row to align multiple .container boxes in a horizontal row */
.container-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* wrap on smaller screens */
    margin-top: 6px;
}

/* Responsive breakpoints: two per row on medium screens, full-width on small screens */
@media (max-width: 900px) {
    .container {
        flex: 0 0 calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }
}

@media (max-width: 480px) {
    .container {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Ensure large images don't create horizontal scroll and reduce available width */
img {
    max-width: 100%;
    height: auto;
}

/* Keyframes for title text color cycling */
@keyframes titleColor {
    0%   { color: rgb(139, 139, 255); }
    25%  { color: rgb(255, 105, 180); }
    50%  { color: rgb(255, 215, 0); }
    75%  { color: rgb(60, 179, 113); }
    100% { color: rgb(139, 139, 255); }
}

/* Reusable animated background gradient */
.infinite-bg {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1, #fbc2eb);
    background-size: 1000% 1000%;
    animation: bgShift 15s ease infinite;
}

@keyframes bgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Rainbow text using background-clip */
.rainbow-text {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowShift 6s linear infinite;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}