html, body {
    max-width: 100%;
}

body {
    font-family: 'Roboto';
}

a {
    color: black;
}

#landing {
    .h1,
    .h2,
    .h3,
    .h4 {
        font-family: 'Roboto Mono';
    }
}

#portal {
    h1,
    h2,
    h3,
    h4 {
        font-weight: 100;
    }
}

#scroll_container {
    .typeTooltip {
        border: 1px solid lightgray;
        opacity: 1;
    }
}

/*
 * Adds always visible scrollbars on OSX so that user knows the content is scrollable
 * Source: https://davidwalsh.name/osx-overflow
 */
//  TODO(johnrjj) - Disabling this for now. Messes with the page width and is causing horizontal scroll problems on Safari
// ::-webkit-scrollbar {
//     -webkit-appearance: none;
//     width: 4px;
//     height: 2px;
// }
// ::-webkit-scrollbar-thumb {
//     border-radius: 4px;
//     background-color: rgba(0, 0, 0, 0.5);
//     -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
// }

// Hack: For some reason the animation applied to the material-ui textfield causes the overflow
// applied to other elements to fail while the animation is underway. Adding this class to the
// affected component fixes the issue
// Source: http://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition
.transitionFix {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.thin {
    font-weight: 100;
}

code {
    border: 1px solid #e3eefe;
    border-radius: 4px;
    font-family: 'Roboto Mono';
    //background-color: #f2f6ff !important; // lightBlue
}
