/*
how peculiar of us to meet here...
hehe, hello! i see you're checking out the css of my page.
you are very welcome to take inspiration or learn from my code.
but please, please do not repost it or redistribute it anywhere else.
i'd rather you change it up to fit your page and then credit me for inspiration
*/

* {
    cursor: url('images/cursor.gif') 0 0, auto !important;
}

@font-face {
    font-family: 'basiic';
    src: url(fonts/basiic.ttf);
}

a {
  color: #EDEBEB;
}

body {
    background-image: url('images/background.gif');
    background-color: black;
    font-family: 'MS UI Gothic';
    color: #EDEBEB;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* main content */
#container {
    width: 1100px;
    max-width: 100%;
    background-color: #0a0a0a;
    border: 4px ridge #8F1818;
    outline: 2px black;
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 80px;
}

/* header and marquee */
.rubrik {
    width: 100%;
    height: 350px;
    background-color: #0a0a0a;
    background-image: url(images/banner.png);
    background-size: cover;
    background-position: center;
    border: 2px solid #000;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.markis-box {
    width: 100%;
    background-color: #1a0000;
    border-radius: 12px;
    border: ridge 4px #8F1818;
    padding: 5px;
    margin-bottom: 10px;
    font-weight: normal;
    color: #d1d1d1;
    text-shadow: 0 0 5px #ff0000;
    box-sizing: border-box;
    letter-spacing: 2px;
}

/* the code that makes the page 3 columns */
#huvuddel {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
}

/* width of columns */
.vnstr-kolumn {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mitt-kolumn {
    flex-grow: 1;
}

.hgr-kolumn {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* box designs */

/* standard design */

.box {
    background-color: #0a0a0a;
    border: 4px ridge #8F1818;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-family: 'basiic';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* specific designs */

.mattknapp {
    width: 150px;
    border-radius: 4px;
    background-image: linear-gradient(180deg, #1a1a1a 0%, #300000 100%); 
    border: 1px solid #8F1818;
    height: 12px;
    font-size: 14px;
    color: #d1d1d1;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    filter: drop-shadow(0px 0px 2px #000);
    vertical-align: middle;
    line-height: 7px;
    text-decoration: none;
    display: inline-block;
}

.underrubrik {
    width: 150px;
    border: 3px solid #8F1818;
    border-radius: 4px;
    background-image: linear-gradient(#8F1818, #D12C2C 50%, #8F1818 50%, #D12C2C);
    height: 12px;
    font-size: 14px;
    color: white;
    padding: 5px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    vertical-align: middle;
    line-height: 11px;
    text-decoration: none;
    display: inline-block
}

.divider-1 {
    background-image: url(images/lace.png), url(images/laceh.png);;
    background-position: top center, bottom center;;
    background-repeat: repeat-x;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-top: 10px;
    border: 2px ridge #8F1818;
}

/* scrolling areas */

.scroll-area-frimärke {
    display: flex;
    line-height: 2;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.scroll-area-frimärke img {
    width: calc(50% - 10px);
    height: auto;
    object-fit: contain;
}

.scroll-area-blinkies {
    display: block;
    line-height: 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
}

.scroll-area-blinkies img {
    margin: 2px; 
    display: inline-block;
    vertical-align: top;
}

.scroll-area-changelog {
    display: block;
    line-height: 1.5;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding-right: 10px;
}

/* scrollbar stuff */

.scroll-area-frimärke::-webkit-scrollbar,
.scroll-area-blinkies::-webkit-scrollbar,
.scroll-area-changelog::-webkit-scrollbar {
    height: 8px;
}

.scroll-area-frimärke::-webkit-scrollbar-track,
.scroll-area-blinkies::-webkit-scrollbar-track,
.scroll-area-changelog::-webkit-scrollbar-track {
    background: #0a0a0a;
}
.scroll-area-frimärke::-webkit-scrollbar-thumb,
.scroll-area-blinkies::-webkit-scrollbar-thumb,
.scroll-area-changelog::-webkit-scrollbar-thumb {
background: #8F1818;
    border-radius: 4px;
}
.scroll-area-frimärke,
.scroll-area-blinkies,
.scroll-area-changelog {
    scrollbar-width: thin;
    scrollbar-color: #8F1818 #0a0a0a;
}

/* status cafe */
#statuscafe {
    padding: .5em;
    background-color: #1a0000;
    border: 1px ridge #8F1818;
    border-radius: 5px;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* flashing lights warning */

.blinkie-spoiler summary {
    background-color: #8F1818;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    list-style: none;
    font-weight: bold;
    outline: none;
    user-select: none;
}

.blinkie-spoiler summary:hover {
    background-color: #a81c1c;
}

.blinkie-spoiler[open] .scroll-area-blinkies {
    margin-top: 15px;
}

.blinkie-spoiler summary::-webkit-details-marker {
    display: none;
}

/* decoration */

#kors {
    width: 20px;
    position: absolute;
    margin-top: -32px;
    margin-left: -22px;
    transform: rotate(-12deg);
}

#kors2 {
    width: 20px;
    position: absolute;
    margin-top: -32px;
    margin-left: 162px;
    transform: rotate(12deg);
}

#kors3 {
    width: 20px;
    position: absolute;
    margin-top: 215px;
    margin-left: -22px;
    transform: rotate(-152deg);
}

#kors4 {
    width: 20px;
    position: absolute;
    margin-top: 215px;
    margin-left: 162px;
    transform: rotate(152deg);
}

/* music player css made by monsieurdoll and edited slightly by urexill. PLWASE do not copy this and actually go to the original version by monsieurdoll */

#musicplayer{ 
    font-family: 'basiic';
    font-weight: bold;
    height: 30px;
    width: 100%;
    left: 0;
    bottom: 0;
    position: fixed;
    margin-top: 20px;  
    display: flex;
    background: linear-gradient(#8F1818, #D12C2C 50%, #8F1818 50%, #D12C2C);  
    border: 3px solid #8F1818;  
}
 
.songtitle{ 
    display: block;
    padding: 2px; /* padding around song title */
    font-family: 'MS UI Gothic';
    margin-top: 4px;
    margin-right: 5px; 
    font-size: 15px;
    color: #EDEBEB;
    letter-spacing: 1px; 
    background: #1a0000;/* background of song title */
    border: #0a0000 inset 1px;
    border-radius:6px;
    box-shadow: inset 13px 0px 6px -10px rgb(66 0 0 / 20%), inset -13px 0px 6px -10px rgb(66 0 0 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 0 0 / 38%);
}
 
.controls{
    font-size: 12px; /* size of controls */
    text-align: center;
    width: 100px;
    height: 20px;
    text-decortation: none;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white);
}
 
.controls td{
    padding-top:5px; /* padding around controls */
}
 
.seeking{
    width: 75%;
    background: transparent;/* background color of seeking bar */
    display: flex;
    justify-content: space-evenly;
    padding: 7px; /* padding around seeking bar */
       
    }
 
.current-time{  
    padding-right:5px;
    margin-right: 3px; 
    color: #EDEBEB;
       
}
 
.total-duration{
    padding-left: 5px;
    color: #EDEBEB;
}

.ctrlimg {
    height: 16px;
    width: 16px;
}

.ctrlimg:hover{
    cursor:help;
}
    
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
    
input[type=range]:focus {
    outline: none;
}
    
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px; /* thickness of seeking track */
    cursor: help;
    border-radius: 6px;
    background: #EDEBEB; /* color of seeking track */
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: help;
    border-radius: 6px;
    background: #EDEBEB;
}

input[type=range]::-webkit-slider-thumb {
    height: 30px; /* height of seeking square */
    width: 20px; /* width of seeking square */
    background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
    background-size: 25px;
    -webkit-appearance: none;
    margin-top: -10px;
}
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
    filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
}
    
input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
}
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    

/* fanlist filter */
.fanlist {
    filter: sepia(50%)
}

    .fanlist:hover {
        filter: none;
}



/* footer */
.footer {
    text-align: center;
}