html {
    width: 100%;
    height: 100%;
    background-image: url(/Images/HTK_Background.webp);
    background-position-x: center;
    background-size: cover;
}

div.IntroContainer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 16px;
}

    div.IntroContainer > div.IntroRow {
        display: flex;
        justify-content: space-evenly;
    }

        div.IntroContainer > div.IntroRow > div.IntroCell {
            flex: 0 0 25%;
            padding: 16px;
        }

            div.IntroContainer > div.IntroRow > div.IntroCell > a.IntroLogo {
                display: block;
                max-width: 100%;
                padding: 8px;
                background-color: #ffffff00;
                transition: 0.5s;
            }

                div.IntroContainer > div.IntroRow > div.IntroCell > a.IntroLogo > img {
                    max-width: 100%;
                    aspect-ratio: 4/3;
                    object-fit: contain;
                }

                div.IntroContainer > div.IntroRow > div.IntroCell > a.IntroLogo:hover {
                    transform: translate(0, -5px);
                    border: 1px solid #c0c0c0;
                    box-shadow: 0 5px 20px #000000;
                    transition: all ease-in-out 0.5s;
                }

@media ( max-width: 768px) {
    div.IntroContainer > div.IntroRow > div.IntroCell {
        flex: 0 0 50%;
        padding: 16px;
    }
}