html {
  background-image: url("../image/bg.jpg");
  background-size: 100% auto;
  background-color: #d8d3cf;
font-family: IMFellDWPica; 
}

nav {
position:relative;
text-align:center;
display:flex;
  max-width:1100px;
  margin:2vw auto 0 auto;
}

nav a, nav a:visited {
border:clamp(1px, 0.7vw, 8px) solid black;
font-size: clamp(5px, 3vw, 30px);
padding: clamp(1px, 1.2vw, 12px)  clamp(1px, 3vw, 30px);
line-height: clamp(5px, 10vw, 105px);
color:#493028;
text-decoration: unset;
  font-weight:bold;
}
nav a:hover, nav a:visited:hover {
background-color:linen;
border-radius:7px;
}

#border1, #border2, #border3 {
display:inline;
  flex:1;
}

#border1 a { border-image: url("..//image/button1.PNG") 20; }
#border2 a { border-image: url("..//image/button2.PNG") 20; }
#border3 a { border-image: url("..//image/button3.PNG") 20; }


main, .work1, .work2, .work3 {
position:relative;
top:1vw;
display:flex;
justify-content: center;
}
.work2 { text-align:right; }
.work2 hr { margin-left:auto; margin-right:0; }
.writeup, .piece img {
display:inline;
}
.writeup {
  color: #493028;
  min-width:100px;
  width: 38vw;
  max-width: 450px;
  margin: 0 1vw;
}
h1{ 
font-size: clamp(5px, 4.6vw, 48px); 
background-color:linen;
  border-radius:0.4vw;
display:inline-block;
}
p { font-size: clamp(5px, 3vw, 30px); }
p a {
  font-weight:bold;
  color: #b14427;
}
p a:hover {
  background-color:linen;
  border-radius:0.3vw;
}
.piece p { 
  text-align:center;
  font-size: clamp(5px, 2vw, 20px);
  margin:0; 
  position:relative;
  top:-1vw;
}
.piece img {
max-width:650px;
border:clamp(1px, 1vw, 17px) solid black;
border-image: url("../image/frame3.PNG") 70;
margin-bottom:2.3vw;
  max-height:76vh;
}
.piece img:hover{
background-color:linen;
  mix-blend-mode: color-burn;
cursor: zoom-in;
}
.work3 img { 
  display:inline;
width:45vw;
max-width:550px; 
}
hr {
border:none;
border-top: 3px dotted #725045;
  opacity:100;
width: 90%;
margin-left: 0;
}

.leftarrow, .rightarrow {
position:fixed;
bottom:2vw;
  width:20vw;
  height:20vw;
  max-width:130px;
  max-height:130px;
  background-size: 100% 100%;
  z-index:9;
}
.leftarrow { 
left:2vw; 
background-image: url('../image/left.png');
}
.rightarrow { 
right:2vw;
background-image: url('../image/right.png');
}
.leftarrow:hover , .rightarrow:hover {
  mix-blend-mode: color-burn;
}

@font-face { 
font-family: IMFellDWPica; 
src: url('../image/IMFellDWPica.woff'); 
} 

@media (max-width: 900px) {
html { overflow-x:hidden; }
.piece img {
  width:60vw;
  max-height:unset;
}
}