theme f

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme f</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<style>

body{
background-color: #9ba2a8;
background-image: url('https://i.imgur.com/47gxDF4.png');
}

#all{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url('https://i.imgur.com/pjus3sW.png');
width: 1303px;
height: 696px;
}

#container{
background-color: #fff;
width: 410px;
height: 670px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
border-radius: 0px;
box-shadow: 0px 0px 0px 0px #fff;
}

h1{
margin: 0px;
padding-top: 11px;
line-height: 12px;
text-align: center;
color: #fff;
background-color: #3d3b3a;
font-weight: normal;
font-family: 'Special Elite', serif;
}

#contentcontainer{
overflow: scroll;
overflow-x: hidden;
height: 630px;
}

#content{
color: #35393d;
padding: 15px;
text-align: justify;
}

.subheaders{
font-family: 'Special Elite', serif;
font-weight: normal;
font-size: 19px;
margin: 0px;
text-align: center;
}

::-webkit-scrollbar{
width: 6px;
}

::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #3d3b3a;
}

a:link{
color: #b1b1a5;
font-style: italic;
}

a:visited{
color: #b1b1a5;
}

a:hover{
font-weight: bold;
font-style: italic;
}

a:active{
font-weight: bold;
font-style: italic;
}

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

#credit a:link{
color: #fff;
font-style: italic;
text-decoration: none;
}

#credit a:visited{
color: #fff;
}

#credit a:hover{
font-weight: bold;
font-style: italic;
}

#credit a:active{
font-weight: bold;
font-style: italic;
}

</style>

</head>

<body>

<div id="all">

<div id="container">

<h1>Title Here</h1>

<div id="contentcontainer">
<div id="content">

<h2 class="subheaders">header here</h2>
<p style="margin-top:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed elit a luctus. Nulla at enim eget erat eleifend feugiat. Vivamus eleifend volutpat fringilla.</p>

<p><a href="">Maecenas</a> a feugiat nisl, ac luctus augue. Suspendisse augue est, bibendum ut mi vel, vestibulum venenatis sapien. Nunc scelerisque lobortis lacus, sed gravida libero. In rutrum leo sed mi sollicitudin, nec auctor urna molestie.</p>

<img src="https://source.unsplash.com/random/?vintage" width="380px" style="opacity:0.8;">

<p>Etiam sit amet leo malesuada, bibendum felis dignissim, imperdiet nisi. Quisque facilisis varius molestie. Aenean id purus ac metus dignissim tincidunt.</p>

<p>Suspendisse eu nisl accumsan, sollicitudin risus vel, commodo augue. Nulla quis facilisis nulla, at vestibulum libero. Suspendisse convallis ultricies dictum. Mauris pellentesque nibh non neque dignissim euismod. Fusce eros libero, efficitur sit amet rhoncus a, auctor et risus.</p>

<p>Aenean quam diam, auctor ut elementum a, fermentum et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed elit a luctus. Nulla at enim eget erat eleifend feugiat. Vivamus eleifend volutpat fringilla.</p>

<p>Maecenas a feugiat nisl, ac luctus augue. Suspendisse augue est, bibendum ut mi vel, vestibulum venenatis sapien. Nunc scelerisque lobortis lacus, sed gravida libero. In rutrum leo sed mi sollicitudin, nec auctor urna molestie.</p>

<p>Etiam sit amet leo malesuada, bibendum felis dignissim, imperdiet nisi. Quisque facilisis varius molestie. Aenean id purus ac metus dignissim tincidunt.</p>
</div>
</div>

</div>

</div>

<div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div>

</body>

</html>