html {
background-image: url('../image/flowerbackgroundrepeattexture.jpg');
background-size: 15vw;
}

header, #header {
max-width:1021px;
}

.link1 {
  filter: unset;
}

main { 
display:flex; 
flex-direction: row-reverse;
background-color:antiquewhite;
border-radius:2vw;
width: clamp(1px, 90vw, 1400px);
margin:0 auto 2vw auto;
}

.textsidew, table, .textsidet {
font-family: Acme;
text-align:center;
margin:auto 0 auto 0;
color: #303247;
font-size: clamp(1px, 1.7vw, 25px);
width:30%;
}

.textsidet {
width:50%;
}

.textsidew strong, .textsidet strong {
margin-right:0.2vw;
background-color: #EA81D5;
border-radius:3px;
padding:0.1vw;
margin:0.1vw;
}

.textsidew a, .textsidet a, #footer a {
color: #766DA2;
font-weight: strong;
}
.textsidew a:hover, .textsidet a:hover, #footer a:hover {
background-color: #EA81D5;
border-radius:3px;
color: #303247;
}

.textsidew table, .textsidet table  {
width:70%;
margin:0 auto 0 auto;
border-bottom: 3px dotted #303247;
}

td {padding: 0.5vw; }

table hr, .textsidet hr { border:none; border-bottom:3px dotted #EA81D5; }
.textsidet hr { width: 50%; }

.fullsizew {
width:70%;
}
.fullsizet {
width:50%;
}
.fullsizew img, .fullsizet img {
cursor:zoom-in;
margin: 1.5vw auto 1.5vw auto;
border:2px solid #303247;
border-radius:1vw;
width: 90%;
}
.fullsizew img:hover, .fullsizet img:hover {
cursor:zoom-in;
border-color:#EA81D5;
border-style:dashed;
}

.nxt, .prev {
background-image: url('../image/button.png');
width: clamp(1px, 8vw, 150px);
height: clamp(1px, 8vw, 150px);
line-height:clamp(1px, 8vw, 150px);
top:80vh;
position: fixed;
text-align:center;
overflow:hidden;
background-size:100% 100%;
color: #303247;
font-size:clamp(1px, 8vw, 60px);
z-index:11;
}
.prev { left: 1vw; }
.nxt { right: 1vw; }

.nxt:hover, .prev:hover {
background-image: url('../image/halftone.png'), url('../image/button.png');
background-blend-mode:multiply, normal;
color:white; 
}

.prev:hover {
  animation: spin1 20s infinite linear;
  justify-content: center;
  align-items: center;
}

.nxt:hover {
  animation: spin2 20s infinite linear;
  justify-content: center;
  align-items: center;
}

#footer {
text-align:center;
font-family: Acme;
color: #303247;
font-size: clamp(1px, 1.7vw, 25px);
margin-bottom:2vw;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@media (max-width: 900px) {
  main { display:block; padding:1vw; }
  .textsidew, .textsidet, table, .fullsizew, .fullsizet { 
  width:90%; 
  margin:0 auto 0 auto; 
  font-size: clamp(1px, 2vw, 25px);
  }
.nxt, .prev {
width: clamp(1px, 15vw, 150px);
height: clamp(1px, 15vw, 150px);
line-height:clamp(1px, 15vw, 150px);
}
  .fullsizew, .fullsizet { text-align:center; }
.textsidew table, .textsidet table { width:90%; text-align:left; }
}