@import url('https://fonts.upset.dev/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.upset.dev/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/bold/style.css');

:root {
    /* Page background */
    --background: #68AEDF;
    
    /* Universal text and link colors */
    --color:#23160e;
    --link:var(--background);
    
    /* Font family (can include fallbacks) */
    --bodyfont: "Poppins", sans-serif;

    /* List background colors */
    --color1: #f9f9f9;
    
    /* Borders for each background color */
    --color1border:var(--color);
    --border: 2.5px solid var(--color);
    
    /* Header background and border */
    --header: var(--color1);
    --headerborder:var(--color1border);
    
    /* Scrollbars */
    --scrollbg:var(--color1);
    --scrollcolor:var(--color1);

    --shadow: rgba(0,0,0,0.5) 3px 3px 0px;

}

html { 
    filter: brightness(95%) grayscale(10%) sepia(10%); 
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;}

* { margin:0; padding:0; line-height:1.5;}

html { scrollbar-color: var(--color) var(--scrollbg); }

p + ul, p + .columnAlt { margin-top: -0.5em; margin-bottom:1em}

body {
    background-color:var(--background);
    background-image: radial-gradient(#f9f9f975 15%, transparent 16%),
    radial-gradient(#f9f9f975 15%, transparent 16%);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
    font: 1.15rem var(--bodyfont);
    color: var(--color);
    font-weight:500;
}

/* Body text styles */

main ul, .infoColumn ul {
    list-style-position:outside;
    margin-left:20px;
}

.infoColumn ul { font-size: smaller }

p {
    margin:10px 0 10px 0;
}

a {
    color: var(--link);
}

a:hover, a:focus {
    text-decoration:none;
}

i {
    vertical-align: -2.5%;
    margin-right: 2.5px;
}

/* Main header */

header#top {
    width: 80%;
    max-width:1000px;
    box-shadow: var(--shadow);
    background: var(--header);
    border: var(--border);
    margin: 25px auto;
    border-radius: 5px; 
}

header#top h1 {
    font-size: 1.5em;
    margin-bottom: 10px; 
}

/* Header text */

#infocontainer {
    padding:20px;
    min-height:5.5em;
}

/* Header icon */

.header-icon {
    margin-right: 20px;
    border-radius: 5px;
    height: 80px;
    width: 80px;
    float:left;
    border: var(--border);
}

/* Menu */

nav {
    margin-top:10px;
    border-top: var(--border); 
    font-size:smaller;
}

nav ul {
    list-style:none;
    display:inline;
}

nav ul li {
    display: inline-block;
    width:125px;
    text-align:center;
    padding: 6px 0;
    border-left: var(--border); 
}

nav ul li:first-child {
    border: none!important; 
}

a {
    text-decoration:none !important;
}

a:hover {
    text-decoration:underline !important;
}

/* Main content */

main {
    margin: 20px 200px 20px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Lists */

section {
    margin:20px;
    box-shadow: var(--shadow);
    border-radius: 5px; 
    padding:15px;
    background:var(--color1);
    border: var(--border);
    scrollbar-color: var(--link) var(--scrollbg);
}


.listheader {  border-bottom: var(--border) !important; }
.handle {color:var(--color1border);}

.handle::before {
    content: "❣";
    margin-left: 0;
    zoom: 150%;
    line-height:1;
}

h1::before, h2::before, h4::before {
    content: "✱ ";
}


/* List titles */

header.listheader {
    display:flex;
    justify-content: space-between;
    padding-bottom:10px;
    margin-bottom:10px;
    margin-left: -0.9em;
    margin-right: -0.9em;
    padding: 0 1.3em 10px;
}

h2 {
    font-size:1.1em;
}

h2 .subtitle {
    font-weight:normal;
}

subtitle {
    font-weight:normal;
    display:inline;
}

subtitle::before { content:"(" }
subtitle::after { content:")" }

h2 a {
    text-decoration:none;
    color: var(--color);
}

h2 a:hover {
    text-decoration:underline;
}

/* Drag handle */

.handle {
    font-size:1rem;
    cursor:grab;
    font-weight:bold;
}

/* List icons */

.listicon {
    float: right;
    margin: 0 0 5px 10px;
    width:80px;
    height:80px;
    border-radius:5px;
    border: var(--border);
}

/* List content */

.listtext {
    padding:10px;
}

.scrollMode {
    height: 300px;
    overflow:auto;
}

/* List footers */

.foot {
    font-size: smaller;
    padding: 10px;
    text-align: right; 
}

.foot p {
    margin:0;
    color: var(--link);
}
.foot p:nth-of-type(1)::after {
    content: " ∞";
    font-family: monospace;
}
.foot p:nth-of-type(2)::after {
content: " +";
font-family: monospace;
}


/* Main footer */

footer#bottom {
    background: var(--header);
    border: 1px solid var(--headerborder);
    padding: 5px;
    font-size:1rem;
    margin: 25px auto;
    max-width: 700px;
    width:70%;
    box-shadow: var(--shadow);
    text-align: center;
    border-radius: 5px; 
}

/* Phone stuff */

@media screen and (max-width: 899px) {
    header#top {
        width:calc(100% - 40px);
        margin-top:20px;
    }

    header#top h1 {
        font-size:1.4em;
    }

    main {
        display:inline;
        margin: auto;
        width:calc(100% - 40px);
    }

    .listtext {
        height:auto;
        max-height:250px;
    }

    .handle, .handle::before {
        display:none;
    }
    
    .foot {
        font-size:0.85em;
    }

    h2 {
        font-size:1.2em;
    }

    footer#bottom {
        width:75%;
    }

    header .infoRow { display: block;}

    .infoColumn:nth-of-type(1) { padding: 0 0 1em !important;  }

    .infoColumn:nth-of-type(2) {border-top: var(--border); border-left: 0px !important; padding: 1em 0 0 !important; margin: 0em !important}
}

.columnAlt {
  columns: 2;
  padding: 0px 15px; /* adds padding between the text and the border */
  padding-bottom:0.5em;
  column-gap: 2.5px;
}
/* this is extra */
.columnAlt p {
  margin-top: 0;
}

out {
    display: inline;
    text-shadow: rgb(35, 22, 14) 1px 0px 0px, rgb(35, 22, 14) 0.540302px 0.841471px 0px, rgb(35, 22, 14) -0.416147px 0.909297px 0px, rgb(35, 22, 14) -0.989993px 0.14112px 0px, rgb(35, 22, 14) -0.653644px -0.756803px 0px, rgb(35, 22, 14) 0.283662px -0.958924px 0px, rgb(35, 22, 14) 0.96017px -0.279416px 0px;
    filter: sepia(30%) !important; 
}

ol {
  display: block;
  list-style-type: decimal;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
ol > li::marker {
  font-weight: bold;
}

::selection {
color: var(--color);
background: var(--background);
}
::-moz-selection {
color: var(--color);
background: var(--background);
}

.infoRow {
  display: flex;
}

.infoColumn {
  flex: 50%;
  padding: 0px;
}

.infoColumn:nth-of-type(2) { border-left: var(--border); padding: 1.5em 20px 0; margin: -1.2em 0 -1.7em}

.hideList ul {list-style-type: none !Important;}

a { cursor: pointer !important; }

.hideList details, .hideList details[open]  { margin-bottom:0.4em }
.hideList details summary {
    color: var(--link);
    text-decoration:underline;
    font-weight: bolder;
    display:inline-block;
    cursor: pointer !important;
    padding: 0 5px;
}
.hideList details summary:hover {text-decoration:none;}
.hideList summary::marker {  content: "";}

.hideList details[open] > .hideList summary {
    background: #ffe7a1;
    width:auto;
    text-decoration:none;
}

ff { color:#ad396f; font-weight:bold }
ff::after { content: "⚢"; margin-left: 0.25em}
mm { color:#694cb8;  font-weight:bold }
mm::after { content: "⚣"; margin-left: 0.25em}
fm { color:#9b37a4;  font-weight:bold }
fm::after { content: "⚤"; margin-left: 0.25em}
pp { color:#5e73c8;  font-weight:bold }

h4 { text-transform: uppercase }

.warn::before { content:"⚠ "; display:inline; vertical-align:0.5px}
su { text-decoration-line: underline;  text-decoration-style: wavy;  text-decoration-thickness: 1px;  }

.readmore summary {
  color: var(--link);
  text-align:center !important;
    cursor: pointer !important;
    text-decoration:none;
}
.readmore summary:hover {text-decoration:underline!important; }

.readmore summary::after { content:"[...view...]" }

.readmore[open] > summary {display:none;}
.readmore summary::marker {  content: "";}

dt { text-transform:lowercase; font-weight:bold; font-size:smaller}
dd { margin-bottom:1em }
abbr { text-decoration: underline dotted 0.1em }