@font-face {
font-family: "FiraSans";
src: url("../fonts/FiraSans-Regular.ttf");
}

* {
  margin:0;padding:0;
  box-sizing:border-box;
}
body {
font-family:"FiraSans", "Noto Sans", "Roboto", sans-serif;
}

#left {
width: 25vw;
height:100vh;
position:absolute;
top:0;left:0;
  color:#000;
  overflow:hidden;
  background-image: url("../img/wallhaven-4vkvzp-b.jpg");
  background-color: #031015;
  background-size: 100vw 100vh;
}
#left:hover {
  overflow:auto;
}

#left header {
height:100px;
color:#fff;
text-align:center;
padding-top:20px;
}

#left >div {
border: 1px solid #000;
min-height:10vh;
padding:20px;
padding-bottom:40px;
font-size: 13px;
margin: 20px;
background:#fff;
border-radius:10px;
cursor:pointer;
position:relative;
box-shadow: 0 3px 6px #000;
}

#left >div time {
position:absolute;
bottom:5px;
left:10px;
color:#666;
font-style: oblique;
font-size: 4px;
}

#left >div::after {
content:"";
position:absolute;
width:10px;
height:100%;
background:#ddd;
top:0;
right:0;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
transition: background .2s;
}

#left >div:hover::after {
background:#666;
}

#left #currentsel::after {
background:#666;
}

#left a {
color:#000;
text-decoration:none;
}

#right {
width: 75vw;
height:100vh;
position:absolute;
top:0;right:0;
background:#fff;
border: 0 none;
}

h1 {
margin-bottom:3px;
font-size:calc(16px + 0.5vh);
}

h2 {
color:#666;
font-size: 10px;
}