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);
}

::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 > ::marker {
	content: counter(list-item, cjk-ideographic) "\ff0e";
}

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

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

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

img.emoji, img.emojione, img.gemoji {
	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;
}

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

.titleBar {
    background-color: #679dd74d;
    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.3em;
    box-shadow: 0.3em 0.3em 0 #00000030;
    transition: 0.3s;
    font-size: 20pt;
    width: 12.5%;
    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; */
    padding: 1em;
    min-height: calc(100vh - 2em);
    padding-bottom: 20em;
}

.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 {
    height: 20em;
    position: fixed;
    bottom:0em;
    right:0;
    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: 5em;
        margin: 0em 0em;
    }
    .input {
        width: calc(100% - 1.2em)
    }
    #mascot {
        height: 10em;
    }

    #content {
        padding-bottom: 10em;
    }
}

h1 {
    color: black;
    text-align: center;
    font-variant: small-caps;
}

li {
    font-size: large;
}

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

p {
    font-size: large;
}