/* Plain text elements */
body, input {
    font-family: 'Poppins';
}

/* Code/monospace elements */
samp, code, tt, pre {
    font-family: 'Roboto Mono';
}

/* Bounding box around inline code */
samp, code, tt {
    border-radius: 0.3rem;
    padding: 0.1rem;
}

/* Code blocks or input fields */
pre, input {
    border-radius: 0.5rem;
    padding: 0.8rem;
    border: 1.5px solid #494d5f;
}

/* Copy code buttons */
pre { position: relative; }
.copy-btn-holder {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;

    padding: 0.8rem;
    box-sizing: border-box;

    pointer-events: none;
}
.copy-btn {
    position: sticky;
    float: right;
    top: 0.8rem;
    z-index: 1;

    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1.5px solid #494d5f;

    font-size: 1.2rem;
    font-family: 'Poppins';
    
    opacity: 0;
    transition-duration: 0.1s;
    pointer-events: all;
}
pre:hover .copy-btn, .copy-btn:focus { opacity: 1; }
.btn, .copy-btn {
    animation-duration: 0.25s;
}
.btn:active, .copy-btn:active {
    animation-name: press;
}

/* Button colors */
@media (prefers-color-scheme: light) {
    .copy-btn { background-color: #eeeeee; color: #1d1f26; }
    .copy-btn:hover { background-color: #b593f5; color: #1d1f26; }
}
@media (prefers-color-scheme: dark) {
    .copy-btn { background-color: #1d1f26; color: #eeeeee; }
    .copy-btn:hover { background-color: #543c85; color: #eeeeee; }
}

/* Background colors */
@media (prefers-color-scheme: light) {
    body { background-color: #eeeeee; color: #1d1f26; }
    samp, code, tt { background-color: #d0d0d0; }
    pre { background-color: #dedede; }
}
@media (prefers-color-scheme: dark) {
    body { background-color: #1d1f26; color: #eeeeee; }
    samp, code, tt { background-color: #393c4a; }
    pre { background-color: #272933; }
}

/* Code already inside a code block */
pre samp, pre code, pre tt {
    padding: 0rem;
    background-color: transparent;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0px;
    border: 2px solid #494d5f;
}

th, td {
    border: 2px solid #494d5f;
    padding: 4px;
}

/* Hyperlink colors */
@media (prefers-color-scheme: light) {
    a { color: #aa8ae6; }
    a:visited { color: #543c85; }
    a:hover { color: #52a3cc; }
    a:active { color: #a0d2eb; }
}
@media (prefers-color-scheme: dark) {
    a { color: #b593f5; }
    a:visited { color: #8458b3; }
    a:hover { color: #a0d2eb; }
    a:active { color: #e6f7ff; }
}

/* Font faces */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/RobotoMono-Italic-VariableFont_wght.ttf');
    font-style: italic;
}

/* Animation */
@keyframes press {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}