:root{
	--font: "DejaVu Serif", serif;
}


body {
	display: flex;
	justify-content: center;
background-image: url("/assets/background.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

content {
font-family: var(--font);
text-align: center;
width: 65%;
min-width: 340px;
}

heading {
	width: 100%;
	display: flex;
	flex-direction: column;
}

a{
text-decoration: none;
color: black;
font-size: 23px;
}

a:hover{
color: gray;
}

a.current{
color:rgba(39,104,124,100);
}

h2{
font-size: 25px;
letter-spacing: 0.07em;
line-height: 21px;
}

h3{
font-size: 20px;
letter-spacing: 0.07em;
line-height: 21px;
}

p{
font-size: 18px;
letter-spacing: 0.01em;
line-height: 21px;
text-align: justify;
}

img{
max-width: 96%;
max-height: 100%;
object-fit: cover;
}

bar{
display: flex;
justify-content: flex-end;
}

index{
display: flex;
justify-content: space-evenly;
padding-top: 1.5rem;
width: 100%;
}

index > a{
padding-right: 6px;
padding-left: 6px;
font-family: var(--font);
}

top{
display: flex;
justify-content: center;
padding-top: 1rem;
}

cont-her {
}

hero {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50%, 340px));
	padding-top: 3rem;
}

hero > txt{
display: flex;
justify-content: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

cont-img > img{
filter: grayscale() brightness(1.8);
margin-top: 14px;
}

txt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

work > * > a{
text-decoration: 2px overline underline;
}

work{
max-width: 1000px;
padding-right: 0.5rem;
padding-left: 0.5rem;
}

media{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

media > img{
padding-top: 1rem;
}

iframe{
width: 100%;
min-width: 340px;
aspect-ratio: 16/9;
filter: grayscale();
}

works{
display: flex;
flex-direction: column;
align-items: center;
}

list{
display: grid;
row-gap: 30px;
}

list > * {
	display: flex;
	flex-direction: column;
	align-items: center;
}

entry > *{
padding-right: 1rem;
padding-left: 1rem;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
}

entry.click:hover{
cursor: pointer;
background-color: rgba(230,230,230,0.6);
}

img.click:hover{
cursor: pointer;
}

.score {
	background-color: rgba(230,230,230,0.5);
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 26px;
}

#sketch {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}