:root {
    --main-bg-color: #914fc4;
    /* --off-bg-color: #af9ef8; */
    --off-bg-color: #a87af1;
    --off-bg-color-grad: #b898eb;
    /* --off-bg-color-grad: #ab86e5; */
    /* --off-bg-color-grad: #946bd6; */
    /* --off-bg-color-backup: #9663e7;; */

    --content-text-color: #291638;
    --content-text-color-grad: #392e42;

    
    --sidetext-text-main: var(--content-text-color);
    /* --sidetext-text-main: #482a5e; */
    --sidetext-text-internet: #efedff;
    --sidetext-text-internet-grad: #d2ccff;
    /* --sidetext-text-internet: #ba9dcf; */
    /* --sidetext-text-internet: var(--off-bg-color); */
    --sidetext-text-www: #e38adc;
    
    --camos-mnav-border: #7CC5FE;
    --camos-mnav-fill: #B1DCFE;
    --camos-mnav-text: #1c1c1c;
    --camos-mnav-console-border: #9ABADB;
    --camos-mnav-console-background: #BCD0E3;
    --camos-mnav-console-text: #333333;

    /* Audplay */
    --audio-player-text-color: #0d1420;
    /* --audio-player-text-color: var(--content-text-color); */

    --audio-player-seekbar-color: var(--off-bg-color);
    --audio-player-seekbar-color-grad: var(--off-bg-color-grad);

    --audio-player-seekbar-color-off: var(--sidetext-text-internet);
    --audio-player-seekbar-color-off-grad: var(--sidetext-text-internet-grad);

    --audio-player-seekbar-outline-color: var(--audio-player-text-color);

    /* --audio-player-seekbar- */
    /* --audio-player-seekbar-color-off: #b6bcdd;
    --audio-player-seekbar-color-off-grad: #a1aae1; */


    --link-color: #d2c5fe;
    /* --link-color-grad: #cfc1ff; */
    --link-color-grad: #a78ef9; /* Does not work for light backgrounds, need a "dark link color" */
    --dark-link-color: #32223e;
    --dark-link-color-grad: #5a436d;


    --link-color-highlight: var(--sidetext-text-internet);
    --link-color-highlight-grad: var(--sidetext-text-internet-grad);
}

body {
    background-color: var(--main-bg-color);
    background: var(--main-bg-color);
    background: linear-gradient(90deg, var(--main-bg-color) 0%, var(--off-bg-color) 100%);
}

/* ========================================================================== */
/* Main page stuff */
/* ========================================================================== */

div.mainBox {
    width: 100%; 
    max-width: 13cm;
    height: 14.4cm;
    border-bottom: 1.5mm solid var(--content-text-color);
    display: flex;
    border-radius: 1mm;
    padding-bottom: 2mm;

}

h1.mainTitle {
    text-align: center;
    writing-mode: vertical-lr;
    height: 100%;
    font-size: 38pt;
    display: inline;
    margin: 0;
    user-select: none;
    left: -2mm;
    color: var(--content-text-color);
    font-weight: 550;
}

div.mainHomeBar {
    justify-content: center;

    display: inline-flex;
    writing-mode: vertical-lr;
    height: 100%;
    font-size: 32pt;
    gap: 0.5cm;
    margin-left: 3mm;

}

div.mainHomeBarUpright {
    display: flex; 
    /* margin-top: 5mm; */
    gap: 3mm; 
    align-items: flex-start; 
    flex-wrap: wrap;
}

@media (max-width: 800px) {
    div.mainHomeBarUpright {
        justify-content: center;
    }

}

div.mainImageHolder {
    justify-content: center;
    
    display: flex;
    max-width: 9cm;
    min-width: 0;
    margin-left: 0.6cm;
    flex-grow: 0;
    flex-direction: column;
    text-align: center;
    gap: 2mm;
    font-size: 16pt;
}

img.mainImage {
    width: 100%;
    box-sizing: border-box;
    border-radius: 3mm;
    border: 1.5mm solid var(--content-text-color);
}

a.shinyLink {
    background-image: linear-gradient(90deg, var(--link-color), var(--link-color-grad));
    color: transparent;
    background-clip: text;
    box-shadow: none;
    text-shadow: none;

    /* display: in; */

    transition-property: all;
    transition-duration: 0.08s;

}

a.shinyLink.dark {
    background-image: linear-gradient(90deg, var(--dark-link-color), var(--dark-link-color-grad));
}

a.shinyLink:hover {
    background-image: linear-gradient(90deg, var(--link-color-highlight), var(--link-color-highlight-grad));

    transition-property: all;
    transition-duration: 0.08s;
}

/* Yes... for... "Furigana." */
fg:before {
	content: attr(t);
	display: block;
    font-size: 75%;
    text-align: center;
	line-height: 1;
    color: var(--content-text-color);
    /* background-image: linear-gradient(45deg, var(--off-bg-color) 0%, var(--off-bg-color-grad) 100%); */
    /* color: transparent;
    background-clip: text; */

    font-weight: 400;

}

fg {
    /* display: block; */
	display: inline-block;
	text-indent: 0px;
	line-height: normal;
    -webkit-text-emphasis: none;
	text-align: center;
	line-height: 1;
}

.fgWide{
    display: flex;
}
.fgSlim{
    display: none;
}

@media (max-width: 800px) {
    .fgWide{
        display: none;
    }
    .fgSlim{
        display: flex;
    }
    
}

a.homeBarEntry {
    text-decoration: none;
    background: linear-gradient(45deg, var(--off-bg-color) 0%, var(--off-bg-color-grad) 100%);

    color: var(--content-text-color);

    filter: drop-shadow(1.5mm 1.5mm 0.2mm rgba(0,0,0, 0.2));

    padding: 2mm;
    padding-left: 1mm;
    padding-right: 1mm;
    border-radius: 4mm;
    font-family: 'Patua One';
    font-size: 24pt;
    transition-property: all;
    transition-duration: 0.04s;
    user-select: none;

}

a.homeBarEntry.upright {
    padding: 2mm;
    padding-top: 0.5mm;
    padding-bottom: 0.5mm;
    display: inline-block;
    height: 1cm;
}

a.homeBarEntry.upright > div {
    display: inline-block;
    text-align: center;
}

a.homeBarEntry.upright > div > img {
    width: 9mm;
    padding-top: 1.5mm;
}

a.homeBarEntry:hover {
    transition-property: all;
    transition-duration: 0.08s;
    transform: rotate(8deg);
}

a.homeBarEntry > div {
    background-image: none;
    transition-property: all;
    transition-duration: 0.04s;
}

a.homeBarEntry:hover > div{
    background-image: linear-gradient(var(--sidetext-text-internet), var(--sidetext-text-internet-grad));
    color: transparent;
    background-clip: text;
    transition-property: all;
    transition-duration: 0.08s;

}

.background {
    color: #999999;
    position: fixed;
    z-index: -100;
    overflow: hidden;
    top: 0; right: 0; bottom: 0; left: 0;
}

/* ========================================================================== */
/* Text and body */
/* ========================================================================== */
b.boldInternet {
    color: #ba9dcf;
}

b.boldWww {
    color: #e38adc;
}

h1 {
    margin-top: 2mm;
    margin-bottom: 2mm;
    font-family: 'Patua One';
    filter: drop-shadow(1mm 1mm 0.2mm rgba(0,0,0, 0.2));
}

h2 {
    margin-top: 4mm;
    margin-bottom: 4mm;
    font-family: 'Patua One';
    filter: drop-shadow(0.8mm 0.8mm 0.2mm rgba(0,0,0, 0.2));
}

.shinyText {
    background-image: linear-gradient(0deg, var(--content-text-color), var(--content-text-color-grad));
    color: transparent;
    background-clip: text;
}

.shinyText.wide {
    display: unset;
}

.shinyText.slim {
    display: none;
    text-align: center;
} 

@media (max-width: 800px) {
    .shinyText.wide {
        display: none;
    }
    
    .shinyText.slim {
        display: inherit;
    }
    .shinyText {
        text-align: center;
    }
}


h3 {
    margin-top: 1mm;
    margin-bottom: 1mm;
    font-family: 'Patua One';
    filter: drop-shadow(0.6mm 0.6mm 0.2mm rgba(0,0,0, 0.2));
}
hr {
    border: 1mm solid var(--content-text-color);
    border-radius: 0.1em;
    margin-top: 1mm;
    margin-bottom: 1mm;
}
div.content {
    max-width: 25cm;
    padding-left: 1%;
    padding-top: 1%;
    font-family: "Gantari", sans-serif;
    font-size: 20pt;
    color: var(--content-text-color);

    margin: 0;
}

#sidetextCanvas{
    position: fixed;
    top: 0;
    left: 0;

}

div.copyright {
    font-style: italic;
    font-size: 12pt;
    text-align: right;
}

/* ========================================================================== */
/* Img */
/* ========================================================================== */
img.pfp {
    width: 100%;
    box-sizing: border-box;
    border: 1.5mm solid var(--content-text-color);
    border-radius: 50%;
}


/* ========================================================================== */
/* table */
/* ========================================================================== */
.flexgrid {
    display: flex;
}

.flexgrid.main {
    border-radius: 2mm;
    border-left: 2.5mm solid var(--content-text-color);
    background: var(--main-bg-color);
    background: linear-gradient(90deg, var(--main-bg-color) 0%, var(--off-bg-color-grad) 100%); 
    grid-auto-flow: row;

}

/* -- Flex PFP */
.flexgrid > div.flexPfp {
    width: 50%;
    margin-left: 8mm;
    margin-right: 0;
    min-width: 2in;
}


.commonMargin > div {
    margin: 3mm;
    padding: 1mm;
    margin-top:auto;
    margin-bottom:auto;
    
}

p {
    text-indent: 10mm;
    margin: 5mm;
}

div.aurheader {
    height: 10mm;
    margin: auto;
    flex-basis: 100;
    flex-grow: 1;
    margin-left: 1cm;
    margin-right: 1cm;
    /* flex-shrink: 0; */
    width: 1;
}

td {
    width: 0.01%;
    white-space: nowrap;
}

.subTextAlt {
    position: relative;
    left: calc(100% + 3.5mm);
    /* top: 1mm; */
    width: 24pt;
    height: 0;
    user-select: none;
    writing-mode: sideways-rl;
    white-space: nowrap;
}
.subText {
    position: absolute;
    left: calc(100% - 3mm);
    width: 24pt;
    height: 24pt;
    user-select: none;
    writing-mode: sideways-rl;
    white-space: nowrap;
}


@media (max-width: 800px) {
    .flexgrid {
      flex-direction: column;
      align-items: center;
    }
    div.aurheader {
        width: 100%;
    }
    .flexgrid > div.flexPfp{
        margin: 5mm;
    }
    /* div.aurheader {
        width: 100%;
    } */
}


/* ========================================================================== */
/* Camos Header */
/* ========================================================================== */
/* <!-- Logo --> */
.camos {
    border-radius: 2mm;
    border-left: 2.5mm solid black;

    background: url(img/camos/bg.png);
    background-size: 240px;
    animation: 100s bg infinite linear;
}
.flexgrid > div.flexCamoslogo {
    width: 40%;
}
img.camoslogo {
    filter: drop-shadow(0.1em 0.1em 0.05em rgba(0,0,0,0.3));
    width: 100%;
    max-width: 10cm;
}

/* <!-- Text --> */

/* <!-- Background --> */
/* Triangle Border */
.cborderv{
    background:url(/img/camos/bord.png) repeat-y;
    background-position: bottom;
    background-size: 80px;
    background-position: 0px;
    grid-column: 0;
    animation: 50s scroll infinite linear;
}

/* Checkered Background Animation */
@keyframes bg {
    100% {
        background-position: -1024px 1024px;
    }
}
/* Trangle Border Animation */
@keyframes scroll {
    100% {
      background-position-y: 800px;
    }
}

/* <!-- mNav --> */

.mNav {
    /* border: 3.175mm solid #b3deff; */
    /* border: 6mm solid transparent; */
    /* border-color: #b3deff; */
    
    /* #0B2447
    #19376D
    #576CBC
    #A5D7E8 */
    box-sizing: border-box;

    border-image: url(/img/camos/mnavWindowBorderShiny.png) 12 / 3.175mm stretch;
    padding: 8mm;
    background: url(/img/camos/bg3.png);
    background-size: 30cm 30cm;
    background-position: -5cm -15cm;
}

/* Checkered Background Animation */
@keyframes mnav-bg {
    100% {
        background-position: 1024px;
    }
}


.mnavBox {
    border-image: url("/img/camos/mnavWindowPanelShiny.png") 12 12 12 12 fill / 3.175mm 3.175mm 3.175mm 3.175mm;
    padding: 3.175mm;
    text-align: left;
    flex-grow: 1;
}


.mNavTitleFont {
    font-family: 'code_new_romanbold';
    color: white;
    text-shadow: 1mm 0.5mm 0mm #00000050;   
}
.mNavSubTitleFont {
    font-family: 'code_new_romanbold';
    color: lightgray;
    font-size: 14pt;
    text-shadow: 1mm 0.5mm 0mm #00000050;   
}

.mNavHeaderFont {
    color: var(--camos-mnav-text);
}

.mBoxText > h2 {
    font-size: 300pt
}

.mnavIcons {
    background:url(/img/camos/icons.png) no-repeat;
    position: absolute;
    width: 3cm;
    height: 3cm;
    right: -0.5cm;
    top: -1.3cm;
    background-position: 0;

    background-size: 3cm;
}

.mText{
    font-family: 'Nunito', sans-serif;
    color: var(--camos-mnav-console-text);
}


/* ========================================================================== */
/* un/fixing */
/* ========================================================================== */

.ufHeader{
    font-size: 14pt;
    align-self: flex-start;
}

.ufCanvas {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: -1;
    border-top-right-radius: 2mm;
    border-bottom-right-radius: 2mm;
    position: absolute;
}

.uflogo{
    width: 100%;
    pointer-events: none;
    user-select: none;
    image-rendering: pixelated;
    box-sizing: border-box;
    filter: drop-shadow(0px 0px 0.15em #000000);
    padding: 5mm;
    margin: auto;
    pointer-events: none;
}

.ufDbox{
    border: 1mm solid white;
    background-color: black;
    color: white;
    font-size: 12pt;
    position: relative;
    padding: 3.175mm;
    text-align: left;
    font-family: "cmdioreadyregular", Arial, sans-serif;
}

.ufText{
    color: white;
    font-size: 12pt;
    font-family: "cmdioreadyregular", Arial, sans-serif;
    text-shadow: #000000 0 0 3mm;
}
a.ufText { text-decoration: none; }

/* un/fixing body */

.ufBody{
    border-radius: 2mm;
    box-sizing: border-box;
    position: relative;
    flex-direction: column;
    border-left: 2.5mm solid white;
}

.ufBody.solidBg {
    background-color: black;
}

.ufBody.castleBg {
    background-color: black;
    background-image: url("/img/unfixing/castleBg.png");
    background-image: linear-gradient(120deg, #000000ff 60%, #00000000 100%), url("/img/unfixing/castleBg.png");
    background-repeat: no-repeat;
    background-position: 100% 75%;
}

@media (max-width: 800px) {
    .videoholder {
      flex-direction: column;
      align-items: center;
    }
}

.videoholder{
    display: flex;
    position: relative;
}

.videoentry{
    padding: 3.175mm;
    margin: auto;
}

.video{
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    left: auto;
    border: 1mm solid white;

}

/* ========================================================================== */
/* Music Boxes */
/* ========================================================================== */

img.albumCover {
    width: 100%;
    max-width: 8cm;
    margin: auto;
    border: 1mm solid white;
    filter: drop-shadow(1mm 1mm 0.2mm rgb(0, 0, 0, 0.2));
}

div.albumDesc {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    margin: 0;
    flex-direction: column;
    padding: 4mm;
    box-sizing: border-box;
}

.shadowBg {
    border-radius: 2mm; 
    /* padding: 10mm; */
    /* background-color: rgba(1, 1, 1, 0.5); */
    /* background-color: transparent; */
    backdrop-filter: blur(2mm) brightness(115%);
    box-shadow: 1mm 1mm 1mm rgba(0, 0, 0, 0.3);
    /* filter: drop-shadow(1mm 1mm 0.2mm rgba(0, 0, 0, 0.3)); */

}

div.albumDesc > p {
    text-indent: 0; 
    width: 100%;
    text-align: justify;
    min-width: 0;
    /* padding: 0; */
    padding: 4mm;
    margin: 0;
    margin-top: 5mm;
    /* border: 0.75mm solid white; */
    /* backdrop-filter: ; */
    /* border-radius: 5mm;  */
    /* backdrop-filter: blur(2.5mm) brightness(90%);
    filter: drop-shadow(1mm 1mm 0.2mm rgba(0, 0, 0, 0.3)); */
    
}

.flexgrid.musBox {
    border-radius: 2mm;
    border-left: 2.5mm solid var(--content-text-color);
    padding: 5mm;
    gap: 5mm;
    align-items: center;
    /* background: linear-gradient(90deg, var(--main-bg-color) 0%, var(--off-bg-color-grad) 100%);  */
    grid-auto-flow: row;

}

@media (max-width: 800px) {
    div.albumDesc {
        min-width: 0; 
        max-width: none;
        /* margin: 0; */
        width: 100%;    
    }
    .flexgrid.musBox {
        gap: 2.5mm;

    }
}

.flexgrid.musBox > .audplayHolder {
    min-width: 0; 
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 4mm;
    /* flex-basis: 0; */
    flex: 1 1 0;
    box-sizing: border-box;

    /* height: 100%; */
    /* align-items: end;
    align-items: flex-start; */
}

.flexgrid.musBox.stw {
    background: #4C7C93;
    background-image: url(/img/music/stw/converbg_full.jpg);
    background-size: 50cm;
    background-position: 100% 10%;
    background-repeat: no-repeat;
    border-color: #123244;

    --audio-player-text-color: #000000;
    color: var(--audio-player-text-color);

    font-family: 'Times New Roman', Times, serif;

}

/* Me when I */
.flexgrid.musBox.stw > .audplayHolder > div.audplay > .title, 
.flexgrid.musBox.stw > .audplayHolder > div.audplay > .songholder {
    font-variant: small-caps;
}

/* div.uf > .audplayHolder {
    font-family: "cmdioreadyregular", Arial, sans-serif;
    font-size: 10pt;

} */

.flexgrid.musBox.uf {
    background: #000000;
    background-image: url(/img/music/unfixing/bg2.jpg);
    background-size: 45cm;
    background-position: 50% 70%;

    background-repeat: no-repeat;
    text-align: justify;

    border-color: #000000;



    --audio-player-text-color: #FFFFFF;
    color: var(--audio-player-text-color);

}

.flexgrid.musBox.uf > div.albumDesc {
    font-size: 10pt;
    font-family: "cmdioreadyregular", Arial, sans-serif;

}

.flexgrid.musBox.uf > b {
    font-size: 12pt;
    font-family: "cmdioreadyregular", Arial, sans-serif;
    font-weight: 00;
}


.flexgrid.musBox.excellent {

    --audio-player-text-color: #181716;

    /* text-shadow: 0mm 0mm 1mm black; */
    color: var(--audio-player-text-color);

    background: #4C7C93;
    background-image: url(/img/music/excellent/bg1.jpg);
    background-size: 50cm;
    background-position: 90% 20%;
    background-repeat: no-repeat;
    border-color: #3b3936;

}