/* Global customization */
svg {
    user-select: none;
    -webkit-user-select: none;
    font-weight: bold;
    width: 50%;
}

/* apply color theme to svg */
svg * {
    font-family: iAWriterQuattroS, monospace !important;
    font-size: 17px !important;
    font-weight: bold;
}

font[color="#4d9900"] {
    color: var(--green) !important;
}
font[color="#4d9903"] {
    color: var(--yellow) !important;
}
/* replace SVG black/white to the local color */
*[style*="color: rgb(0, 0, 0)"]{
    color: var(--front) !important;
}
*[stroke="rgb(0, 0, 0)"], *[stroke="#000000"] {
    stroke: var(--front) !important;
}
*[fill="rgb(255, 255, 255)"] {
    fill: var(--bg) !important;
 }

/* replace SVG red to custom color */
*[stroke="#d63031"] {
    stroke: var(--red) !important;
}
*[style*="color: rgb(214, 48, 49)"]{
    color: var(--red) !important;
}

/* replace SVG green to custom color */
*[stroke="#4d9900"] {
    stroke: var(--green) !important;
}
*[style*="color: rgb(77, 153, 0)"]{
    color: var(--green) !important;
}

/* replace 4d9903 with yellow */
*[stroke="#4d9903"] {
    stroke: var(--yellow) !important;
}
*[style*="color: rgb(77, 153, 3)"]{
    color: var(--yellow) !important;
}
*[fill="#4d9903"] {
    fill: var(--yellow) !important;
 }


/* replace green filling on arrows */
path[stroke="#4d9900"][pointer-events=all] {
    fill: var(--green) !important;
}
/* replace white filling on arrows */
path[stroke="#000000"][pointer-events=all], path[stroke="rgb(0, 0, 0)"][pointer-events=all]  {
    fill: var(--front) !important;
}
/* replace red filling on arrows */
path[stroke="#d63031"][pointer-events=all] {
    fill: var(--red) !important;
}


* {
    font-family: 'iAWriterQuattroS', monospace;
}

@font-face {
    font-family: 'iAWriterQuattroS';
    src: local('iAWriterQuattroS'), url('./fonts/iAWriterQuattroS-Bold.woff2') format('woff2');
    font-weight: bold;
}
@font-face {
    font-family: 'iAWriterQuattroS';
    src: local('iAWriterQuattroS'), url('./fonts/iAWriterQuattroS-Regular.woff2') format('woff2');
    font-weight: normal;
}
@font-face {
    font-family: 'iAWriterQuattroS';
    src: local('iAWriterQuattroS'), url('./fonts/iAWriterQuattroS-Italic.woff2') format('woff2');
    font-style: italic;
}
@font-face {
    font-family: 'iAWriterQuattroS';
    src: local('iAWriterQuattroS'), url('./fonts/iAWriterQuattroS-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

pre *, code {
    font-family: monospace;
    font-size: 16px;
    line-height: 25px;
}

pre {
    margin: 0;
    padding: 20px;
}

p > code {
    padding: 2px;
    font-style: italic;
    /* background: var(--front); */
    /* padding: 6px; */
    /* color: var(--bg); */
    /* border: 1px solid var(--front); */
    /* border-radius: 3px; */
}

[data-theme="light"] {
    --red: #ee5253;
    --yellow: #ffa801;
    --green: #27ae60;
    --select: #1abc9c;
    --bg: #ecf0f1;
    --front: #34495e;
    --frontBrightText: #34495eab;
    --frontBrightBorder: #34495e87;
    --disabled: #34495e42;
    --videoBorder: #34495e;
    --invertToWhite: 100%;
    --invertToBlack: 0%;
    --footerBg: url(/imgs/footerDay.svg);
    --arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

[data-theme="night"] {
    --red: #f35b5b;
    --yellow: #ffa801;
    --green: #55e474;
    --select: #16a085;
    --bg: #3a5168;
    --front: #ecf0f1;
    --frontBrightText: #82ccdd;
    --frontBrightBorder: #82ccdd;
    --disabled: #ecf0f157;
    --videoBorder: #00000000;
    --invertToWhite: 0%;
    --invertToBlack: 100%;
    --footerBg: url(/imgs/footerNight.svg);
    --arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
html {
    margin: 0 auto;
    max-width: 1400px;
    font-size: 20px;
    font-family: 'iAWriterQuattroS', monospace;
    line-height: 35px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

body:not(iframe) {
    background-color: var(--bg);
    color: var(--front);
    margin: 50px;
    font-size: 18px
}

a:visited {
    color: inherit;
}

a, .link {
    color: var(--front);
    text-underline-offset: 5px;
}

.link:hover {
    text-decoration: underline;
}

.copy-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDMzLjkgNjUuOWwtNTEuOS01MS45QTQ4IDQ4IDAgMCAwIDM0OC4xIDBIMTc2Yy0yNi41IDAtNDggMjEuNS00OCA0OHY0OEg0OGMtMjYuNSAwLTQ4IDIxLjUtNDggNDh2MzIwYzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDIyNGMyNi41IDAgNDgtMjEuNSA0OC00OHYtNDhoODBjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWOTkuOWE0OCA0OCAwIDAgMCAtMTQuMS0zMy45ek0yNjYgNDY0SDU0YTYgNiAwIDAgMSAtNi02VjE1MGE2IDYgMCAwIDEgNi02aDc0djIyNGMwIDI2LjUgMjEuNSA0OCA0OCA0OGg5NnY0MmE2IDYgMCAwIDEgLTYgNnptMTI4LTk2SDE4MmE2IDYgMCAwIDEgLTYtNlY1NGE2IDYgMCAwIDEgNi02aDEwNnY4OGMwIDEzLjMgMTAuNyAyNCAyNCAyNGg4OHYyMDJhNiA2IDAgMCAxIC02IDZ6bTYtMjU2aC02NFY0OGg5LjZjMS42IDAgMy4xIC42IDQuMiAxLjhsNDguNCA0OC40YTYgNiAwIDAgMSAxLjggNC4yVjExMnoiLz48L3N2Zz4=");
}

.copy-container {
    height: 30px;
    margin-left: calc(100% - 50px);
    margin-bottom: -50px;
    z-index: 9999;
    position: relative;
}

.copy-code-button {
    background-color: white;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    align-content: center;
    user-select: none;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}

header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

ol {
    margin-left: 15px;
}

ol, ul, blockquote, .highlight {
    margin-bottom: 35px;
    margin-top: 35px;
}

p + ul, p + ol {
    margin-top: 10px !important;
}

button, input, select {
    border: 2px solid var(--front);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 25px;
    background-color: transparent;
    font-size: 16px;
    color: var(--front);
    font-weight: bold;
    margin-bottom: 10px;
}

input:disabled {
    border: 2px solid var(--disabled) !important;
    cursor: default;
}
input:focus, input:hover {
    outline: none;
    border-color: var(--frontBrightBorder);
}
button:active,  button:focus-visible {
   /* border: 2px solid var(--select) !important; */
   /* color: var(--select) !important; */
   outline: none;
   border-color: var(--frontBrightBorder);
   color: var(--frontBrightText);
}
button:hover, a:hover {
    border-color: var(--frontBrightBorder);
    color: var(--frontBrightText);
}

.errorInput {
    border: 2px solid var(--red) !important;
}

input {
    cursor: text;
}

::placeholder, .placeholder {
    font-style: italic;
    color: var(--front);
    opacity: .6;
}

.menu {
    user-select: none;
    font-weight: bold;
    display: flex;
    width: 60%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.menu span a {
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
}

main {
    display: flex;
    gap: 25px;
}

.listmenu {
    font-size: 1.1em;
}

article {
    /* margin: 0 auto; */
}
aside + article {
    width: calc(80% - 25px);
}

article > *:first-child  {
    margin-top: 0px;
}

article > p > img {
    width: 80%;
    height: auto;
    filter: invert(var(--invertToBlack));
}

article > h2 {
    text-transform: capitalize;
    margin-top: 40px;
    font-size: 1.2em;
}

article > h3 {
    text-transform: capitalize;
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 1.1em;
}

aside {
    user-select: none;
    width: 20%;
}

aside a {
    text-decoration: none;
}

u {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-style: dashed;
}

.bottom30 {
    margin-bottom: 30px;
}

.listpage:hover, .menu>span>a:hover, .currentMenu, .current, footermenu>a:hover {
    text-decoration: underline !important;
    text-underline-offset: 6px;
    color: var(--front);
    /* text-decoration-style: dashed !important; */
}

article p:has(>img) {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
}

article > h1 {
    margin-top: 0px;
    font-size: 1.4em;
}

ul > li {
    margin-left: 10px;
}

aside > li,  aside > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.listsubmenu {
    margin-left: 20px;
}

.listpage{
  display: block;
  padding-top: 5px;
}
aside > li {
    margin-top: 25px;
}
body > main > aside > li:nth-child(2), body > main > aside > li:nth-child(1) {
    margin-top: 0px;
}

hr {
    color: var(--front);
}

article p:has(>video) {
    text-align: center;
    margin-top: 40px;
}

video, iframe {
    border: 1px solid var(--videoBorder);
    border-radius: 10px;
}

.fatwiggle {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: wavy;
    text-underline-offset: 10px;
    user-select: none;
    font-size: 1.5em;
    font-weight: bold;
    white-space: nowrap;
    display: flex;
    align-content: center;
    align-items: center;
    text-transform: lowercase;
}

.fatwiggle:hover {
    color: var(--front)
}

.emphasis {
    font-weight: bold;
    /* font-style: italic; */
    font-size: 19px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

::selection {
    background: var(--select);
    /* color: var(--select); */
}

blockquote::before {
    content: "Note";
    font-style: italic;
    font-weight: bold;
}

blockquote {
    border-left: 3px solid var(--select);
    padding: 5px;
    padding-left: 30px;
    margin-left: 0px;
}

blockquote > p {
    margin: 0;
}

.highlight {
    overflow-x: auto;
    border: #272822 5px solid;
    border-radius: 5px;
    background: #272822;
}

#asideToggle {
    display: none;
    user-select: none;
    /* text-align: end; */
    margin-bottom: 10px;
}

#asideToggleBtn {
    cursor: pointer;
}

* {
    transition: opacity 0.1s;
}

.overlayVisible {
    display: block !important;
    opacity: 1 !important;
}

.overlayTop {
    z-index: 3 !important;
}

.overlay {
    position: fixed;
    top: 115px;
    display: none;
    opacity: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: var(--bg);
    border: solid 50px var(--bg);
    margin: auto;
    max-width: 1300px;
    border-top: 0px;
    margin-top: 0px;
}

.overlayHeader {
    top: 0px;
}

.overlayHeader::before {
    content: "※ lagom.org";
    display: block;
    user-select: none;
    padding-top: 25vh;
    white-space: nowrap;
    padding-bottom: 10px;
    margin: 0;
    font-size: 30px;
    font-weight: bold;
}

div.overlayQuit {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzEuMTEyIDMxLjExMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMTEyIDMxLjExMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gcG9pbnRzPSIzMS4xMTIsMS40MTQgMjkuNjk4LDAgMTUuNTU2LDE0LjE0MiAxLjQxNCwwIDAsMS40MTQgMTQuMTQyLDE1LjU1NiAwLDI5LjY5OCAxLjQxNCwzMS4xMTIgMTUuNTU2LDE2Ljk3IA0KCTI5LjY5OCwzMS4xMTIgMzEuMTEyLDI5LjY5OCAxNi45NywxNS41NTYgIiBzdHlsZT0iZmlsbDogd2hpdGU7Ii8+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==");
    position: absolute;
    right: 0px;
    top: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 101;
    display: block;
    filter: invert(var(--invertToWhite));
}

select {
  appearance: none;
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: right 1.2rem top 50%;
  background-size: 0.55rem auto;
  padding-right: 55px;
}

table {
    padding-top: 10px;
}

@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    .showAside {
        display: none !important;
    }
    main {
        flex-direction: column;
        gap: 10px !important;
    }
    header {
        margin-bottom: 35px !important;
    }
    aside, article, video, img {
        width: 100% !important;
    }
    aside {
        padding-bottom: 20px !important;
        margin-bottom: 20px;
        border-bottom: 1px dotted;
    }
    #asideToggle {
        display: block !important;
    }
    .currentMenu {
        text-decoration: underline !important;
    }
}

/* root / single-page stuff */

.left {
    justify-content: flex-start !important;
}
.right {
    justify-content: flex-end !important;
    text-align: end;
}
.center {
    text-align: center;
    justify-content: center !important;
}
.per30 {
    width: 30%;
}
.per70 {
    width: 70%;
}
.per100 {
    width: 100%;
}
.per50 {
    width: 50%;
    /* padding-left: 20px; */
}
.row {
    display:flex;
    align-items:center;
    justify-content: space-around;
    gap: 15px;
}
.bar {
    width: 100%;
    border-top: 2px dotted var(--front);
    border-top-style: dotted;
}
.row, .bar {
    margin-bottom: 70px;
}
.row:last-child {
    margin-bottom: 30px;
}
.top {
    margin-bottom: 40px;
}
div.row > div > p {
    margin-top: 0;
    margin-bottom: 35px;
}
div.row > div > p:last-child {
    margin-bottom: 0px;
}

@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    .per50, .per10, .per30, .per70 {
        width: 100% !important;
    }
    .row, .bar {
        margin-bottom: 70px !important;
    }
    .row {
        flex-direction: column;
        gap: 70px;
    }
    .top {
        margin-bottom: 30px !important;
    }
    svg {
        width: 100% !important;
    }
    .right {
        text-align: left !important ;
    }
}