@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf')  format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Black.ttf')  format('truetype');
    font-weight: 900;
    font-style: normal;
}

html {
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Roboto;
    color: #202124;
}

body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

a {
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 1px dotted #1a73e8;
}

a:hover {
    border-bottom-style: solid;
}

main {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    width: 25%;
    padding: 4%;
    text-align: center;
}

section + section {
    border-left: 1px solid #dddddd;
}

section > p {
    font-size: 2.25em;
    font-weight: 900;
    letter-spacing: -0.0125em;
    margin: 0em 0em 0.325em 0em;
}

address {
    font-weight: 300;
    font-style: normal;
}

address a {
    font-weight: normal;
}

@media only screen and (max-width: 768px) {
    main {
        flex-direction: column;
        padding: 0em 1em;
    }

    section {
        width: auto;
        padding: 10% 0%;
    }
    
    section + section {
        border-left: none;
        border-top: 1px solid #dddddd;
    }
}