/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        radial-gradient(circle at center, #250000 0%, #090000 55%, #000 100%);

    color: #fff;

    font-family: "VT323", monospace;

    font-size: 20px;

    min-height: 100vh;

    cursor: crosshair;

}


a {
    color: #ff1b1b;

    text-decoration: none;
}


a:hover {
    color: white;

    text-shadow:
        0 0 5px red,
        0 0 10px red;
}


.site-wrapper {

    width: 90%;

    max-width: 900px;

    margin: auto;

    padding: 25px 0 50px;

}


/* HEADER */

.header {

    text-align: center;

    border-bottom: 2px dotted #ff1b1b;

    padding-bottom: 25px;

}


.header h1,
.page-header h1 {

    font-family: "Press Start 2P", monospace;

    color: #ff1b1b;

    text-shadow:
        3px 3px 0 #fff,
        5px 5px 0 #550000;

}


.tiny-text {

    letter-spacing: 12px;

    color: #ff1b1b;

}


.marquee {

    margin: 20px auto;

    width: 90%;

    overflow: hidden;

    white-space: nowrap;

    border: 1px solid #ff1b1b;

    background: #080000;

    padding: 6px;

}


.marquee span {

    display: inline-block;

    animation: scrollText 12s linear infinite;

}


@keyframes scrollText {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }

}


.visitor-counter {

    font-size: 17px;

    margin-top: 15px;

}


#visitorCount {

    color: #ff1b1b;

    font-weight: bold;

}


/* WINDOWS */

.welcome-box,
.updates,
.email-window {

    border: 2px solid white;

    box-shadow:
        6px 6px 0 #7d0000;

    margin: 35px auto;

    background: #050505;

}


.window-title {

    background: #ff1b1b;

    color: white;

    padding: 5px 10px;

    display: flex;

    justify-content: space-between;

    font-family: "VT323", monospace;

}


.window-content {

    text-align: center;

    padding: 35px;

}


.big-message {

    font-family: "Press Start 2P", monospace;

    color: #ff1b1b;

    font-size: 20px;

}


.pixel-button {

    display: inline-block;

    background: #ff1b1b;

    color: white;

    border: 3px solid white;

    box-shadow: 4px 4px 0 #650000;

    padding: 10px 18px;

    font-family: "Press Start 2P", monospace;

    font-size: 11px;

    cursor: pointer;

    margin: 15px 0;

}


.pixel-button:hover {

    background: white;

    color: #ff1b1b;

    box-shadow: 4px 4px 0 #ff1b1b;

}


/* NAVIGATION */

.navigation {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin: 30px 0;

}


.nav-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 25px 10px;

    border: 2px solid white;

    background: #0b0000;

    color: white;

    transition: .2s;

}


.nav-card:hover {

    transform: translate(-3px, -3px);

    background: #ff1b1b;

    color: white;

    box-shadow: 6px 6px 0 white;

}


.nav-icon {

    font-size: 35px;

    margin-bottom: 10px;

}


.nav-card b {

    font-family: "Press Start 2P", monospace;

    font-size: 12px;

}


.nav-card small {

    margin-top: 8px;

}


/* QUOTE */

.quote-box {

    text-align: center;

    padding: 25px;

    margin: 35px 0;

    border-top: 1px dotted red;

    border-bottom: 1px dotted red;

}


.quote-box p {

    display: inline;

    margin: 0 15px;

    color: #ff5555;

}


.quote-star {

    color: #ff1b1b;

}


/* UPDATES */

.update-content {

    padding: 15px 20px;

}


.update-content p {

    margin: 7px 0;

}


/* PAGE HEADER */

.page-header {

    text-align: center;

    margin-bottom: 35px;

}


.back {

    display: block;

    text-align: left;

    margin-bottom: 30px;

}


.page-header h1 {

    font-size: 24px;

}


/* PHOTOS */

.photo-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.photo-card {

    background: white;

    color: black;

    padding: 10px;

    box-shadow: 6px 6px 0 #ff1b1b;

    transform: rotate(-1deg);

}


.photo-card:nth-child(even) {

    transform: rotate(1deg);

}


.photo-card img {

    width: 100%;

    display: block;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}


.photo-caption {

    padding: 10px 5px 5px;

    font-size: 18px;

}


.photo-caption b {

    color: #a00000;

}


.memory-footer {

    text-align: center;

    margin: 50px 0;

}


/* LETTER */

.email-info {

    border-bottom: 1px solid #444;

    padding: 15px;

    background: #111;

}


.email-info p {

    margin: 4px 0;

}


.letter {

    padding: 30px;

    line-height: 1.5;

    min-height: 500px;

}


.letter p {

    margin-bottom: 25px;

}


/* MUSIC */

.music-player {

    display: flex;

    gap: 20px;

    align-items: center;

    padding: 20px;

    border: 2px solid white;

    background: #080000;

    margin-bottom: 20px;

}


.album-art {

    width: 100px;

    height: 100px;

    background: #ff1b1b;

    border: 3px solid white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

}


.now-playing small {

    color: #ff1b1b;

}


.now-playing h2 {

    margin: 5px 0;

}


.song-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.song {

    width: 100%;

    background: #0a0a0a;

    color: white;

    border: 1px solid #555;

    padding: 14px;

    text-align: left;

    cursor: pointer;

    font-family: "VT323", monospace;

    font-size: 20px;

    display: grid;

    grid-template-columns: 40px 1fr 120px;

}


.song:hover {

    background: #ff1b1b;

    border-color: white;

}


.song-reason {

    margin-top: 20px;

    border: 1px dotted #ff1b1b;

    padding: 20px;

    text-align: center;

}


/* REASONS */

.reason-box {

    text-align: center;

    border: 2px solid white;

    background: #080000;

    padding: 50px 20px;

    box-shadow: 8px 8px 0 #720000;

}


.reason-number {

    color: #ff1b1b;

    font-family: "Press Start 2P", monospace;

    font-size: 12px;

}


.reason-text {

    font-size: 30px;

    margin: 35px auto;

    max-width: 650px;

    min-height: 100px;

}


.big-heart-button {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #ff1b1b;

    color: white;

    border: 4px solid white;

    font-size: 45px;

    cursor: pointer;

    box-shadow: 6px 6px 0 #650000;

}


.big-heart-button:hover {

    transform: scale(1.1);

}


.click-text {

    color: #aaa;

}


.tiny-note {

    text-align: center;

    margin: 30px;

    color: #ff5555;

}


/* SECRET */

.secret-page {

    background: #000;

    display: flex;

    justify-content: center;

    align-items: center;

}


.secret-container {

    text-align: center;

    max-width: 600px;

    padding: 30px;

}


.secret-symbol {

    color: #ff1b1b;

    font-size: 70px;

    animation: pulse 1.5s infinite;

}


.secret-container h1 {

    font-family: "Press Start 2P", monospace;

    color: white;

}


.secret-message {

    border: 1px dotted #ff1b1b;

    margin: 30px 0;

    padding: 25px;

    line-height: 1.5;

}


@keyframes pulse {

    50% {

        transform: scale(1.2);

        opacity: .5;

    }

}


/* FOOTER */

footer {

    text-align: center;

    border-top: 1px dotted #555;

    padding-top: 25px;

    margin-top: 60px;

}


.footer-small {

    font-size: 15px;

    color: #777;

}


.secret-hint {

    text-align: center;

    margin-top: 40px;

    font-size: 12px;

}


.secret-hint a {

    color: #200000;

}


.secret-hint a:hover {

    color: red;

}


/* MOBILE */

@media (max-width: 600px) {

    .navigation {

        grid-template-columns: 1fr;

    }


    .photo-grid {

        grid-template-columns: 1fr;

    }


    .header h1 {

        font-size: 18px;

    }


    .music-player {

        flex-direction: column;

        text-align: center;

    }


    .song {

        grid-template-columns: 30px 1fr;

    }


    .song small {

        display: none;

    }


    .reason-text {

        font-size: 24px;

    }

}


/* HEART EFFECT */

.floating-heart {

    position: fixed;

    pointer-events: none;

    color: red;

    font-size: 20px;

    animation: floatHeart 2s ease-out forwards;

}


@keyframes floatHeart {

    from {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

    to {

        opacity: 0;

        transform: translateY(-150px) scale(1.5);

    }

}