/* general */

body {
    background-color: #1d1d1d;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: xx-large;
}

a {
    color: white;
}



/* mobile */

@media screen and (max-width: 500px) {

    img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }

    .labelcontainer {
        position: absolute;
        top: 25%;

        height: 17%;
        width: 80%;

        background-color: rgba(29, 29, 29, .3);

        border-radius: 5px;
    }

    .labelcontainer hr {
        width: 20%;
        padding: 0;
    }

    .firstimagelabel {
        top: 15%;
        left: 10%;
    }

    .secondimagelabel {
        top: 55%;
        left: 10%;
    }


    .labellogo {
        margin: auto;
        height: 90%;
        display: none;
    }

    .labeltext {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3%;
    }

    .toptext {
        text-align: center;
        font-size: large;
        font-weight: bold;
    }

    .bottomtext {
        text-align: center;
        font-size: medium;
    }



    .row {
        background-color: #608b3a;
    }

    .header {
        background-color: #608b3a;
        padding: 0.1%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .first,
    .second {
        --s: 50px;
        height: 40%;
    }

    .first {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--s)));
    }

    .second {
        /* a little smaller than --s to create a gap */
        margin-top: calc(var(--s) * -1 + 10px);
        clip-path: polygon(0 0, 100% var(--s), 100% 100%, 0 100%);
    }


    .separator {
        background-color: #608b3a;
        height: 5px;
    }


    .footer-item {
        padding: 10px;
    }
}



/* desktop */

@media screen and (min-width: 500px) {

    .backgroundimg {
        height: 95vh;
        width: 60%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        visibility: visible;
        opacity: 0.5;
        transition: opacity .5s ease-out;
    }

    .backgroundimg:hover {
        opacity: 1.0;
    }


    .labelcontainer {
        position: absolute;
        top: 15%;
        left: 25%;
        transform: translate(-50%, -50%);

        height: 10%;
        width: 22%;

        background-color: #1d1d1d;
        border-radius: 5px;
        color:white;

        display: flex;
    }

    .labelcontainer hr {
        width: 20%;
        padding: 0;
        border:none;
        border-top:1px white solid;
        height: 1px;
    }

    .firstimagelabel {
        top: 15%;
        left: 25%;
    }

    .secondimagelabel {
        top: 80%;
        left: 75%;
    }

    .labellogo {
        margin: auto;
        height: 90%;
    }

    .labeltext {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .toptext {
        text-align: center;
        font-size: x-large;
        font-weight: bold;
    }

    .bottomtext {
        text-align: center;
        font-size: large;
    }


    .header {
        display: none;
    }

    .row {
        background-color: #608b3a;
        display: flex;
    }

    .column {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 50%;
    }

    .first {
        background-color: lightcoral;
        width: 50%;
        clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
        visibility: hidden;
    }

    .second {
        background-color: lightblue;
        width: 50%;
        clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
        margin-left: -99.5%;
    }

    .secondimage {
        margin-left: 40%;
    }


    .footer {
        display: flex;
        justify-content: space-between;
    }

    .footer-left {
        display: flex;
    }

    .footer-right {
        display: flex;
    }

    .footer-item {
        padding: 10px;
    }
}