:root{
    --white-trans:oklch(100% 0 0 / 0.85);
    --black-trans:oklch(0% 0 0 / 0.85);
    --chr:0.00
}
body{
    margin:0
}
@font-face{
    font-family:Hermit-Regular;
    src:url(/font/Hermit-Regular.woff2) format("opentype")
}
@font-face{
    font-family:Charter-Regular;
    src:url(/font/Charter-Regular.woff2) format("opentype")
}
@font-face{
    font-family:Glacial-Indifference-Regular;
    src:url(/font/Glacial-Indifference-Regular.otf) format("opentype")
}
#glCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.card-container{
    column-width:14rem
}
.card{
    break-inside:avoid;
    padding:0;
    margin-bottom:1.25rem;
    border:1px solid var(--white-trans);
    background-color:var(--black-trans);
    --hue:200;
    --accent-color:oklch(75% var(--chr) var(--hue) / 0.9)
}
a:link,a:visited{
    --accent-color:oklch(75% var(--chr) var(--hue) / 0.9);
    color:var(--accent-color)
}
.card-body{
    color:var(--white-trans);
    font:1rem Glacial-Indifference-Regular,monospace;
    padding:.625rem
}
@keyframes roundtime{
    to{
        transform:scaleX(0)
    }
}
body{
    font:1rem Glacial-Indifference-Regular,monospace
}
@font-face{
    font-family:Glacial-Indifference-Regular;
    src:url(/font/Glacial-Indifference-Regular.otf) format("opentype")
}
#main-container{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:20px
}
#album-container{
    display:flex;
    flex-direction:column;
    gap:20px
}
.album-card{
    width:100%;
    max-width:300px;
    margin:0 auto;
    border:1px var(--white-trans) solid
}
.album-image{
    display:block;
    width:100%;
    height:auto
}
.album-info{
    color:var(--white-trans);
    background-color:var(--black-trans);
    padding:.625rem
}
.card{
    max-width:300px
}
@media (min-width:768px){
    #main-container{
        flex-direction:row;
        justify-content:space-between
    }
    #album-container{
        display:grid;
        grid-template-columns:repeat(4,300px);
        grid-gap:10px
    }
    .album-group{
        display:contents
    }
    .album-card{
        border:none
    }
    .album-info{
        border:1px var(--white-trans) solid
    }
    .album-info-item{
        border:none;
        padding:0;
        margin-bottom:.5rem
    }
    .album-image{
        border:1px var(--white-trans) solid
    }
}