/*
    TODO: Clean up code and make it mobile-friendly
*/

body {
    color: white;
    font-family: 'Georgia', sans-serif;
    background-image: url("https://i.pinimg.com/736x/39/96/14/399614bed65b7ef68b4e6b0e8b0966ee.jpg");
    margin: 1vw;
    text-align: center;
}

#music-staff {
    background-image: url("https://stepswitcher.neocities.org/lines/010.gif");
    max-width: 100vw;
    height: 50px; /* Or 100? Depends on how much space she wants in between */
    background-repeat: repeat-x;
}

#socials {
    padding: 10px;
}

#socials a {
    margin: 0 10px;
}

a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

a:hover {
    color: rgb(255, 12, 12);
    text-decoration: underline;
}

footer a {
    color: rgb(255, 0, 0);
    text-decoration: none;
}

footer a:hover {
    color: rgb(255, 12, 158);
    text-decoration: underline;
}

footer {
    background-color: #6b4312;   
}


@media (width < 950px) {
    #center-item section img {
        max-width: 100%;
    }

    #left-item div {
        padding: 10px;
    }
}

@media (width >= 950px) {
    main {
        display: flex;
    }

    #left-item, #right-item {
        width: 20vw;
    }

    #center-item {
        width: 60vw;
    }

    #center-item section img {
        max-width: 50%;
    }

    #left-item div {
        padding: 20px;
    }
}

/* TODO: Is this necessary? */
#center-item section img {
    height: auto;
    /* 
        TODO: Add better color 
        border: 5px solid #A46C00; 
    */
}

main div, 
main nav,
main article,
main section,
footer {
    margin: 10px;
}

.bordered {
    background-color: #CF9448;
    border: 8px groove #A46C00;
    border-radius: 7px;
    background-image: url(https://cdn.creativefabrica.com/2021/12/17/Flower-Pattern-for-Background-Graphics-21862428-2-580x387.png);
}

#left-item div {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #784c12;
    border: 8px groove #865900;
}

#left-item div:first-child {
    margin-top: 0;
}

#left-item div:hover {
    background-color: #683f09;
    border: 8px groove #654300;
}