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

/* Document properties */
html {
   font-size: 20px;
   /* --black: rgb(50, 50, 50); */
   --black: rgb(40, 40, 40);
   --white: rgb(240, 240, 240);
}
body {
   color: var(--black);
   font-family: 'Atkinson Hyperlegible';
   font-size: 1rem;
   width: 70vw;
   margin-top: 20px;
   margin-left: 5vw;
}
header {
   margin-bottom: 40px;
}
header p {
   margin-top: 40px;
   margin-bottom: 0;
}

/* Text components */
h1 { 
   font-size: 2rem;
   line-height: 2.25rem;
}
aside {
   font-size: 0.85rem;
   padding: 1px 4px;
   border: 2px solid var(--black);
   position: fixed;
   top: 2vw;
   right: 2vw;
}
aside a { text-decoration: none; }
h2 { font-size: 1.5rem; margin-top: 40px;}
p { 
   letter-spacing: .0025rem;
   line-height: 1.5rem; 
   margin-bottom: 15px;
}
h3 { font-size: 1.2rem; margin-top: 10px;}
h4 { font-size: 1.05rem; margin-top: 5px;}                 

/* Lists */
body { counter-reset: list; counter-reset: priorities; }
ol, ul {  
   margin: 25px 0 25px 100px;
}
ol {
   counter-increment: list 1;
   counter-reset: letter;
}
li {
   list-style-type: none;
   list-style-position: inside;
   position: relative;
}
li:not(:first-child) {
   margin-top: 20px;
}
.roman li { margin-top: 10px; }
ol li { counter-increment: letter 1; }
ol.roman li { counter-increment: priorities 1; }
ol li::before { 
   content: "("counter(list)counter(letter, lower-alpha)") ";
   position: absolute;
   margin-left: -3rem;
   min-width: 50px;
   text-align: right;
}
ol.roman li::before { content: "("counter(priorities, lower-roman)") "; }
ul li::before { 
   content: "• "; 
   position: absolute;
   margin-left: -1rem;
}
ol h4 { margin-bottom: -15px; }

/* Images */
.images {
   width: 90vw;
   margin: 15px 0 25px 2.5vw;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
figure {
   width: 45%;
   height: fit-content;
   margin-top: -5px;
   margin-bottom: -5px;
}
figure ul {
   width: 90%;
   margin-left: 50px;
}
figcaption { text-align: right; padding-right: 15px;}
img {
   width: 100%;
   border: 2px solid var(--black);
   overflow: hidden;
}url(http://127.0.0.1:3001/images/test.png)
.example { border: none; }
#postgraduate-fellowships { width: 25%; }
/* Scrollable images */
.scroll figure {
   border: 2px solid var(--black);
   margin: 0;
   width: 70%;
   max-height: 36vw;
   overflow-y: scroll;
   position: relative;
}
.scroll figure.mobile { width: 20%; max-height: 29.5vw; }
.scroll figcaption { 
   position: absolute; 
   right: 5px; top: 5px; 
   padding: 3px 5px;
   background-color: var(--white);}
.scroll img { border: none; vertical-align: bottom; }

/* Numbered references */
span {
   color: var(--black);
   text-decoration: underline dotted var(--black);
   cursor: context-menu;
}
/* Tooltips on numbered references */
[title] { position: relative; }
[title]:after {
   content: attr(title);
   color: white;
   background-color: none;
   font-size: 0.75rem;
   padding: 5px;
   position: absolute;
   left: 25%;
   bottom: 100%;
   width: 200px;
   opacity: 0;
   scale: 0.2;
   transform-origin: bottom left;
}
[title]:hover:after, [title]:focus:after { 
   opacity: 1; 
   scale: 1;
   color: var(--white);
   background-color: black;
}

/* Smaller screens */
@media screen and (max-width: 1000px) {
   html { font-size: 24px; }
   body { width: 80vw;}

   aside {
      padding: 1px 4px;
      border: 2px solid var(--black);
      width: fit-content;
      position: static;
      margin-bottom: 10px;
   }

   p { margin-bottom: 25px; }

   figure { width: 90%; }
   .images { gap: 40px; }
   #postgraduate-fellowships { width: 40%; }

   ol li::before { min-width: 60px; }

   .scroll figure { width: 90%; max-height: 45vw; }
   .scroll figure.mobile { width: 40%; max-height: 59vw; }
}

/* Font */
@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: 
      url('./fonts/AtkinsonHyperlegible-Regular.ttf') format('embedded-opentype'),
      url('./fonts/AtkinsonHyperlegible-Regular.ttf') format('woff2'),
      url('./fonts/AtkinsonHyperlegible-Regular.ttf') format('woff'),
      url('./fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'),
      url('./fonts/AtkinsonHyperlegible-Regular.ttf') format('svg');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: 
      url('./fonts/AtkinsonHyperlegible-Bold.ttf') format('embedded-opentype'),
      url('./fonts/AtkinsonHyperlegible-Bold.ttf') format('woff2'),
      url('./fonts/AtkinsonHyperlegible-Bold.ttf') format('woff'),
      url('./fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'),
      url('./fonts/AtkinsonHyperlegible-Bold.ttf') format('svg');
   font-weight: bold;
   font-style: normal;
}
@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: 
      url('./fonts/AtkinsonHyperlegible-Italic.ttf') format('embedded-opentype'),
      url('./fonts/AtkinsonHyperlegible-Italic.ttf') format('woff2'),
      url('./fonts/AtkinsonHyperlegible-Italic.ttf') format('woff'),
      url('./fonts/AtkinsonHyperlegible-Italic.ttf') format('truetype'),
      url('./fonts/AtkinsonHyperlegible-Italic.ttf') format('svg');
   font-weight: normal;
   font-style: italic;
}
@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: 
      url('./fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('embedded-opentype'),
      url('./fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('woff2'),
      url('./fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('woff'),
      url('./fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype'),
      url('./fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('svg');
   font-weight: bold;
   font-style: italic;
}

.hidden { display: none; }
pre { text-wrap: wrap; }