/* This is a css file for misc elements on the projects page, like buttons and labels.
Divs, headers, footers background, etc, are to be done in the styles.css file. */
#projectsContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Archivo Black", sans-serif;
    gap: 20px;
    padding: 0 20px;
    background-color: none;
}
#PD1{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: none;
}
#subdiv1{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 500px;
    height: 500px;
    background-color: skyblue;
    align-items: center;
    justify-content: center;
    border: solid 5px blue;
}
#coinButton{
    width: 200px;
    height: 50px;
    background-color: gold;
    color: black;
    font-size: 20px;
    border: solid 2px black;
    border-radius: 10px;
    cursor: pointer;
}
#coinLabel{
    font-size: 20px;
    color: black;
    margin-top: 10px;
    border: solid 2px gold;
    background-color: yellow;
    padding: 5px;
    border-radius: 10px;
}
#subdiv2{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 500px;
    height: 500px;
    background-color: lightcoral;
    align-items: center;
    justify-content: center;
    border: solid 5px red;
}
#rngbutton{
    width: 200px;
    height: 50px;
    background-color: lightblue;
    color: black;
    font-size: 20px;
    border: solid 2px black;
    border-radius: 10px;
    cursor: pointer;
}
#rngLabel{
    font-size: 20px;
    color: white;
    margin-top: 10px;
    border: solid 2px lightblue;
    padding: 5px;
    border-radius: 10px;
}
#subdiv3{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 500px;
    height: 500px;
    background-color: limegreen;
    align-items: center;
    justify-content: center;
    border: solid 5px green;
}
#nameButton{
    width: 200px;
    height: 50px;
    background-color: lightgreen;
    color: black;
    font-size: 20px;
    border: solid 2px black;
    border-radius: 10px;
    cursor: pointer;
}
#nameLabel{
    font-size: 20px;
    color: yellow;
    margin-top: 10px;
    border: solid 2px lightgreen;
    padding: 5px;
    border-radius: 10px;
}
#subdiv4{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 500px;
    height: 500px;
    background-color: violet;
    align-items: center;
    justify-content: center;
    border: solid 5px purple;
}
.buttons{
    width: 100px;
    height: 50px;
    background-color: lightpink;
    color: black;
    font-size: 20px;
    border: solid 2px black;
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
}
/* ==========================================================================
   Media Queries for Responsiveness
   ========================================================================== */

/* Tablets & iPads (Screens smaller than 768px) */
@media screen and (max-width: 768px) {
    #subdiv1, #subdiv2, #subdiv3, #subdiv4 {
        width: 80%;
        height: 400px;
    }
}

/* Mobile Devices (Screens smaller than 480px) */
@media screen and (max-width: 480px) {
    #projectsContainer {
        padding: 0 10px;
        gap: 15px;
    }

    #subdiv1, #subdiv2, #subdiv3, #subdiv4 {
        width: 100%;
        height: 350px;
        border-width: 3px;
    }

    /* Stacks Program 4's buttons vertically so they don't crowd mobile screens */
    #btnContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .buttons {
        margin: 5px;
        width: 130px;
    }
}