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

/* progress bars */

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

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

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

/* align stuff */

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

.mediaimage {
flex-shrink: 0;
}

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

/* box */

.logbox {
max-height: 490px;
padding: 6px 6px;
margin-bottom: 13px;
border: 1px dashed #F8ACBF;
background-color: #fdfdfd;
box-shadow: 3px 4px #FEDFE9;
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 #F8ACBF;
background-color: #fdfdfd;
box-shadow: 3px 4px #FEDFE9;
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);
}
}

/* scrollbar */

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

/* text stuff */
.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;
}
}