@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
    font-family: "Padauk";
    src: url(./font/Padauk.woff2);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    /* enabling transition with bootstrap will break the layout of the site */
    /* transition: all .2s ease-in-out; */
    /* debugging option still works fine */
    /* outline: 1px solid lightblue; */
}

/* General Styles */
#ToS {
    font-family: "Cambria Math", 'Times New Roman', Times, serif !important;
}

#exam-papers>a[class*="focus-ring-dark"]:hover::after {
    content: url(./icon/download.svg);
    position: relative;
    top: 3px;
    left: 5px;
    margin-left: .05rem;
    display: inline-block;
}

/* scroll bar styles */
body::-webkit-scrollbar {
    width: .4em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset -10px -10px 24px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary);
}

body:hover::-webkit-scrollbar-thumb {
    background-color: #000;
}

/* additional styles */
p.iou {
    margin-left: 24px;
}

/* timeline styles, solution: https://codepen.io/NielsVoogt/full/MbMMxv */

.timeline-container {
    max-width: 1024px;
    margin: 0 auto;
}

.timeline-item {
    padding: 3em 2em 2em;
    position: relative;
    color: rgba(0, 0, 0, 0.7);
    border-left: 2px solid rgba(0, 0, 0, 0.3);
}

.timeline-item::before {
    content: attr(date);
    font-weight: bold;

    position: absolute;
    left: 2em;
    top: 1em;

    display: block;
    font-weight: 700;
    font-size: 0.785rem;
}

.timeline-item::after {
    width: 10px;
    height: 10px;
    display: block;

    position: absolute;
    top: 1em;
    left: -6px;

    content: "";
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
}

.timeline-item:last-child {
    -webkit-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
}

article.aBlockOfText {
    width: 624px;
}

@media screen and (max-width: 875px) {
    article.aBlockOfText {
        width: 65%;
    }
}

@media screen and (max-width: 625px) {
    article.aBlockOfText {
        width: 60%;
    }
}

@media screen and (max-width: 426px) {
    article.aBlockOfText {
        width: 90%;
    }
}