body {
    background-color: #faf8f1;

    background-image:
        radial-gradient(circle, #b7b7b7 1.3px, transparent 1px);

    background-size: 28px 28px;

    margin: 0;
    min-height: 100vh;
}
.canvas {
    width: 1400px;
    height: 950px;
    margin: 0 auto;
    position: relative;
}
.top-logo {
    position: absolute;
    top: 35px;
    left: 46%;
    transform: translateX(-50%);
}

.logo {
    display: block;
    width: 500px;
    margin: 0 auto;
}

.website {
    display: block;
    width: 400px;
    margin: -15px auto 0;
}

/* ---------- Side Menu ---------- */
.side-menu {
    position: absolute;
    top: 150px;
    left: -50px;

    width: 280px;
    height: 430px;

    background: #d7d5cf;
    border-radius: 22px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 20px;
    overflow: visible;
}

.menu-title {
    position: absolute;
    width: 250px;

    top: -50px;
    left: 10px;
}

.side-menu a {
    color: black;
    font-family: Georgia, serif;
    font-size: 26px;
    margin: 14px 0;
    text-decoration: underline;
}

.side-menu a:first-of-type {
    margin-top: 45px;
}

.side-menu a:hover {
    transform: rotate(-2deg) scale(1.05);
    transition: 0.2s ease;
    color: #b35a5a;
}

/* ---------- TV ---------- */

.tv-area {
    position: absolute;
    top: 230px;
    left: 310px;
    width: 600px;
}

.tv-image {
    width: 500px;
    display: block;
}

.remote-button {
    position: absolute;
    top: 300px;
    left: 300px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.remote-img {
    width: 100px;
}

.remote-button {
    position: absolute;
    top: 350px;
    left: 400px;

    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.remote-img {
    width: 150px;
}

.remote-button:hover {
    transform: rotate(-4deg) scale(1.08);
}

/* ---------- Music Player ---------- */

.music-player {
    position: absolute;
    top: 20px;
    left: -150px;

    width: 310px;

    display: block;
    background: #f6c56b;
    border: 3px solid #4d4d4d;

    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.music-top {
    height: 42px;
    background: #f6c56b;
    border-bottom: 3px solid #4d4d4d;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hello-top {
    width: 110px;
}

.music-photo {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

.music-bottom {
    height: 46px;
    background: #f6c56b;
    border-top: 3px solid #4d4d4d;

    display: flex;
    justify-content: center;
    align-items: center;
}

.play-buttons {
    width: 145px;
}

.music-player:hover {
    transform: rotate(-2deg) scale(1.03);
    transition: 0.25s;
}

.stream-title {
    position: absolute;

    top: -45px;
    left: 50%;

    transform: translateX(-50%);

    margin: 0;

    font-family: Georgia, serif; /* or another font you like */
    font-size: 30px;
    font-weight: bold;

    white-space: nowrap;
}
.stream-wrapper {
    position: absolute;
    top: 700px;
    left: 100px;
}

.stream-title {
    text-align: center;
    font-size: 28px;
    margin: 0 0 10px 0;
    font-family: Georgia, serif;
}

.music-player {
    display: block;
}

/* ---------- Handwritten Blurb ---------- */

.blurb {
    position: absolute;

    top: 350px;
    left: 870px;

    width: 600px;
}

.cool-title {
    position: absolute;

    top: 270px;      /* 100px above the blurb */
    left: 930px;

    width: 420px;
}

/* ---------- Cursor ---------- */

.cursor {
    position: absolute;

    left: 1400px;   /* move left/right */
    top: 585px;     /* move up/down */

    width: 3px;
    height: 25px;

    background: black;

    animation: blink 1s infinite;
}


/* ---------- Fruits ---------- */

.fruit-row {
    position: absolute;

    top: 610px;
    left: 920px;

    width: 470px;
}

@keyframes blink {

    0%,50% {
        opacity:1;
    }

    51%,100% {
        opacity:0;
    }

}
/* ---------- About Page Title ---------- */

.page-header {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.about-title {
  width: 450px;
  height: auto;
}