.display-mockup
{

    display: flex;
    justify-content: center;

}

.mockup-row
{

    align-items: center;
    align-content: center;
    margin-top: 5vh;
    margin-bottom: 5vh;

}

.text-mockup p
{

    align-items: center;
    align-content: center;

}

.display-mockup img
{

    max-width: 40vh;
    max-height: 40vh;

}

.software-plugins
{
    padding: 15px 0px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 20px;
}

.plugin-button
{
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s;
    font-family: Exo;
    color: black;
}

.plugin-button:hover
{
    background-color: rgba(255,255,255,0.85);

}

.attendances
{
    display: flex;
    flex-direction: column;
}

.attendance
{
    display: flex;
}

.attendance img
{
    max-width: 150px;
    max-height: 100px;
    border-radius: 10px;
    object-fit: fill;
}

.attendance-text
{
    padding: 10px;
}

.attendance-name
{
    color: black;
    font-family: Exo;
    font-size: 18px;
}

.pills
{
    overflow-x: scroll;
    scrollbar-width: none;
    padding: 10px 0px;
}

.class-pill
{
    background: white;
    border: none;
    border-radius: 10px;
    color: black;
    font-family: Exo;
    padding: 5px 10px;
    transition: 0.3s;
    margin-bottom: 5px;
}

.class-pill:hover
{
    background-color: rgba(255,255,255,0.85);
}

.image-container img
{
    width: 100%;
}

.image-container
{
    object-fit: contain;
    margin-bottom: 10px;
}

.row-sepparator
{
    margin-top: 5vh;
}

.screenshot img
{

    border-radius: 20px;

}