blessfrey-bottle/src/static/css/all.css

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 14, 2022 */
@font-face {
    font-family: 'mitochondriaregular';
    src: url('/static/font/mitochondria-webfont.woff2') format('woff2'),
         url('/static/font/mitochondria-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pf_ronda_sevenregular';
    src: url('/static/font/pf_ronda_seven-webfont.woff2') format('woff2'),
         url('/static/font/pf_ronda_seven-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pf_ronda_sevenbold';
    src: url('/static/font/pf_ronda_seven_bold-webfont.woff2') format('woff2'),
         url('/static/font/pf_ronda_seven_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    padding:0;
    margin:0;
    font-family: 'pf_ronda_sevenregular', sans-serif;
    font-size: 1em;
}
html, body {
    padding:0; 
    margin:0; 
    height:100%;
    background-image: linear-gradient(#060114, #0F0233);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
footer {
    position: fixed; 
    bottom: 0; 
    left: 0;
    right: 0;
    width: 100%;
    background-color: transparent;
}

a, a:link, a:visited, a:hover, a:active, b, p {
    text-decoration: none;
    background-color: transparent; 
}
s {
    background-color: transparent; 
}
a:link, a:visited {
    color: #305285;
}
a:hover, a:active {
    color: #9092ca; 
}
p {
    text-indent: 2em;
}
ul,ol {
    list-style-type: none;
    list-style-position: inside;
    background-color: transparent;
    margin-bottom: 1.5em;
}
li {
    padding-left: 2em;
    background-color: transparent;
}
h1,h2,h3,h4,img,i {
    background-color: transparent;
}
h1 {
    font-family: 'mitochondriaregular', sans-serif;
    font-size: 1.2em;
}
h1 a,h1 a:visited,h1 a:hover,h1 a:active {
    font-family: 'mitochondriaregular', sans-serif;
}
h2 a:hover,h2 a:active {
    font-family: 'mitochondriaregular', sans-serif;
}
h2 {
    font-size: 1.1em;
}
hr {
    background-color: transparent;
    margin-top: 2em;
    margin-bottom: 2em;
}
p {
    line-height: 2em;
    margin-bottom: 1.5em;
}
::-moz-selection { /* Code for Firefox */
  background: #c76199;
}

::selection {
  background: #c76199;
}
.mundane {color:#aca79e;}
.common {color:#5576d1;}
.unusual {color:#9873AC;}
.rare {color:#EBBC4E;}
.unique {color:#00a86b;}
.center { 
    width: 80%;
    padding: 2em;
    margin: auto;
    color: white;
}
pre,code {
    font-size: 0.95em;
    line-height: 1.7em;
    /*font-family: monospace;*/
    margin-top: 1.5em;
    margin-bottom: 1.3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.35em;
}
img {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.verse {
    background-color: transparent;
}

.grid {
    height: max(100vh,auto);
    width: 100vw;
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 3.5em auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    box-sizing: border-box;
}

.top {
    grid-area: 1 / 1 / 2 / 2; 
    color: #C0AAC0;
    text-align: center;
    font-size: clamp(0.8rem, 5vw, 1.5rem);
    text-overflow: hidden;
    white-space: nowrap; 
    display: flex;
    justify-content: center;
    align-items: center; 
}
.top a {
    color: #C0AAC0;
    font-family: 'mitochondriaregular', sans-serif;
    font-size: .73em;
    font-weight: bold;
}
.top a:hover {
    color: #A88AA8;
    font-weight: bold;
}
.top a:visited {
    color: #C0AAC0;
    font-weight: bold;
}

.content-grid { 
    grid-area: 2 / 1 / 3 / 2; 
    min-height: 60vh;
    min-width: 50vw;
    padding-bottom: 33%;
}
.footer-grid {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 76% 24%
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    background-color: transparent;
    width: 100vw;
    min-width: 636px;
}
.nav { 
    grid-area: 1 / 1 / 2 / 2;
    background-color: transparent;
    display: grid;
    grid-template-columns: 26% 51% 23%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    margin: auto;
    width: 40vw;
    min-width: 374px;
}