:root {
    --main-bg-color: #303030;
    --main-font-color: #ffffff;
    --main-disabled-color: #707070;
    --main-highlight-color: #FF007F;
    --secondary-highlight-color: #724f54;
}    

body {
    font-family: 'Libre Franklin', sans-serif ;    
    font-size: 1.5em; 
    /* background-image: url("vinyl.png"); */
    background-blend-mode: overlay;
    background-color: var(--main-bg-color);
    color:var(--main-font-color);
    vertical-align: middle;
    max-width: max-content;
    margin: auto;
}    

header {
    position: sticky;
    top: 0;
    z-index: 999;
    text-align: center;
    background: var(--main-bg-color);
    border: 1px var(--main-highlight-color);
    border-style: solid none;
}

h1 {
    font-size: 1.5em; 
}    

a {
    color: var(--main-highlight-color);
    font-weight: bold;
}    

.homepage_link {
    font-weight: normal;
}    

img {
    max-width: 100%;
}    

#wrapper {
    max-width: 600px;
    margin: 15px;
}    

.infoframe {
    font-size: 80%;
    border-left: 6px solid #fbe8b7; 
    padding: 4px 10px; 
    background-color:#724f54;
    border-radius:16px;
}    

h1,
.highlight_pink {
    color: var(--main-highlight-color);
    font-weight: bold;
}    

hr {
    color: var(--secondary-highlight-color);
}    

@font-face {
    font-display: swap;
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    src: url('LibreFranklin-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
    font-display: swap;
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 900;
    src: url('LibreFranklin-Black.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}