<!--HTML-->

<div class="main_h">
<div class="guest_block">
<welcome>Добро пожаловать на hyggecross!</welcome>
<img src="https://i.imgur.com/T27LtbB.png" class="guset_up_img">
<div class="welcome">
Зажигай свечи, заваривай любимый чай и поудобнее закутывайся в мягкий плед. Знай, мы очень рады тебе. Если ты определился с любимой ролью, не забудь отметиться ниже. На 3-е суток персонаж весь твой. Мы с удовольствием продлим твою бронь ещё 2 раза, но если обстоятельства тебе не подвластны, всегда можно договориться.
</div>

<div class="character_list">

<character_data>29.09.2020</character_data>

<character_list>steve rogers </character_list>
<fandom>[marvel]</fandom>
<character_list>marquis de lafayette</character_list>
<fandom>[assassin's creed & the order: 1886]</fandom>
<character_list>steve rogers</character_list>
<character_list>steve rogers</character_list>
<character_list>steve rogers</character_list>
<character_list>steve rogers</character_list></div>

<div class="we_need">
<img src="https://i.imgur.com/vYi4UXu.png" class="need_img"><img src="https://i.imgur.com/vYi4UXu.png" class="need_img"><img src="https://i.imgur.com/vYi4UXu.png" class="need_img">
<img src="https://i.imgur.com/vYi4UXu.png" class="need_img"><img src="https://i.imgur.com/vYi4UXu.png" class="need_img"><img src="https://i.imgur.com/vYi4UXu.png" class="need_img">
</div>

</div>
</div>

<style>
.main_h {
background: #efe0cd;
    display: block;
    height: 320px;
    margin-top: -25px;
    position: absolute;
    width: 715px;
    left: 265px;
    z-index: 1;
    /* padding: 50px; */
}

.guest_block {
    background: #efe0cd;
    background-size: 100%;
    width: 600px;
    height: 370px;
    box-shadow: 0 0 18px 1px #b58e6c61;
    margin-left: 60px;
    margin-top: 30px;
}

welcome {
    position: relative;
    top: 26px;
    left: 35px;
    text-transform: uppercase;
    font-size: 17px;
    font-family: 'Oranienbaum', serif;
    color: #ab2129;
}

.welcome {
    position: relative;
    top: 35px;
    width: 450px;
    left: 35px;
    text-align: left;
    line-height: 1.5;
}

character_data {
background: #d65a50;
    width: 190px;
    padding: 5px;
    color: #f4e5d6;
    font-size: 12px;
    font-family: arial;
    border-radius: 20px;
padding-left: 13px;
    text-align: center;
}

.character_list {
    position: relative;
    top: 65px;
    width: 230px;
    display: flex;
    flex-direction: column;
    left: 40px;
    height: 175px;
    overflow: auto;
}

character_list {
    background: #fcf0e39e;
    width: 190px;
    padding: 5px;
    color: #cc4c49;
    font-size: 12px;
    font-family: arial;
    border-radius: 20px;
padding-left: 13px;
    text-align: center;
    margin-top: 10px!important;
}

fandom {
    position: relative;
    left: 9px;
    width: 190px;
    background: #d65a506b;
    padding: 2px;
    text-align: center;
    font-size: 10px;
    font-family: arial;
    color: #f4e8d6;
    border-radius: 20px;
    margin-top: 5px!important;
}

.character_list::-webkit-scrollbar              { width: 3px;  }
.character_list::-webkit-scrollbar-track        {     background-color: #cebca9; }
.character_list::-webkit-scrollbar-thumb        { background-color: #d65a50; }

.we_need {
    position: relative;
    width: 260px;
    height: 250px;
    left: 300px;
    top: -115px;
}

.need_img {
background-size: 100%;
    width: 75px;
    padding: 5px;
}

.guset_up_img {
background-size: 100%;
    width: 220px;
    position: absolute;
    margin-left: 170px;
    margin-top: -40px;
}
</style>