@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap');

:root {
    --font-family: 1em/100% "Montserrat", sans-serif;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    --gray-light: 240, 242, 247;
    --gray-medium: 228, 231, 239;
    --gray-heavy: 185, 190, 209;
    --gray-hard: 161, 166, 187;
    --dark: 34, 35, 40;
    --primary: 26, 92, 255;
    --success: 70, 201, 58;
    --danger: 255, 71, 87;
    --warning: 255, 186, 0;
}

body {
    background: rgba(var(--gray-light), 1);
    min-width: 320px;
    font: var(--font-family);
    font-weight: 400;
    color: rgba(var(--black), 1);
    line-height: 1.3;
    position: relative;
    overflow-x: hidden;
}

#header {
    height: 200px;
    margin: 80px 0 50px 0;
}

#header > img {
    margin: 0 auto;
    display: block;
}

#umicons {
    padding: 50px 0;
}

.umicons__box {
    background: rgba(var(--white), 1);
    padding: 25px;
    margin: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 1.3em;
    font-weight: 400;
    border-radius: 10px;
    box-shadow: 0px 5px 10px 4px rgba(var(--gray-medium), 0.6);

    -webkit-transition: all 0.1s ease-in-out;
       -moz-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
}

.umicons__box:hover {
    background: rgba(var(--gray-light), 1);
    box-shadow: 0px 5px 20px 6px rgba(var(--gray-medium), 1);

    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.umicons__box:active {
    background: rgba(var(--gray-medium), 1);
}

.umicons__box > * {
    display: block;
}

.umicons__box > i {
    font-size: 2em;
}

.umicons__box > code {
    width: 100%;
}