:root {
    --colour-primary:   #1593E1;
    --colour-secondary: #6A00FF;
    --colour-cwd:       #FF9600;
    --colour-white:     #FFFFFF;
    --colour-black:     #111111;
    --colour-silver:    #C0C0C0;

    --ff-primary:       "Roboto", sans-serif;
    --ff-accent:        "Playfair Display", serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family:      var(--ff-primary), serif;
    font-weight:      400;
    font-size:        1.3125rem;
    line-height:      1.6;
    padding:          1rem;
    background-color: hsl(0, 0%, 95%);
}

body, h1, h2, h3, p {
    margin: 0;
}

h1, h2, h3 {
    color:       var(--colour-primary);
    font-family: var(--ff-accent), serif;
    font-weight: 900;
    line-height: 1;
}

footer {

    padding-top: 1rem;

    p {
        text-align: center;
        font-size:  .825rem;
    }

    a {
        color:           inherit;
        text-decoration: none;

        &:hover {
            color:           var(--colour-cwd);
            text-decoration: underline;
        }
    }
}

.wrapper {

    background-color: var(--colour-white);
    border:           1px solid var(--colour-silver);
    border-radius:    2px;
    padding:          1rem;

    h1 {
        text-align:    center;
        margin-bottom: 1rem;
    }
}

.kh-logo img {
    display: block;
    margin-inline: auto;
    max-height: 150px;
}

.logos {
    display:         flex;
    flex-direction:  column;
    justify-content: space-evenly;
    align-items:     center;
    gap:             1rem;
}

.logo {

    text-align: center;

    img {
        display: block;
        margin-inline: auto;
        max-width: 250px;
        cursor:                             pointer;
        -webkit-transition-property:        all;
        -webkit-transition-duration:        0.3s;
        -webkit-transition-timing-function: ease;

        &:hover {
            transform: scale(1.1);
        }

    }

    h4 {
        margin-block-end: 0;
        border-top: 1px solid silver;
    }

}


/* Greater than or equal to 860px */
@media (width >= 460px) {

    .logos {
        flex-direction: row;
        flex-wrap:      wrap;
    }

}