@font-face {
    font-family: "Petit Formal Script";
    src: url('fonts/Petit_Formal_Script/PetitFormalScript-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: Helvetica, sans-serif;
    max-width: 70ch;
    min-width: 20ch;
    margin: 0 auto;
    padding: 0em 1rem 4rem 1rem;
    color: blue;

    /* prevent highlight */
    /* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
    -webkit-touch-callout: none;    /* iOS Safari */
    -webkit-user-select: none;      /* Safari */
    -khtml-user-select: none;       /* Konqueror HTML */
    -moz-user-select: none;         /* Old versions of Firefox */
    -ms-user-select: none;          /* Internet Explorer/Edge */
    user-select: none;              /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

/* #region details */

details summary {
    list-style: none;
    font-size: x-large;
    font-weight: bold;
    font-style: italic;
    transition: transform 0.2s;
}

details summary:first-of-type:hover {
    transform: scaleY(1.3) translateY(-0.05rem);
    z-index: inherit;
    cursor: pointer;
}

/* #endregion */

/* #region article */

article {
    padding-top: 1.5rem;
}

article > * + *:not(iframe) {
    margin-top: 1.25rem;
}

article p:first-of-type::first-letter {
    float: left;
    font-family: "Petit Formal Script", cursive;
    font-weight: 400;
    font-size: 3.5em;
    line-height: 0.9;
    margin: 0.05em 0.15em 0 0;
    text-transform: uppercase;
}

/* #endregion */

/* #region callout */

.callout-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #efefff;
    font-family: sans-serif;
}

.callout-content {
    flex: 1;
    position: relative;
}

.callout-content::before {
    content: "DETAILS";
    font-weight: bold;
    display: block;
    margin-bottom: 1rem;
}

.callout-content > *:last-child {
    margin-bottom: 0;
}

.abstract-container::before {
    content: "ABSTRACT";
    font-weight: bold;
    display: block;
    margin-bottom: 1rem;
}

.course-container::before {
    content: "COURSE";
    font-weight: bold;
    display: block;
    margin-bottom: 1rem;
}

/* #endregion */

/* #region iframe */

iframe, img {
    width: 100%;
    filter: grayscale(100%);
    transition: .5s;
    border: none;
	-webkit-user-drag: none;
}

iframe:hover, img:hover {
    filter: grayscale(0%);
}

/* #endregion */

/* #region other */

h1:first-of-type {
    text-transform: uppercase;
    padding-top: 2rem;
}

pre {
    width: 100%;
    overflow-x: auto;
}

li {
    margin-top: 0.5rem;
}

li::marker {
    font-family: monospace;
    font-weight: bold;
}

p.play {
    margin-bottom: 0;
    color: blue;
    transition: transform 0.2s;
}

a {
    transition: 0.5s;
}

a:visited {
    color: #7b7bff;
}

a:hover {
    color: #ff7b9e;
}

a:active {
    color: white;
}

p.play:hover {
    transform: scaleY(1.2) translateY(-0.1rem);
}

button {
    display: flow-root;
    font-family: monospace;
    border: none;
    background-color: blue;
    padding: .5rem 1rem;
    margin-top: 1rem;
    color: white;
    cursor: pointer;
    transition: .5s;
}

button:hover {
    background-color: #7b7bff;
    height: 110%;
}

figcaption, code {
    margin: .25rem 0 1rem 0 !important;
}

code {
    display: inline-block;
}

.aside::before {
    content: "ASIDE: ";
}
.aside, figcaption {
    color: #7b7bff;
    font-weight: lighter;
}

#introduction {
    font-weight: bold;
    font-family: monospace;
}

/* #endregion */

/* #region passwords */

input[type="password"] {
    outline: none;
    border: none;
    cursor: default;
    margin-top: 1rem;
    color: blue;
    width: 100%;
}

/* #endregion */

/* #region modal */

.modal {
    width: 100%;
    height: 100%;
    background-color: #f8ff7b2b;
    position: fixed;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    transition: background-color 1s;
    display: none;
    z-index: 100;
}
.modal-content {
    width: 30%;
    min-width: 30ch;
    padding: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: white;
}
#modal-input {
    margin: 1rem;
    padding: 0;
    cursor: text;
}

.close-button {
    margin: 1rem;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    color: blue;
}

blockquote {
    margin: 0 0 .5rem .5rem;
    padding-left: 1.5rem;
    font-family: monospace;
    border-left: solid 2px;
}

.citation {
    margin: 0 0 1rem 2rem;
    display: block;
    font-style: normal;
    font-family: monospace;
    border-left: solid 2px #00000000;
}

/* #endregion */

/* #region kaomoji */

.kaomoji {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: fade 2s ease-out;
    padding: .15em .25em;
    font-family: monospace;
    font-weight: bold;
    background-color: white;
}

@keyframes fade {
    to {
        opacity: 0;
    }
}

/* #endregion */