*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

@font-face {
    font-family: "RetroStar";
    src: url("Retro Star DEMO.ttf");
}

body{
background-color: white;
Background-image: url("blue-checkered-cotton-textile-1811-in-architextures.jpg");
background-size: 100px;
font-family: serif;
font-size: 16px;
color: #532635;
margin: 5%;
}

.container{
max-width: 800px;
margin: 0 auto;
}

.boximg{
align-self: center;
width: 100%;
}

.content img{
  display: inline;
}

.imageblur img{
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: .2s;
}

.imageblur img:hover{
  filter: blur(0px);
  -webkit-filter: blur(0px);
  transition: .2s;
}

.main{
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
justify-content: space-between;
gap: 1rem;
filter: drop-shadow(0px 0px 10px black)
}

.nav{
background-color: #FBFAF0;
background-image: url('45-degree-fabric-light.png');
background-size: 300px;
width: 100%;
text-align: center;
padding: 0.5rem 0 0.5rem 0;
}

.nav h1{
font-size: 3em;
margin: 10px 0px;
font-family: 'RetroStar';
}
 
.nav ul{
display: flex;
justify-content: space-around;
}
 
.nav li{
display: inline;
}

.box{
display: flex;
gap: 1rem;
}

.boximg{
align-self: center;
width: 400px;
}

.responseimg{
align-self: center;
width: 80%;
display: none;
}

.content{
Background-color: #FBFAF0;
background-image: url('45-degree-fabric-light.png');
background-size: 300px;
flex-grow: 6;
flex-basis: 0;
height: 200px;
min-width: 100px;
padding: 30px 30px;
overflow: scroll;
overflow-x: hidden;
text-align: justify;
line-height: 1.1;
display: flex;
flex-direction: column;
gap: 0.5rem;
mask: radial-gradient(30px at 30px 30px,#0000 98%,#000) -30px -30px;
}

.content li{
margin-left: 30px;
}

.headers{
font-size: 20px;
text-align: left;
font-weight: normal;
font-family: RetroStar, serif;
border-bottom: 2px dotted #5D1838;
}

.subheaders{
text-align: left;
font-weight: bold;
font-family: 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: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #5D1838;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0px;
right: 0;
}

@media(max-width:1000px){
.boximg{
width: 200px;
}

.nav ul{
display: block;
}

.nav h1{
font-size: 2em;
margin: 6px 0px;
}

}

@media(max-width:630px){

.container{
flex-direction: column;
}

.boximg{
display: none;
}

.responseimg{
display: block;
margin: 0 auto;
}

.nav ul{
display: block;
}

.nav li{
display: block;
}

}