leemorgan-dev/views/birthdayParadox/index.css

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    body > *{
        margin: 15px;
    }

.text{
    max-width: 75vw;
    font-size: 20px;
}

.interactive{
    display: flex;
    justify-content: space-around;
}

    .interactive > *{
        margin: 10px;
    }

    .button{
        border: 3px solid black;
        font-weight: bold;
        font-size: 20px;
        box-shadow: 5px 5px 5px gray;
        transition: 0.4s;
        transition: transform 0s;
        padding: 5px;
        cursor: pointer;
    }

        .button:hover{
            background: black;
            border: 3px solid white;
            color: white;
        }

        .button:active{
            transform: translateY(3px);
            box-shadow: 3px 3px 3px black;
        }

    #partiers{
        text-align: center;
        font-size: 20px;
        max-width: 75px;
    }

#datesDiv{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

    .date{
        min-width: 100px;
        border: 2px solid black;
        text-align: center;
        margin: 25px;
        padding: 25px;
    }

    .match{
        background: rgb(0, 91, 188);
        color: rgb(255, 214, 0);
        border: 2px solid rgb(255, 214, 0);
    }