/* =========================
   GLOBAL (all pages)
========================= */

body {
    margin: 0;
    font-family: monospace;
}

/* =========================
   HOME PAGE
========================= */

body.index {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url('https://i.ytimg.com/vi/TKMolvfUWaA/maxresdefault.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* Home page layout elements */
.container {
    text-align: center;
    z-index: 2;
}

.title {
    color: #00ffff;
    font-size: 4rem;
    margin-bottom: 50px;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.button {
    text-decoration: none;
    color: #ff4fd8;
    border: 2px solid #ff4fd8;
    padding: 15px 40px;
    font-size: 1.2rem;
    transition: 0.25s;
    box-shadow: 0 0 10px #ff4fd8;
}

.button:hover {
    background-color: #ff4fd8;
    color: black;
    box-shadow:
        0 0 20px #ff4fd8,
        0 0 40px #ff4fd8;
}

/* =========================
   ABOUT PAGE
========================= */


body.about {
    height: 100vh;

    background-image: url('https://preview.redd.it/remember-watching-the-pipes-screensaver-v0-ws935ycrrs611.jpg?width=1080&crop=smart&auto=webp&s=a29073c649912b5f0115005bb5aab4b87c73cd87');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
}

/* optional: layout for about page text */
body.about h1,
body.about h2,
body.about h3,
body.about p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}