<!--HTML-->
<div class="guestbook__main__block">
<gb__header>
<title>name forum</title>
<about><items>real-life / city / 2023</items>
<nav><a href="#">правила</a><a href="#">внешности</a><a href="#">шаблон анкеты</a></nav>
</about>
</gb__header>
<faces__block>

<reserved__faces>
<reserved>reserved</reserved>
<scroll>

<datum__title>00.00</datum__title>

<a href="#">name surname</a>

</scroll>
</reserved__faces>

<purchased__faces>
<purchased>purchased</purchased>
<scroll>

<datum__title>00.00</datum__title>

<a href="#">name surname</a>

</scroll>
</purchased__faces>

</faces__block>

<guest__button>
<div id="textguest" style="font-size: 0px;">
<pre><a href="ссылка на профиль">name surname</a></pre></div>
<button onclick="copytext('#textguest')" class="guest__button" title="нажми чтобы взять код">придержать внешность</button>
</guest__button>

</div>

<style>

.guestbook__main__block {
    display: block;
    width: 600px;
    height: 440px;
    margin: 0 auto 0 auto !important;
    background-image: var(--main-bg);
    box-shadow: 0 0 0 1px #dcc49c, inset 0 0 0 1px #fff6e1, inset 0 0 15px 2px #243428, inset 20px 20px 80px 20px #25322985;
    border-radius: 10px;
    background-size: 120%;
}

 gb__header {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 2.4em 0 2em 0;
}

gb__header:after {
    content: "";
    background: url(https://i.imgur.com/nkdHiVZ.png);
    width: 100px;
    height: 100px;
    display: block;
    background-size: 100%;
    position: relative;
    left: 60px;
    top: -90px;
    transform: rotate(3deg);
    margin: 0 0 4em 0;
}


gb__header:hover:after {
    filter: drop-shadow(1px 1px 10px #feb);
}

gb__header:after {
     transition: 1s;
}

gb__header > title {
    position: relative;
    /* top: -30px; */
    /* right: 0; */
    /* left: 0; */
    display: block;
    overflow: hidden;
    font-size: 3.7em;
    font-family: Bochan Alternate;
    text-align: center;
    color: #edce9b;
    text-shadow: 1px 1px 1px #1b2620;  
    text-transform: uppercase;
}

gb__header > title:hover {
     text-shadow: 0 0 10px #ffeebb7a;
}

about {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}

about items {
    font-family: modernspace;
    font-weight: bold;
    color: #857a68;
    text-transform: uppercase;
    font-size: 1.2em;
}

about nav {
    display: block;
    margin: 1em 0 0 0 !important;
    z-index: 1;
    position: relative;
}

about a {
    font-size: 0.8em;
    color: #9a7333;
    margin: 0 1em 0 0 !important;
    font-family: Arial;
    font-weight: normal;
    background: #edce9b;
    border-radius: 10px;
    padding: 2px 5px 3px 5px;
    letter-spacing: 0.6px;
    box-shadow: inset 0 0 0 1px #fff1ddb8, inset 0 0 4px 1px #78633ea1, 0 0 0px 1px #1e231f96;
    text-shadow: 1px 1px 0 #ffffff75;
}

guestbook__main {
    display: block;
    width: 88%;
    height: auto;
    margin: 1em auto 1em auto !important;
    background: #fdfaf582;
    padding: 0.8em;
    border-radius: 10px;
    /* border: 1px solid #dcb98075; */
    box-shadow: 0 0 12px 0px #c5b59a94;
    }

guestbook__main p {
     font-size: 0.8em;
     text-align: justify;
     color: #455f4f;
}

faces__block {
    display: flex;
    justify-content: center;
    position: relative;
    top: -140px;
    width: 80%;
    height: 19.2em;
    margin: 1em auto 1em auto !important;
    box-sizing: border-box;
}

reserved__faces,
purchased__faces {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 1em 1em 1em 1em !important;
    padding: 0.6em 1em 0.6em 1.6em;
    box-sizing: border-box;
    background: #fdfaf5;
    box-shadow: 0 0 0 1px #15181682, inset 0 0 0 1px #ffebc8, inset 0 0 10px 3px #bfb8ad;
    border-radius: 10px;
}

reserved, purchased {
    position: absolute;
    top: -6px;
    font-size: 10px;
    color: var(--a-color-5);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 2px #edce9b9e;
}

reserved:before, purchased:before {
    font-family: 'Material Icons';
    position: relative;
    left: -5px;
    top: 2px;
    text-shadow: none;
}

reserved:before {
    content: "\e51c";
}

purchased:before {
    content: "\e263"; 
}

scroll {
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0 1em 0 0;
}

scroll a {
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--b-color-3);
}

scroll a:before {
    content: "\e315";
    font-family: 'Material Icons';
    position: relative;
    top: 1px;
    margin-right: 0.6em;
}

datum__title {
    display: block;
    margin: 1em 0 1em 0 !important;
    font-size: 1em;
    text-align: center;
    color: #afafaf;
}

fc__row {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 2em 0 !important;
}

fc__name,
datum {
    font-size: 1em;
    position: absolute;
}

fc__name {
   left: 0;
}

fc__name a {
   font-weight: bold;
   letter-spacing: 0.4px;
}

datum {
    right: 0;
    color: #afafaf;
}

guest__button {
    margin: -12em 0 0 0 !important;
    display: block;
    text-align: center;
}

.guest__button {
    border: none;
    width: 78%;
    padding: 6px 5px 5px 5px;
    border-radius: 10px;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.6px;
    color: #849a8b;
    text-shadow: 1px 1px 0 #010101ab;
    background: #181f1a66;
    box-shadow: inset 0 0 0 1px #3a5243, inset 0 0 4px 1px #314237, 0 0 0px 1px #1e231f96;
    transition: 0.5s linear; 
}

.guest__button:hover {
    color: #c3e0ccd4;
    text-shadow: 0 0 4px #e4ffedb8;
    box-shadow: inset 0 0 6px 0px #739a81, inset 0 0 4px 1px #314237, 0 0 7px 0px #c0d8c542;
}

scroll::-webkit-scrollbar-thumb {
    background-color: var(--b-color-3);
    border-radius: 10px;
}

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

</style>