@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-900.woff2') format('woff2');
    font-weight: 900;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-800.woff2') format('woff2');
    font-weight: 800;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-700.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-600.woff2') format('woff2');
    font-weight: 600;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-500.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-300.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-200.woff2') format('woff2');
    font-weight: 200;
}
@font-face {
    font-family: 'customfont';
    src: url('fonts/noto-sans-jp-v54-japanese_latin-100.woff2') format('woff2');
    font-weight: 100;
}

:root {
  --r-main-font: customfont;
  --r-heading-font: customfont;

  --col-inline-code-bg: rgb(35, 35, 35);
  --col-subtle: #555;
  --col-tinted: #777;
  --col-highlight: #C00000;
}

.slides {
    .weak {
        font-weight: 100;
        font-size: var(--r-main-font-size);
    }
    .weaker {
        font-weight: 300;
        font-size: max(0.9em,32px);
    }
    .smallest {
        font-size: 32px;
    }
    .bigger{
        font-size: 1.1em;
    }
    .highlight{
        color: var(--col-highlight);
    }
    .subtle{
        color: var(--col-subtle);
    }
    .tinted{
        color: var(--col-tinted);
    }
    .left{
        float: left;
    }
    .columns-2x1{
        display:grid;
        grid-template-columns: 50% 50%;
        place-items: center;
    }
    .columns-3x1{
        display:grid;
        grid-template-columns: auto auto auto;
        place-items: center;
    }
    .code {
        color: #cccccc; 
        font-family: Consolas, 'Courier New', monospace !important; 
        font-weight: normal; 
        font-size: 14px; 
        line-height: 1.25em; 
        text-align: left;
        width: fit-content;
    }
    .inline-code {
        color: #cccccc; 
        font-family: Consolas, 'Courier New', monospace !important; 
        font-weight: normal; 
        padding: 0.2em;
        background-color: var(--col-inline-code-bg);
        border-radius: 0.2em;
    }
    .occasion {
        padding-top: 1em;
        display: grid;
        grid-template-columns: auto 3px auto;
        grid-template-rows: minmax(1.5em, auto);
        gap: 0.5em;
        align-items: center;

        time {
            grid-column: 1;
            text-align: right;
        }
        &::after {
            content: "";
            grid-column: 2;
            grid-row: 1;
            background-color: var(--col-subtle);
            width: 100%;
            height: 100%;
        }
        .event {
            grid-column: 3;
            text-align: left;
        }
    }
    .profile-urls {
        li {
            margin-bottom: 0.5em;
            list-style: none;
            display: grid;
            grid-template-columns: 2em auto;
            grid-template-rows: 1.5em;
            gap: 0.5em;
            font-size: 32px;
            align-items: center;
        }
        li::before {
            content: '';
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            align-self: normal;
        }
        .icon-github::before {
            background-image: url("imgs/profile/github.svg");
        }
        .icon-x::before {
            background-image: url("imgs/profile/x.svg");
        }
        .icon-zenn::before {
            background-image: url("imgs/profile/zenn.svg");
        }
        .icon-connpass::before {
            background-image: url("imgs/profile/connpass.svg");
        }
        .icon-sessionize::before {
            background-image: url("imgs/profile/sessionize.svg");
        }
    }
}