/*MAIN*/
html, body {
    height: 100%;
    margin: 0;
}

section {
    padding: 2rem;
    font : normal normal clamp(3px, 1.4vw, 70px) Ubuntu;
}

em {
    font-style: normal;
}

a {
    color: #060057;
}

#greyBackground {
    background-color: #f3f3f3;
}

/*QUOTE*/
#quote_container {
    background: #f3f3f3;
    border-radius: 15px;
    margin: 1% 1% 0 1%;
    display: flex;
    flex-direction: row;
}

    #round {
        border-radius: 50%;
        width: clamp(60px, 6vw, 240px);
        height: clamp(60px, 6vw, 240px);
        margin: 1%;
    }

    #quote {
        font : normal normal clamp(3px, 1.2vw, 70px) Ubuntu;
        margin: 1%;
        display: flex;
        flex-direction: column;
    }

    #quote_author {
        font : normal normal clamp(3px, 1vw, 70px) Ubuntu;
    }

#logos {
    margin: 0;
    width: 100%;
    height: 15vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#logos img {
    width: clamp(40px, 4vw, 220px);
    height: clamp(40px, 4vw, 220px);
    filter: grayscale(100%);
    transition: all 0.3s ease;
}
#logos img:hover {
    filter: grayscale(0%) drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.6));
    width: clamp(60px, 6vw, 240px);
    height: clamp(60px, 6vw, 240px);
}

h2 {
    color: #060057;
    font : normal bold clamp(5px, 2vw, 80px) Ubuntu;
    padding: 3rem 3rem 0 3rem;
}

/*RESPONSIVENESS*/
@media (max-width: 700px), (max-height: 780px) {
    main {
        height: auto;
    }
    #logos {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    #logos img {
        padding-left: calc(50% - calc(clamp(40px, 7vw, 240px)/2));
        width: clamp(40px, 7vw, 240px);
        filter: grayscale(0%);
    }
    section {
        padding: 1% 3% 5% 3%;
        font-size: clamp(10px, 3vw, 70px);
    }
    #round {
        width: clamp(60px, 5vw, 240px);
        height: clamp(60px, 5vw, 240px)
    }
    h2 {
        font : normal bold clamp(5px, 4vw, 80px) Ubuntu;
        padding: 1.5rem 1.5rem 0 1.5rem;
    }
    #quote_container {
        margin-top: 5%;
    }
    #quote {
        font : normal normal clamp(3px, 2.2vw, 70px) Ubuntu;
    }
    #quote_author {
        font : normal normal clamp(3px, 2vw, 70px) Ubuntu;
    }
}