shii.moe

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url('https://pro.fontawesome.com/releases/v5.15.0/css/all.css');

:root {
    --fa: "Font Awesome 5 Pro", "Font Awesome 5 Brands";
    --monospace: monospace, var(--fa);
    --serif: 'Lora', serif, var(--fa);

    --mascot-height: 28rem;
    --mascot-max-width: 30rem;
    --mascot-height-mobile: 16rem;

    --bg-colour: #badff;
    --hue: 0deg;
}

::selection {
    background: pink; /* WebKit/Blink Browsers */
    color: white;
}
::-moz-selection {
    background: pink; /* Gecko Browsers */
    color: white;
}

/*
ol > ::marker {
	content: "\2116" counter(list-item) ". ";
	font-variant-numeric: oldstyle-nums;
}
*/
ol {
	list-style-type: cjk-ideographic;
}
ol > ::marker {
	content: counter(list-item, cjk-ideographic) "\ff0e";
}

html, body {
    padding: 0;
    margin: 0;
    min-height: 100%;
}

body {
    color: black;
    background: var(--bg-colour);
    background-image: url('/background-300x300.png');
    background-blend-mode: luminosity;
    background-size: 10em;
    background-repeat: repeat;
    font-family: var(--serif);
    background-attachment: fixed;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

a.link {
	display: inline-block;
	transition: all .1s ease;
}

a.link:hover {
	transform: skewX(-7deg);
}

hr {
	background: none;
	border: none;
	border-top: 2pt dashed #8dacca52;
}

img.emoji, img.emojione, img.gemoji, img.twemoji {
	display: inline;
	padding: 0;
	margin: 0;
	height: 1.3em;
	vertical-align: top;
	border: none;
	filter: none;
}

code {
	background: #00000012;
    border: 1px solid #00000029;
    border-radius: 2pt;
    padding: 0 2pt;
}
pre { width: 100%; }
pre code {
	padding: 1em;
	display: block;
}

blockquote {
    margin: 0.5em 0;
    border-left: 5pt solid #0002;
    padding: 0.4em 1.6em;
    color: #000a
}

blockquote cite {
    display: block;
    margin-left: 1em;
    color: #0008
}

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

blockquote > *:last-child {
    margin-bottom: 0;
}

#content > a:first-child {
	text-decoration: none;
}

.titleBar {
    background-color: #679dd74d;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 5pt;
    box-shadow: 0 4pt 22pt #0000003b;
    border: 1pt solid #87b1dd;
    margin-left: 5em;
    margin-right: 5em;
    margin-bottom: 2em;
    text-align: center;
    padding-top: 0.75em;
    padding-bottom: 0.90em;
    display: block;
}

.titleButton {
    text-decoration: none;
    background-color: #acb9f8;
    display: inline-block;
    margin: 0.3em 0.3em;
    padding: 0.12em 0;
    box-shadow: 0.3em 0.3em 0 #00000030;
    transition: 0.3s;
    font-size: 20pt;
	text-align: center;
    width: 15%;
    font-weight: bold;
    font-variant: small-caps;
}
.titleButton:hover {
    box-shadow: 0.4em 0.4em 3pt #00000030;
}
.titleButton a {
    text-decoration: inherit;
}

.image-card {
    width: 100%;
    margin-top:2em;
    box-shadow: 0pt 5pt 20pt #0006;
    border: 1pt solid #eee;
    border-radius: 7pt;
}


#content {
    /* background-color: #f7d4ff80; */
    filter: hue-rotate(var(--hue));
    padding: 1em;
    padding-bottom: var(--mascot-height);
}

#content img {
	filter: hue-rotate(calc(-1 * var(--hue)));
}

.guitarCentre {
    overflow: auto;
}

.guitarAudio {
    display: block;
    text-align: center;
    margin-bottom: 2em;
}

.guitarPicture {
    width:30em;
    float: right;
    margin-left: 2em;
    border: 2pt solid #0006;
    border-radius: 7pt;
}

.audio {
    margin-top: 2em;
}

#mascot {
	opacity: 0;  /* before load */
    max-height: var(--mascot-height);
    max-width: var(--mascot-max-width);
    position: fixed;
    bottom: 0;
    right: 0;
    transition: all .15s ease;
    opacity: .85;
}


@media only screen and (max-width: 724px) {
    .guitarText {
        font-family: var(--serif);
        padding-right: 1em;
        padding-left: 1em;
    }

    .guitarPicture {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0em;
        float: none;
        max-width: calc(100% - 4pt);
    }

    .titleButton {
        width: 50%
    }

    .pdf {
        height: 300pt;
    }

    .comment-input {
        height: 9em;
        margin: 0em 0em;
    }
    form[action="/postcomment"] {
	text-align: right;
    }
    .input {
	box-sizing: border-box;
	display: block;
        width: 100%;
    }
    input[type="submit"] {
	border-radius: 3pt;
	border: 1px solid #0003;
	transform: none;
    }
    #mascot {
        height: var(--mascot-height-mobile);
    }

    #content {
        padding-bottom: var(--mascot-height-mobile);
    }
}

h1 {
    color: black;
    text-align: center;
    font-variant: small-caps;
	filter: drop-shadow(0px 0px 3px #0002);
    text-shadow: 1.3pt 1.3pt #6800ff52;
}

li {
    font-size: large;
}

a {
    text-decoration: underline;
    color: inherit;
}

p {
    font-size: large;
}