:root {
box-sizing: border-box;
margin: 0;
padding: 0;
}
 
body{
background-color: #fcfaf2;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
font-size: 17px;
color: #532635;
margin: 5%;
background: var(--background-color);
background-image: url("https://blob.gifcities.org/gifcities/WYYFT6FLAQWK7SVRLGPFCUKVXAAQCEGG.gif")
}
 
.container{
display: flex;
flex-direction: row;
gap: 1rem;
max-width: 800px;
margin: 0 auto;
}
 
.imgwrapper{
display: flex;
flex-grow: 900;
flex-basis: 7;
}
 
.img{
align-self: center;
width: 100%;
min-width: 200px;
}
 
.main{
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
justify-content: space-between;
gap: 1rem;
}
 
.box{
  
display: flex;
gap: 1rem;
}
 
.boximg{
align-self: center;
width: 200px;
height: 200px;
}
 
.content{
  background-color:#fcfaf2;
flex-grow: 6;
flex-basis: 0;
min-width: 220px;
height: 220px;
border: 2px solid #5D1838;
padding: 1rem;
overflow: scroll;
overflow-x: hidden;
text-align: justify;
line-height: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
 
.headers{
font-size: 20px;
text-align: right;
font-weight: normal;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
border-bottom: 2px dotted #5D1838;
}
 
a{
text-decoration: none;
color: #903643;
}
 
a:visited{
color: #903643;
}
 
a:hover{
font-style: italic;
}
 
a:active{
font-style: italic;
font-weight: bold;
}
 
::-webkit-scrollbar{
width: 6px; 
}
 
::-webkit-scrollbar-track{
background-color: #fcfaf2;
}
 
::-webkit-scrollbar-thumb{
background-color: #fcfaf2;
}
 
#credit{
font-size: 12px;
position: fixed;
bottom: 0px;
right: 0;
}
 
@media(max-width:730px){
.box img{
display: none;
}
}
 
@media(max-width:700px){
.container{
flex-direction: column;
}
.img{
width: 40%;
min-width: 40%;
margin: 0 auto;
}
}