* {
    padding: 0;
    margin: 0;
    text-decoration-thickness: from-font;
}
.content * { /*transition: 0.08s;*/ }

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    cursor: default;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--color);
    width: 100%;
    min-height: 100vh;
    cursor: default;
    overflow-x: hidden;
}

body:not(.user-tabbing) *:focus {
    outline: none;
}

::selection { background-color: var(--scrollbar-thumb); }

pre { text-align: left; }

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: "Geologica", sans-serif;
    font-variation-settings: 'wght' 400, 'CRSV' 1, 'SHRP' 50;
}

i {
    font-variation-settings: 'slnt' -12;
    font-style: normal;
}


.content h1, h2, h3, h4, h5, h6, p { color: var(--color); }
.content h1 { font-size: calc(var(--font-sizing) + max(6vw, 6vh)); /*56pt*/ }
.content h2 { font-size: calc(var(--font-sizing) + max(4.8vw, 4.8vh)); /*44pt*/ }
.content h3 { font-size: calc(var(--font-sizing) + max(4vw, 4vh)); /*34pt*/ }
.content h4 {
    font-size: calc(var(--font-sizing) + max(3.8vw, 3.8vh)); /*32pt*/
    text-align: left;
    font-weight:bold;
}
.content h5 {
    font-size: calc(var(--font-sizing) + max(3.2vw, 3.2vh)); /*26pt*/
    text-align: left;
    font-weight:bold;
}
.content h6 {
    font-size: calc(var(--font-sizing) + max(2.4vw, 2.4vh)); /*22pt*/
    text-align: left;
    font-weight:bold;
}
.content p, .content note, ul, table * {
    font-family: "Geologica", serif;
    font-variation-settings: 'wght' 200, 'CRSV' 0, 'SHRP' 0;
    text-align: justify;
    text-align-last: center;
    font-size: calc(var(--font-sizing) + max(1.8vw, 1.8vh)); /*1.8vw*/
}

ul { list-style-position: inside; }
.content ul *, .content li * { transition: 0.08s; text-align: left; text-align-last: left; }
.content .list > li > p { text-align: left; text-align-last: left; font-weight: bold; text-decoration: underline; }
.content ul > li > ul { margin-left: 30px; list-style-type: disc; }
.content ul > li > ul > li { font-size: smaller; }

a, .content a {
    text-decoration: none;
    color: var(--a-hover);
}

.content a { /*text-decoration: underline;*/ }
html[accessible] .content a { text-decoration: underline; }

a:hover, .content a:hover {
    cursor: pointer;
    color: var(--color);
}

/*a[target="_blank"]::after {
  content: url("/html_objects/media/External.svg");
  margin: 0 3px 0 5px;
  color: inherit;
}*/

.spacer {
    height: 50px;
}

sup:before { content: "["; }
sup:after { content: "]"; }
.content sup a {
    text-decoration: none;
    color: var(--a-hover);
}
sup a:hover {
    color: var(--color);
}

hr {
    background-color: var(--color);
    height: 2px;
    border: none;
    border-radius: 1px;
    margin: 1px auto 2px;
}
hr[small] { width: 50%; }
hr[tiny]  { width: 25%; }
hr[thick] { height: 4px;}
hr[left]  { float:left; }
hr[right] { float:right;}

hr.small { width: 50%; }
hr.tiny  { width: 25%; }
hr.thick { height: 4px;}
hr.left  { float:left; }
hr.right { float:right;}

code {
    background-color: rgba(100, 100, 100, 0.8);
    font-size: larger;
    padding: 0 2px;
    border-radius: 3px;
    white-space: nowrap;
}
code note { font-size: initial; }

body[data-theme="light"] code {
    background-color: rgba(100, 100, 100, 0.25); /* Contrast Fixes */
}


note[good] { color: rgb(20, 240, 80); }
note[bad] { color: rgb(240, 20, 20); }
note[warning] { color: rgb(240, 140, 20); }
/* Contrast Fixes*/
body[data-theme="light"] note[good] { color: rgb(50, 180, 20); }
body[data-theme="light"] note[warning] { color: rgb(230, 130, 30); }

.content footnote {
    opacity: 0.8;
    font-size: calc(var(--font-sizing) + max(1.2vw, 1.2vh));
}
.content footnote[small] {
    font-size: calc(var(--font-sizing) + max(0.8vw, 0.8vh));
}


.inline-img {
    display: inline;
    border-radius: 3px;
    height: 16pt;
    transform: translateY(3pt);
}

img:not(.inline-img) {
    border-radius: max(1vw, 1vh);
    box-shadow: 0 0 4px 0 var(--color);
    margin: 8px;
    width: min(60vw, 60vh);
    height: auto;
}


.content {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 10px 5% 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--background-color);
    color: var(--color);
}

.hidden-js { display: none !important; }
.desktophide { display: none !important; }

::-webkit-scrollbar {
    background-color: var(--scrollbar);
    /* width: 2vw; */
}

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

::-webkit-scrollbar-thumb:hover {
    background-color: var(--header);
}

body[data-theme="light"]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color); /* color fixes for certain themes */
}


/*
.panel, .news-panel {
    background-color: var(--header);
    margin: 2vw auto;
    padding: 0;
    width: 98%;
    height: auto;
    border-radius: max(1.2vh, 1.2vw);
    overflow: hidden;
    box-shadow: 0 0 4px 0 var(--theme-hard);
}

.panel:not(.with-img) .panel-content, .news-panel:not(.with-img) .panel-content { width: 100%; }
.panel-content {
    padding: 10px 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-all;
}

.panel.with-img > img, .news-panel.with-img > img {
    width: 40%;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 0 4px 2px var(--a-hover);
}

.news-panel.with-img > img {
    float: left;
    margin-right: 14px;
    width: 30%;
}
.panel.with-img.left > img {
    float: left;
    margin-right: 14px;
}

.panel.with-img.right > img {
    float: right;
    margin-left: 14px;
}

.panel.left80 {
    width: 80%;
    margin-right: calc(20% - 1vh);
}
.panel.right80 {
    width: 80%;
    margin-left: calc(20% - 1vh);
}
.panel.centre90 { width:90%; }
.panel.centre80 { width:80%; }
.news-panel h5 { text-align: center; }
.news-panel hr { width: 50%; }
.news-panel p:first-of-type {
    opacity: 0.6;
    font-size: calc(var(--font-sizing) + max(1.4vw, 1.4vh));
}*/


.infoview {
    width: 60%;
    padding: 0px;
    margin: 0 auto;
    border-radius: max(1vw, 1vh);
    background-color: var(--scrollbar-thumb);
    box-shadow: 0 0 4px 0 var(--theme-hard);
    
}

.infoview .inner {
    overflow: hidden;
    margin: 18px;
    border-radius: max(0.8vw, 0.8vh);
    background-color: var(--header);
    display: inline-grid;
}

.infoview .inner img {
    box-shadow: none;
    border-radius: 0;
}

.infoview .inner p {
    height: 100%;
    margin: 4px 18px 10px;
}



table {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 2px var(--color);
    border-radius: min(0.6vw, 0.6vh);
    margin: 10px auto;
    overflow: hidden;
}

td, th {
    border: 1px solid var(--color);
    padding: 4px 8px;
    width: auto;
}

th { background-color: var(--header); }

sup::before { content: ""; }
sup::after { content: ""; }

button, a.a-button {
    padding: 0 8px;
    margin: 0 4px;
    background-color: var(--a-hover);
    color: var(--header);
    border-radius: min(1vw, 1vh);
    border: none;
    text-decoration: none;
    font-size: calc(var(--font-sizing) + max(2vw, 2vh));
    font-family: "Geologica", serif;
    transition: 0.1s ease;
}
button:hover, .a-button:hover {
    padding: 0 10px;
    color: var(--background-color);
}
button.big, .a-button.big {
    padding: 4px 12px;
    font-size: calc(var(--font-sizing) + max(2.5vw, 2.5vh));
}
button.big:hover, .a-button.big:hover { padding: 4px 14px; }
button.action.big, .a-button.action.big {
    padding: 8px 16px;
    font-size: calc(var(--font-sizing) + max(3vw, 3vh));
    font-weight: 400;
    font-variation-settings: 'wght' 400;
}
button.action.big:hover, .a-button.action.big:hover { padding: 8px 20px; }

.fixed-font { font-size: 14pt !important; }

i[a] {
    font-style: normal;
    color: var(--scrollbar);
}

.hide-parent {
    max-height: 50vh;
    transition: 0.5s ease;
}



.img-gallery {
    padding: 8px 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0.5vw;
    box-shadow: 0 0 4px 2px var(--color);
    background-color: var(--header);
    width: 100%;
    margin-bottom: 24px;
}

.img-gallery .arrow {
    background-color: rgba(0, 0, 0, 0.4);
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 2vw;
    position: absolute;
    top: calc(50% - 15px);
    
    transition: 0.1s;
}

.img-gallery .arrow.left { left: 8px; } 
.img-gallery .arrow.right { right: 8px; }
.img-gallery .arrow.left:hover { left: 6px; } 
.img-gallery .arrow.right:hover { right: 6px; }
.img-gallery .arrow:hover {
    padding: 0 2px;
    background-color: rgba(0, 0, 0, 0.6);
}


.img-gallery .gallery-text {
    width: 100%;
    margin-bottom: 10px;
}

.img-gallery .images.mosaic {
    padding: 4px 8px;
    border-radius: 0.5vw;
    background-color: var(--background-color);
    box-shadow: 0 0 2px 2px var(--background-color);
    flex-wrap: wrap;
}

.img-gallery .images.mosaic img {
    max-height: min(30vh, 30vw);
    width: auto;
}

.img-gallery .images.linear {
    overflow-x: scroll;
    overflow-y: hidden;
    width: calc(100% - 8px);
    display: flex;
    border-radius: 0.5vw;
    padding: 4px;
    background-color: var(--background-color);
    box-shadow: 0 0 2px 2px var(--background-color);
}

.img-gallery .images.linear::-webkit-scrollbar {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.img-gallery .images.linear::-webkit-scrollbar-thumb {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.img-gallery::-webkit-scrollbar {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.img-gallery::-webkit-scrollbar-thumb {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.img-gallery .images.linear img {
    height: 200px;
    width: auto;
    display: inline-block;
}

svg line {
    stroke: var(--color);
    stroke-width: 2;
    stroke-linecap: round;
}




@media screen and (max-width: 600px) {
    .mobilehide { display: none !important; }
    .desktophide { display: initial !important; }
    /*button, .a-button {
        padding: 2px 10px;
    }
    button:hover, .a-button:hover { padding: 2px 10px; }
    .content h1, .content h4 { font-size: calc(var(--font-sizing) + 7vw); }
    .content h2, .content h5 { font-size: calc(var(--font-sizing) + 6vw); }
    .content h3, .content h6 { font-size: calc(var(--font-sizing) + 5vw); }
    .content p, .content note, ul, table * { font-size: calc(var(--font-sizing) + 2vw); }*/
    
    .panel.with-img > img, .news-panel.with-img > img {
        margin-bottom: 10px;
        width: 100%;
    }
    
    .panel.left80, .panel.right80 {
        margin: 2vw auto;
        width: 98%;
    }
    
    
    .infoview {
        width: 90%;
        overflow: hidden;
    }
    
    .infoview .inner img {
        box-shadow: none;
        border-radius: 0;
    }
    
    .infoview .inner p {
        height: 100%;
        margin: 4px 18px 10px;
    }
}

@media all and (min-resolution:.001dpcm) and (max-width: 600px) { 
    @supports (-webkit-appearance:none) {
        .mobilehide { display: none !important; }
        .desktophide { display: block !important; }
        
        .content h1 { font-size: calc(var(--font-sizing) + max(6.4vw, 6.4vh)); /*56pt*/ }
        .content h2 { font-size: calc(var(--font-sizing) + max(5.8vw, 5.8vh)); /*44pt*/ }
        .content h3 { font-size: calc(var(--font-sizing) + max(4.8vw, 4.8vh)); /*34pt*/ }
        .content h4 { font-size: calc(var(--font-sizing) + max(4.4vw, 4.4vh)); /*32pt*/ }
        .content h5 { font-size: calc(var(--font-sizing) + max(3.8vw, 3.8vh)); /*26pt*/ }
        .content h6 { font-size: calc(var(--font-sizing) + max(3.2vw, 3.2vh)); /*22pt*/ }
        .content p, .content note, ul, table * { font-size: calc(var(--font-sizing) + max(2.4vw, 2.4vh)); /*2.6vw*/ }
        
        .news-panel p:first-of-type {
            opacity: 0.6;
            margin: 0 auto;
            text-align: center;
            font-size: calc(var(--font-sizing) + max(2vw, 2vh));
        }
        
        button, a.a-button {
            font-size: calc(var(--font-sizing) + max(2.6vw, 2.6vh));
        }
        
        .fixed-font { font-size: 12pt !important; }
    }
}