@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;600&display=swap');
@media(prefers-color-scheme:dark){
    body,a,a:visited{
        background:#303030;
        color:#f9f9f9;
    }
    div.gridbg{
        background:#272727;
    }
    div.red{
        background:hsl(354, 52%, 41%);
    }
    div.orange{
        background:hsl(25, 52%, 41%);
    }
    div.yellow{
        background:hsl(51, 52%, 41%);
    }
    div.green{
        background:hsl(136, 52%, 41%);
    }
    div.misskey{
        background:hsl(75, 100%, 35%);
    }
    div.blue{
        background:hsl(207, 52%, 41%);
    }
    div.indigo{
        background:hsl(236, 52%, 41%);
    }
    div.violet{
        background:hsl(279, 52%, 41%);
    }
    div.gray{
        background:hsl(0, 0%, 41%);
    }
}
@media(prefers-color-scheme:light){
    body,a,a:visited{
        background:#f9f9f9;
        color:#171717;
    }
    div.gridbg{
        background:#f0f0f0;
    }
    div.red{
        background:hsl(354, 97%, 77%);
    }
    div.orange{
        background:hsl(25, 97%, 77%);
    }
    div.yellow{
        background:hsl(51, 97%, 77%);
    }
    div.green{
        background:hsl(136, 97%, 77%);
    }
    div.misskey{
        background:hsl(75, 100%, 35%);
    }
    div.blue{
        background:hsl(207, 97%, 77%);
    }
    div.indigo{
        background:hsl(236, 97%, 77%);
    }
    div.violet{
        background:hsl(279, 97%, 77%);
    }
    div.gray{
        background:hsl(0, 0%, 77%);
    }
}
*{
    transition:color .5s,background .5s;
}
body{
    font-family:"Noto Sans JP",sans-serif;
    margin:50px auto;
    width:min(80vw,1200px);
    font-size:22px;
}
h1{
    font-weight:200;
    font-size:2.3em;
    margin:0;
}
h2{
    font-weight:400;
    font-size:1.8em;
    text-align:center;
    padding:10px;
    border-bottom:3px solid;
}
h3{
    font-weight:300;
    font-size:1.4em;
    margin:0.1em 0;
}
div.albumgrid{
    transition:.5s cubic-bezier(0.08, 0.59, 0.45, 0.94);
    justify-content:center;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,300px);
    grid-template-rows:repeat(auto-fill,300px);
    grid-gap:5px;
}
div.songgrid,div.linkgrid{
    justify-content:center;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,300px);
    grid-template-rows:repeat(auto-fill,100px);
    grid-gap:5px;
}
a.griditem{
    position:relative;
    display:flex;
    align-items:center;
}
a.griditem img,a.griditem div{
    border-radius:3px;
}
a.griditem img{
    transition:.5s cubic-bezier(0.08, 0.59, 0.45, 0.94);
    width:300px;
    height:300px;
}
a.griditem:hover img{
    opacity:0.3;
    filter:blur(5px);
    width:310px;
    height:310px;
    margin:-5px;
}
a,a:visited{
    text-decoration:none;
}
a:not(.griditem):hover{
    color:#909090;
}
a.griditem p{
    opacity:0;
    transition:.5s cubic-bezier(0.08, 0.59, 0.45, 0.94);
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    margin:auto;
    width:90%;
    overflow-wrap:anywhere;
    font-size:0.9em;
    letter-spacing:1.5px;
}
a.griditem:hover p{
    font-size:1em;
    letter-spacing:0;
    opacity:1;
}
div.gridbg{
    transition:.5s cubic-bezier(0.08, 0.59, 0.45, 0.94);
    display:inline-block;
    width:280px;
    height:90px;
    padding:5px 10px;
}
a:hover div.gridbg{
    opacity:0.3;
    width:290px;
    height:100px;
    margin:-5px;
    filter:blur(5px)
}
div.gridbg p{
    opacity:1;
    transition:none;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    text-align:left;
    margin:auto;
    padding:5%;
    overflow-wrap:anywhere;
    font-size:1em;
    letter-spacing:0;
}










@keyframes shake{
    from,50%,to{
        transform:none;
    }
    25%{
        transform:translateX(-2px);
    }
    75%{
        transform:translateX(2px);
    }
}
.shake{
    animation:shake .15s linear infinite;
}