@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto:wght@400;500;700;900&display=swap');

:root {
    --sm: 576px;
    --sm-mul: 0.4;

    --md: 768px;
    --md-mul: 0.5333;

    --l: 992px;
    --l-mul: 0.6888;

    --xl: 1200px;
    --xl-mul: 0.8333;

    --xxl: 1440px;
    --xxl-mul: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    position: relative;
}

#wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;

    background-color: #FAFAFA;
}

.highlight-primary {
    font-weight: bold;
    color: #FF6D00;

}

.highlight-secondary {
    font-weight: bold;
    color: #212121;
}

.view-on-github {
    font-family: "SF Mono", 'Roboto Mono', monospace;
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    letter-spacing: -0.01em;
    text-decoration: none;

    cursor: pointer;
}

.view-on-github span img {
    transition-duration: 200ms;
}

@media (min-width: 576px) {
    .view-on-github:hover {
        text-decoration-line: underline;
    }

    .view-on-github:hover span img {
        transform: translateX(5px);
    }
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}