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

.progwrapper {
width: 170px;
max-width: calc(100% - 10px);
margin: 0 auto;
}

.progressbar {
width: 100%;
border:1px dashed #b6ad8b;
height: 12px;
border-radius: 4px;
position: relative;
overflow: hidden;
box-sizing: border-box; 
}

.progressbarfill {
height: 12px;
background: linear-gradient(#9D9167, #3a3830);
filter: blur(1px);
position: absolute;
opacity: .6;
mix-blend-mode: multiply;
}

.mediacontainer {
display: flex;
gap: 15px;
align-items: flex-start;
}

.mediaimage {
flex-shrink: 0;
}

.mediacontent {
flex: 1;
min-width: 0; 
max-width: 300px;
}

.logbox {
max-height: 519px;
padding: 6px 6px;
margin-bottom: 13px;
border:1px dashed #9D9167;
background-color: #fffef8;
box-shadow: 2px 3px #b6ad8b;
border-radius: 5px;
overflow-y: auto;
overflow-x: hidden;
cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;
}

.morebox {
max-height: 370px;
padding: 6px 6px;
margin-bottom: 13px;
border:1px dashed #9D9167;
background-color: #fffef8;
box-shadow: 2px 3px #b6ad8b;
border-radius: 5px;
overflow-y: auto;
overflow-x: hidden;
cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;
}

.rotate {
animation: rotation 15s infinite linear;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

::-webkit-scrollbar-thumb {
background-color: #fff; border-radius:5px;
border:1px solid #9D9167;}
::-webkit-scrollbar {
width: 7px; height: 0px; 
background: transparent;}

.h1 {
font: 10px basiic;
color: #833d3d;
letter-spacing: 1px;
line-height: 12px;
margin-bottom: 5px;
}

.h2 {
font: 10px basiic;
color: #833d3d;
text-align: center;
letter-spacing: 1px;
line-height: 12px;
margin-bottom: 5px;
}

@media (max-width: 480px) {
.media-container {
flex-direction: column;
}
}

html.darkmode .logbox,
html.darkmode .morebox {
  background-color: #494434;
  border-color: #3d3b1e;
  box-shadow: 2px 2px #36330b, 2px 3px #36330b;
  color: #c2cabe;
}

html.darkmode .h1,
html.darkmode .h2 {
  color: #d8bdb6;
}

html.darkmode .progressbar {
  border-color: #3d3b1e;
}

html.darkmode .progressbarfill {
  background: linear-gradient(to right, rgb(109, 58, 28), rgb(87, 69, 42));
}