/*
 * Index of line of codes for navigation
 *
 * Line  31 - Base Styling
 * Line  44 - Style the links to be green, underline on hover
 * Line  62 - For `disabled` class, don't make the link appear obviously
 * Line  68 - Set paragraph line height
 * Line  73 - Set headers styling
 * Line 112 - Set headers' links to use different shade
 * Line 117 - Set headers' margin and size
 * Line 143 - Set page's main header's styling
 * Line 228 - Set main and article base
 * Line 236 - Set properties for list items
 * Line 247 - Set article to not having margins
 * Line 252 - Declare default font for non-Latin
 * Line 287 - Handle image styling
 * Line 313 - Format the footer link list
 * Line 354 - Table styling
 * Line 475 - Table of contents styling
 * Line 502 - Styling for `code` elements
 * Line 511 - Styling for various buttons
 * Line 604 - Styling for loading screen
 * Line 626 - Add menu formatting
 * Line 797 - Styling for dropdown language selector
 * Line 926 - Styling for toggleable text block
 *
 * This file is written by Yaya MNH48 and licensed under MIT
 *
 */

/* Base Styling */
body, html {
    text-align: justify;
    margin: 0;
    padding: 0;
    color: #ddd;
    background: #605;
    background-repeat: no-repeat;
    height: 100%;
    font-family: "Baloo 2", "Mada", "MNH48 Beringin PUA", "Kosugi Maru", "ZCOOL XiaoWei", "Noto Sans TC", "Noto Sans Rejang", "Baloo Thambi 2", "Twemoji", sans-serif;
    font-size: 18px;
}

/* Style the links to be green, underline on hover */
a {
    color: #71ee00;
    text-decoration: none;
}

a:active {
    color: #606;
}
a:visited {
    color: #39b756;
}
a:hover {
    color: #71aa44;
    text-decoration: underline;
}

/* For `disabled` class, don't make the link appear obviously*/
.disabled {
   pointer-events: none;
   cursor: default;
}

/* Set paragraph line height */
p{
    line-height: 1.2;
}

/* Set headers styling */
h1, h2, h3, h4, h5 {
    font-family: "Dancing Script", "Amiri", "MNH48 Beringin PUA", "Sawarabi Mincho", "Ma Shan Zheng", "Noto Serif TC", "Noto Sans Rejang", "Twemoji", serif;
    color: #eae;
    text-align: left;
    clear: both;
}

h1:lang(ms-Arab), h2:lang(ms-Arab), h3:lang(ms-Arab), h4:lang(ms-Arab), h5:lang(ms-Arab) {
    font-family: "Amiri", "Dancing Script", "Twemoji", serif;
    direction: rtl;
    -webkit-font-feature-settings: "ss08" 1; 
    -moz-font-feature-settings: "ss08" 1; 
    font-feature-settings: "ss08" 1;
    text-align: right;
}

h1:lang(ms-Brgn), h2:lang(ms-Brgn), h3:lang(ms-Brgn), h4:lang(ms-Brgn), h5:lang(ms-Brgn) {
    font-family: "MNH48 Beringin PUA", "Dancing Script", "Twemoji", serif;
    direction: rtl;
    writing-mode: vertical-rl;
}

h1:lang(ms-Rjng), h2:lang(ms-Rjng), h3:lang(ms-Rjng), h4:lang(ms-Rjng), h5:lang(ms-Rjng){
    font-family: "Noto Sans Rejang", "Dancing Script", "Twemoji", serif;
}

h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja){
    font-family: "Sawarabi Mincho", "Dancing Script", "Twemoji", serif;
}

h1:lang(zh-Hans), h2:lang(zh-Hans), h3:lang(zh-Hans), h4:lang(zh-Hans), h5:lang(zh-Hans), h1:lang(zh-Hans_MY), h2:lang(zh-Hans_MY), h3:lang(zh-Hans_MY), h4:lang(zh-Hans_MY), h5:lang(zh-Hans_MY){
    font-family: "Ma Shan Zheng", "Dancing Script", "Twemoji", serif;
}

h1:lang(zh-Hant), h2:lang(zh-Hant), h3:lang(zh-Hant), h4:lang(zh-Hant), h5:lang(zh-Hant), h1:lang(zh-Hant_MY), h2:lang(zh-Hant_MY), h3:lang(zh-Hant_MY), h4:lang(zh-Hant_MY), h5:lang(zh-Hant_MY){
    font-family: "Noto Serif TC", "Dancing Script", "Twemoji", serif;
}

h1:lang(ta), h2:lang(ta), h3:lang(ta), h4:lang(ta), h5:lang(ta){
    font-family: "Kavivanar", "Dancing Script", "Twemoji", serif;
}

/* Set headers' links to use different shade */
h1 a, h2 a, h3 a, h4 a, h5 a {
    color:#ffcefe;
}

/* Set headers' margin and size */
h1 {
    margin: 0px 0px;
    font-size: 3em;
}

h2{
    margin: 20px 0 10px 0;
    font-size: 2.5em;
}

h3 {
    margin: 20px 0 10px 0;
    font-size: 2em;
}

h4 {
    margin: 20px 0 10px 0;
    font-size: 1.6em;
}

h5 {
    margin: 20px 0 10px 0;
    font-size: 1.3em;
}

/* Set page's main header's styling */
header {
    background: #403;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 80px;
}

.webmainicon {
    width: 250px;
    height: 200px;
    object-fit: cover;
    object-position: 50%;
}

.websitetitle {
    margin: -10px 0 0 0;
    text-align: center;
    font-family: "Grenze Gotisch", "Scheherazade", "MNH48 Beringin PUA", "M PLUS 1p", "Long Cang", "Noto Serif TC", "Noto Sans Rejang", "Twemoji", serif;
}

.websitetitle:lang(ms-Arab) {
    font-family: "Scheherazade", "Grenze Gotisch", "Twemoji", serif;
    direction: rtl;
    text-align: center;
    margin: -40px 0;
}

.websitetitle:lang(ms-Brgn) {
    font-family: "MNH48 Beringin PUA", "Grenze Gotisch", "Twemoji", serif;
    direction: rtl;
    writing-mode: vertical-rl;
}

.websitetitle:lang(ms-Rjng){
    font-family: "Noto Sans Rejang", "Grenze Gotisch", "Twemoji", serif;
}

.websitetitle:lang(ja){
    font-family: "M PLUS 1p", "Grenze Gotisch", "Twemoji", serif;
}

.websitetitle:lang(zh-Hans),.websitetitle:lang(zh-Hans_MY){
    font-family: "Long Cang", "Grenze Gotisch", "Twemoji", serif;
}

.websitetitle:lang(zh-Hant),.websitetitle:lang(zh-Hant_MY){
    font-family: "Noto Serif TC", "Grenze Gotisch", "Twemoji", serif;
}

.websitetitle:lang(ta){
    font-family: "Coiny", "Grenze Gotisch", "Twemoji", serif;
}


.webpagetitle {
    margin: 0px;
    text-align: center;
    font-family: "Grenze Gotisch", "Scheherazade", "MNH48 Beringin PUA", "M PLUS 1p", "Long Cang", "Noto Serif TC", "Noto Sans Rejang", "Twemoji", serif;
}

.webpagetitle:lang(ms-Arab) {
    font-family: "Scheherazade", "Grenze Gotisch", "Twemoji", serif;
    direction: rtl;
    text-align: center;
}

.webpagetitle:lang(ms-Brgn) {
    font-family: "MNH48 Beringin PUA", "Grenze Gotisch", "Twemoji", serif;
    direction: rtl;
    writing-mode: vertical-rl;
}

.webpagetitle:lang(ms-Rjng){
    font-family: "Noto Sans Rejang", "Grenze Gotisch", "Twemoji", serif;
}

.webpagetitle:lang(ja){
    font-family: "M PLUS 1p", "Grenze Gotisch", "Twemoji", serif;
}

.webpagetitle:lang(zh-Hans),.webpagetitle:lang(zh-Hans_MY){
    font-family: "Long Cang", "Grenze Gotisch", "Twemoji", serif;
}

.webpagetitle:lang(zh-Hant),.webpagetitle:lang(zh-Hant_MY){
    font-family: "Noto Serif TC", "Grenze Gotisch", "Twemoji", serif;
}

.webpagetitle:lang(ta){
    font-family: "Coiny", "Grenze Gotisch", "Twemoji", serif;
}


/* Set main and article base */
main {
    padding: 10px;
    margin: auto;
    width: 80%;
    max-width: 940px;
}

/* Set properties for list items*/
li {
    line-height: 1.1;
    padding-bottom: 2px;
}

ul, ol {
    margin-left: 0px;
    padding-left: 1em;
}

/* Set article to not having margins*/
article {
    margin:0
}

/* Declare default font for non-Latin */
main:lang(ms-Arab), article:lang(ms-Arab), p:lang(ms-Arab), footer:lang(ms-Arab), span:lang(ms-Arab), a:lang(ms-Arab) {
    font-family: "Mada", "Baloo 2", "Twemoji", sans-serif;
    -webkit-font-feature-settings: "cv84" 1; 
    -moz-font-feature-settings: "cv84" 1; 
    font-feature-settings: "cv84" 1;
    font-size: 1.05em;
    direction: rtl;
}

main:lang(ms-Brgn), article:lang(ms-Brgn), p:lang(ms-Brgn), footer:lang(ms-Brgn), span:lang(ms-Brgn), a:lang(ms-Brgn) {
    font-family: "MNH48 Beringin PUA", "Baloo 2", "Twemoji", sans-serif;
    writing-mode: vertical-rl;
}

main:lang(ms-Brgn) {
    max-width: unset;
    max-height: 940px;
}

main:lang(ms-Rjng), article:lang(ms-Rjng), p:lang(ms-Rjng), footer:lang(ms-Rjng), span:lang(ms-Rjng), a:lang(ms-Rjng) {
    font-family: "Noto Sans Rejang", "Baloo 2", "Twemoji", sans-serif;
}

main:lang(ja), article:lang(ja), p:lang(ja), footer:lang(ja), span:lang(ja), a:lang(ja) {
    font-family: "Kosugi Maru", "Baloo 2", "Twemoji", sans-serif;
}

main:lang(zh-Hans), article:lang(zh-Hans), p:lang(zh-Hans), footer:lang(zh-Hans), span:lang(zh-Hans), a:lang(zh-Hans), main:lang(zh-Hans_MY), article:lang(zh-Hans_MY), p:lang(zh-Hans_MY), footer:lang(zh-Hans_MY), span:lang(zh-Hans_MY), a:lang(zh-Hans_MY) {
    font-family: "ZCOOL XiaoWei", "Baloo 2", "Twemoji", sans-serif;
}

main:lang(zh-Hant), article:lang(zh-Hant), p:lang(zh-Hant), footer:lang(zh-Hant), span:lang(zh-Hant), a:lang(zh-Hant), main:lang(zh-Hant_MY), article:lang(zh-Hant_MY), p:lang(zh-Hant_MY), footer:lang(zh-Hant_MY), span:lang(zh-Hant_MY), a:lang(zh-Hant_MY) {
    font-family: "Noto Sans TC", "Baloo 2", "Twemoji", sans-serif;
}

main:lang(ta), article:lang(ta), p:lang(ta), footer:lang(ta), span:lang(ta), a:lang(ta) {
    font-family: "Baloo Thambi 2", "Baloo 2", "Twemoji", sans-serif;
}

a:hover:lang(ms-Brgn) {
    text-underline-offset: -6px;
}

/* Handle image styling */
img.resize {
    float: left;
    max-width:50%;
    max-height:50%;
}

img[alt$=">"] {
    float:right;
    padding: 1em;
}

img[alt$="<"] {
    float:left;
    padding: 1em;
}

img[alt$="><"] {
    display: block;
    max-width: 100%;
    padding: 1em;
    height: auto;
    margin: auto;
    float: none!important;
}

/* Format the footer link list */
footlist {
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style: none
}
footer {
    padding: 17px;
    text-align: center;
    color: #f9d0fd;
    font-size: 90%;
}
footer ul {
    list-style: none;
    display: block;
}
footer ul li {
    list-style: none;
    display: inline;
    padding: 0 5px 0 10px;
}
footer ul li:lang(ms-Brgn) {
    list-style: none;
    display: inline;
    padding: 10px 0 5px 0;
}
footer ul li a {
    color: #f284ff;
}
footer ul li a:visited {
    color: #f9c4ff;
}
footer ul li a:hover {
    color: #f7a6ff;
}
footer ul li:not(:nth-child(1))::before {
    content: '◆      ';
    font-size: 75%;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid white;
    text-align: center;
}

td { 
    padding: 5px 5px 0px 5px;
    border-collapse: collapse;
    border-bottom: 1px solid white;
    color: white;
}

th {
    padding: 5px 5px 0px 5px;
    border-collapse: collapse;
    border-bottom: 1px solid white;
    color: white;
    cursor: pointer;
}

table.glossary tr td:nth-child(2) {
    font-family: "Amiri", "Dancing Script", "Twemoji", serif;
    font-size: 1.2em;
    direction: rtl;
    -webkit-font-feature-settings: "ss08" 1; 
    -moz-font-feature-settings: "ss08" 1; 
    font-feature-settings: "ss08" 1;
}

table.glossary tr td:nth-child(3) {
    font-family: "Noto Sans Rejang", "Dancing Script", "Twemoji", serif;
    font-size: 1.0em;
}

table.glossary tr td:nth-child(5) {
    font-family: "Kosugi Maru", "Dancing Script", "Twemoji", serif;
    font-size: 1.0em;
}

table.glossary tr td:nth-child(6) {
    font-family: "ZCOOL XiaoWei", "Dancing Script", "Twemoji", serif;
    font-size: 1.0em;
}

table.glossary tr td:nth-child(7) {
    font-family: "Noto Sans TC", "Dancing Script", "Twemoji", serif;
    font-size: 1.0em;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2210%22><path fill=%22%23FFF%22 d=%22m6,4 4-4 4,4zm0,1 4,4 4-4z%22/></svg>');
}

table.sortable tbody {
    counter-reset: sortabletablescope;
}

table.sortable thead tr::before {
    content: "";
    display: table-cell;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}

table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}

.kanabanyak th {
    background: #5900b3;
}
.kanabanyak tr {
    background: #a300d9;
}
.kanabanyak tr:nth-child(odd) {
    background: #8c0069;
}
.kanabanyak tr:nth-child(even) {
    background: #69008c;
}
.kanabanyak tr td:nth-child(4n+2) {
    background: #605;
    border-top: 1px solid #605;
    border-bottom: 1px solid #605;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
.kanadanrumi tr {
    background: #a300d9;
}
.kanadanrumi tr td:nth-child(3n) {
    background: #605;
    border-top: 1px solid #605;
    border-bottom: 1px solid #605;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
.kanabanyak tr td:nth-child(1) {
    background: #5900b3;
}
.kanabanyak tr:nth-child(1) {
    background: #5900b3;
}
.kanabanyak tr:nth-child(2) {
    background: #5900b3;
}
tr:hover, .kanabanyak tr:hover, .kanadanrumi tr:hover {
    background-color: #400010;
}
.jahighlight strong, .jahighlight b {
    font-weight: normal;
    color: #d9d900;
}

/* Table of contents styling */
.toc{
    float: right;
    clear: right;
    width: auto;
    background: none;
    padding: 10px 10px 10px 25px;
    margin: 1em;
    border: 1px solid white;
    font-size: 0.75em;
}
.toc[data-title]::before {
  content: attr(data-title);
  display: block;
  font-weight: bold;
  padding: 4px;
  font-size: 1.2em;
}
.toc:lang(ms-Arab){
    float: left;
    clear: left;
    padding: 10px 25px 10px 10px;
}
.toc:lang(ms-Brgn){
    padding: 25px 0px 10px 0px;
}

/* Styling for `code` elements */
code {
    font-family: "Noto Mono", "Noto Sans Mono", "Noto Sans Mono CJK JP", "Noto Sans Mono CJK SC", "Noto Sans Mono CJK TC", "Noto Sans JP Mono", "Noto Sans SC Mono", "Noto Sans TC Mono", "Courier New", "Lucida Console", "Courier", Monaco, "Noto Sans Rejang", "Twemoji", monospace;
    background-color: #663399;
    border: #9370db solid 1px;
    padding: 0px 5px;
    font-size: 0.85em;
}

/* Styling for various buttons */
.backtotop, .backtotop a, .backtotop:visited, .backtotop a:visited {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: 1px white solid;
    outline: none;
    background-color: #605;
    color: white;
    cursor: pointer;
    padding: 10px 20px 0px 20px;
    border-radius: 10px;
    font-size: 1.2em;
}
.backtotop:lang(ms-Arab) {
    left: 30px;
    right: unset;
}
.backtotop:lang(ms-Brgn) {
    left: 20px;
    bottom: 30px;
    right: unset;
    padding: 20px 10px 20px 0px;
}
.backtotop:lang(ja) {
    padding: 16px;
}
.backtotop:hover {
    background-color: darkgray;
    cursor: pointer;
    text-decoration: none;
    color: #605;
}

button, button:visited {
    border: 1px white solid;
    outline: none;
    background-color: #504;
    color: white;
    cursor: pointer;
    padding: 10px 10px 0px 10px;
    border-radius: 5px;
    font-size: 1.1em;
    font-family: "Baloo 2", "Mada", "MNH48 Beringin PUA", "Kosugi Maru", "ZCOOL XiaoWei", "Noto Sans TC", "Noto Sans Rejang", "Twemoji", sans-serif;
    line-height: 1em;
    margin-bottom: 0.25em;
    text-align: center;
}
button:hover {
    background-color: darkgray;
    cursor: pointer;
    text-decoration: none;
    color: #504;
    text-align: center;
}

.button a {
    background-color: #605;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-style: solid;
    border-color: white;
    color: white;
    vertical-align: middle;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    padding: 10px 20px 0px 20px;
}
.button a:hover, .button a:active {
    background-color: blue;
}
.button a:lang(ms-Arab), .button a:lang(zh-Hans), .button a:lang(zh-Hant), .button a:lang(zh-Hans_MY), .button a:lang(zh-Hant_MY) {
    padding: 10px 20px;
}
.button a:lang(ms-Rjng) {
    padding: 10px 20px 14px;
}
.button {
    text-align: center;
}
.button300 a {
    width: 300px;
}
.button300 a:lang(ms-Brgn) {
    width: unset;
    height: 300px;
}

/* Styling for loading screen */
#loadingscn {
    border: 12px solid #403;
    border-radius: 50%;
    border-top: 12px solid #fff;
    width: 100px;
    height: 100px;
    animation: rotating 1s linear infinite;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes rotating {
    100% {
        transform: rotate(360deg);
    }
}

/* Add menu formatting */
#nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    background: #605;
    z-index: 50;
}

#nav li, .undo-ul, .undo-ul>li {
	display: inline-block;
	list-style: none;
}

#nav ul {
	list-style: none;
    display: flex;
	margin: 0 auto;
	padding: 0;
}

#nav li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

#nav li a {
    display: block;
    margin: 0;
    padding: 1em 0;
    text-align: center;
    font-size: 100%;
    color: #faadfa
}

#nav li a:hover {
    text-decoration: none;
    background: #716;
}

#nav .selected {
    background: #4c0c3c;
}

.undo-ul, .undo-ul>li {
	display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lang-sel,.lang-sel>li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0 25px 0 25px;
}

.showcase-icons {
    width: 100%;
    margin: 0;
    padding: 0;
}

.showcase-icons li a {
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 10px 10px 0 0;
    border-radius: 10px;
    background: #716;
    box-shadow: 4px 4px 4px #000;
}

.showcase-icons li a:hover span {
    background: #572b6f;
}

.showcase-icons li a span {
    display: block;
    margin: 0;
    padding: 5px 10px 5px 10px;
    background: #716;
    border-radius: 0 0 10px 10px;
    font-size: 100%;
    font-weight: bold;
    color: #fbe;
}

.showcase-icons li a img {
    display: block;
    width: 164px;
    height: 164px;
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
}

.showcase-icons .more {
    float: right;
}

.showcase-icons .more a {
    border-radius: 0;
    border-width: 105px 0 105px 64px;
    padding: 0;
}

.showcase-icons .more a:hover {
    background: none;
    border-color: transparent transparent transparent #faadfa;
}

.showcase-icons li {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.showcase-modlist {
    background-position: center;
    background-size: cover;
}

.stuff_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.stuff_list li {
	display: list-item;
    flex: 1;
}

.stuff_list li h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: #faadfa;
}

.stuff_list li ul {
    margin: 10px 0 0 0;
    padding-left: 30px;
    list-style: square;
}

@media screen and (max-width: 770px) {
    main {
        width: auto;
        max-width: none;
    }
}

@media screen and (max-width: 650px) {
    .stuff_list, .stuff_list li {
        display: block;
    }
    
    .stuff_list li {
        margin-top: 10px;
    }
}

/* Styling for dropdown language selector */
.langselect {
    display: block;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 90;
}
.langselect:lang(ms-Arab) {
    left: 30px;
    right: unset;
}
.langselect:lang(ms-Brgn) {
    left: 20px;
    bottom: unset;
    right: 30px;
    width: 12px;
}

.langselect > a[role="button"] {
    display: inline-block;
    padding: 13px 5px 5px 5px;
    width: 300px;
    line-height: 1.5em;
    text-decoration: none;
    color: #ddd;
    background: #403;
    border: 2px solid #ddd;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.langselect:lang(ms-Brgn) > a[role="button"] {
    width: unset;
    height: 270px;
    padding: 20px 10px 20px 0px;
}
.langselect > a[role="button"]:hover, .langselect > a[role="button"]:focus {
    border-color: #ddd;
}

.langselect > a[role="button"]:after {
    content: "▼";
    display: inline-block;
    margin-left: 6px;
}
.langselect:lang(ms-Brgn) > a[role="button"]:after {
    content: "◀︎";
    display: inline-block;
    margin-left: unset;
    margin-top: 6px;
}

.langselect > ul {
    position: absolute;
    z-index: 999;
    display: block;
    left: -100vw;
    top: calc(2em + 16px);
    border: 1px solid #ddd;
    background: #605;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
    -moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.langselect:lang(ms-Arab) > ul {
    left: unset;
    right: -100vw;
}
.langselect:lang(ms-Brgn) > ul {
    left: unset;
    top: -100vw;
    right: calc(2em + 10px);
    width: unset;
}

.langselect > ul a {
    display: block;
    padding: 10px 5px 7px 5px;
    color: #ddd;
    text-decoration: none;
}

.langselect > ul a:hover, .langselect > ul a:focus {
    background: #400010;
}

.langselect > ul:target {
    left: 0;
}
.langselect:lang(ms-Arab) > ul:target {
    right: 0;
}
.langselect:lang(ms-Brgn) > ul:target {
    top: 0;
    left: unset;
}

.langselect > ul:target ~ a:after {
    content: "▲";
}
.langselect:lang(ms-Brgn) > ul:target ~ a:after {
    content: "▶︎";
}

.langselect a.langselect-close {
    display: none;
}

.langselect > ul:target ~ a.langselect-close {
    display: block;
    position: absolute;
    background: #403;
    left: 0;
    top: 0;
    z-index: 1000;
}
.langselect:lang(ms-Arab) > ul:target ~ a.langselect-close {
    left: unset;
    right: 0;
}
.langselect:lang(ms-Brgn) > ul:target ~ a.langselect-close {
    left: unset;
    bottom: 0;
    right: 0;
}

.langselect img {
    position: absolute;
    display: block;
    top: 12px;
    left: 12px;
    height: 24px;
    width: 24px;
}
.langselect:lang(ms-Arab) img {
    left: unset;
    right: 12px;
}
.langselect:lang(ms-Brgn) img {
    left: unset;
    right: 6px;
}

/* Styling for toggleable text block */
.togglecontent {
    max-height: 0;
    overflow: hidden;
    transition: max-height .8s cubic-bezier(0,1,0,1)
}
.togglecontent:lang(ms-Brgn) {
    max-height: unset;
    max-width: 0;
    overflow: hidden;
    transition: max-width .8s cubic-bezier(0,1,0,1)
}
.togglecontrol:checked ~ .togglecontent {
    transition-timing-function: ease-in-out;
    max-height: 1200px;
}
.togglecontrol:lang(ms-Brgn):checked ~ .togglecontent:lang(ms-Brgn) {
    transition-timing-function: ease-in-out;
    max-height: unset;
    max-width: 1200px;
}
.visualhide {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.togglelabel {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0;
    cursor: pointer;
}
.togglelabel:lang(ms-Brgn) {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0 2rem 1rem;
    cursor: pointer;
}
.togglecontent {
    margin-top: 1rem;
    padding: 0 2rem;
}
.togglecontent:lang(ms-Brgn) {
    margin-top: unset;
    margin-right: 1rem;
    padding: 2rem 0;
}
.togglecontrol:checked ~ .togglecontent {
    margin-bottom: 1rem;
}
.togglecontrol:lang(ms-Brgn):checked ~ .togglecontent:lang(ms-Brgn) {
    margin-bottom: unset;
    margin-left: 1rem;
}
.togglelabel::after {
    content: "▼";
    font-size: 0.8rem;
}
.togglelabel:lang(ms-Brgn)::after {
    content: "◀︎";
    font-size: 0.8rem;
}
.togglecontrol:checked ~ .togglelabel::after {
    content: "▲";
}
.togglecontrol:lang(ms-Brgn):checked ~ .togglelabel:lang(ms-Brgn)::after {
    content: "▶︎";
}

/* Styling for the image gallery grid */
.imagegallery {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 6vh auto;
  margin: 1em;
  max-width: 100%;
  width: 800px;
}

.imagegallery h4 {
  font-size: 30px;
  grid-column: 1/4;
}

.imagegallery a {
  cursor: zoom-in;
  transition: filter 0.2s ease-in-out;
  text-decoration: none;
}

.imagegallery a:hover {
  filter: brightness(90%);
}

.imagegallery .item strong {
  display: block;
  font-size: 1.5em;
  text-align: center;
}

/* Styling for the image lightbox for the gallery */
.imagelightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 1000;
}

.imagelightbox:target {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}

.imagelightbox img {
  border-radius: 1em;
  display: block;
  margin: auto;
  max-height: 100vh;
  max-width: 120vh;
}

.imagelightbox .close {
  color: #fff;
  font-size: 4em;
  height: 1em;
  position: fixed;
  right: 0;
  top: 0;
  width: 1em;
  z-index: 1001;
}

.imagelightbox p {
  font-size: 2em;
  text-align: center;
}

.imageitem img {
    width: 290px;
}