/*refernces the body of HTML code*/
body {
    /*removes the empty space from the sides of the web page*/
    margin: 0;
    padding: 0;
    /*changes font*/
    font-family: Arial, sans-serif;
    /*turns body into flex container, which lays out item in rows OR columns*/
    /*positions things on the flex direction*/
    justify-content: center;
    /*positions things on the perpendicular of the flex direction*/
    align-items: center;
    /*makes the body take up the full height of the browser window*/
    min-height: 100vh;
    background-color: #6716ff; /* pink */
}

#title-container {
    background-color: #ff990e;
    display: flex; /* Makes the items in the container line up horizontally */
    justify-content: center; /* Centers the items horizontally */
    align-items: center; /* Aligns the items vertically in the middle */
    position: absolute;
    top: 50px;
    left:15%;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Subtle shadow */
    text-align: center; /* Center text inside the container */
    width: 70%; /* Take up 60% of the body's width */
    height: 25%;
    max-width: 1800px; /* But not wider than 600px */
}

h1 {
    display: flex; /* Makes the items in the container line up horizontally */
    justify-content: center; /* Centers the items horizontally */
    align-items: center; /* Aligns the items vertically in the middle */
    font-size: 6vw;
    width: 64%;
    height: 90px;
}

#music-player {
    zoom: 100%;
    background-color: #ff990e;
    flex-direction: column;
    display: flex; /* Makes the items in the container line up vertically */
    justify-content: flex-start; /* Centers the items horizontally */
    align-items: center; /* Aligns the items vertically in the middle */
    position: absolute;
    left: 87%;
    top: 10%;
    width: 12vw; /* Take up 90% of the body's width */
    height: 80%;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 1); /* Subtle shadow */
}

audio {
    zoom: 63%;
}

h2 {
    display: flex; /* Makes the items in the container line up horizontally */
    font-size: 2vw;
    width: 64%;
    height: 90px;
}

#plinko-link {
    background-color: #ff990e;
    display: flex; /* Makes the items in the container line up horizontally */
    justify-content: center; /* Centers the items horizontally */
    align-items: center; /* Aligns the items vertically in the middle */
    position: absolute;
    width: 12vw; /* Take up 90% of the body's width */
    height: 12vw;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 1); /* Subtle shadow */
}

    #plinko-link:hover {
        box-shadow: 8px 8px 8px #ffff00; /* Subtle shadow */
    }

#insta-link {
    background-color: #ff990e;
    display: flex; /* Makes the items in the container line up horizontally */
    justify-content: center; /* Centers the items horizontally */
    align-items: center; /* Aligns the items vertically in the middle */
    position: absolute;
    width: 12vw; /* Take up 90% of the body's width */
    height: 12vw;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 1); /* Subtle shadow */
}

    #insta-link:hover {
        box-shadow: 8px 8px 8px #ffff00; /* Subtle shadow */
    }