[hideprofile][html]
<style>

@keyframes rotate {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.garden {
  color: var(--border);
  border: var(--border) solid 1px;
  width: 75%;
  margin: 0 auto;
  padding: 5px;
  background: #fefefe;
}

.garden2 {
    border: var(--border) solid 1px;
    background-color: var(--color-white);
    background-image: url(https://i.ibb.co/HXT4y1W/1.png);
    background-repeat: repeat-y;
    background-blend-mode: ov erlay;
}

.gard-01 {
border-bottom: rgb(59, 100, 24) solid 1px;
background: rgba(59, 100, 24, 0.42);
    padding: 20px 70px 20px;
    text-align: right;
}

.gard-01 h2 {
  margin: 0;
  display: inline-block;
  border: rgb(59, 100, 24) solid 1px;
  background: #fefefe;
  border-radius: 5px;
  padding: 7px 15px;
  font: 18px ;
}

.gard-01 h3 {
    margin: 0;
    display: inline-block;
    padding: 0px;
    font-size: 11px;
    color: var(--color-main);
    font-family: monospace;
    text-align: justify;
}

.gard-01 h2 b {
  font: 18px;
  color: var(--color-main);
}

.gard-side {
border-left: #ccc solid 1px;
background: #f3f3f3;
width: 200px;
float: right;
}

.gard-side icon {
  position: relative;
  display: block;
  border-bottom: #ccc solid 1px;
  padding: 40px;
  background: #eee;
}

.gard-side iconan {
  position: absolute;
  top: 35px;
  left: 35px;
  animation: infinite 1s rotate;
  display: block;
  padding: 3px;
  width: 107px;
  height: 107px;
  border: solid 2px;
  border-color: var(--color-main) var(--color-main) transparent transparent;
  border-radius: 100%;
}

.gard-side icon img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #fefefe;
  padding: 3px;
}

.gard-side basic {display: block;}

.gard-side sideinfo {
  display: block;
  padding: 20px 20px 10px;
  height: 180px;
  overflow-y: auto;
}

.gard-side basic {
  border: #ccc solid 1px;
  padding: 10px;
  font: bold 9px;
  text-transform: uppercase;
  background: #fefefe;
  margin: 0 0 10px 0;
}

.gardtabs {
position: relative;
height: 397px;
width: 260px;
left: 145px;
}

.gtabs {float: left;}
.gtabs [type=radio] {display: none;}

.gct-01 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 100%;
  border: #ccc solid 1px;
  background: #fefefe;
  margin: 30px;
  padding: 30px;
  height: 200px;
}

.gct-02 {
  transform: scale(0);
  transition: 600ms;
  height: 280px;
  overflow: auto;
  font: 12px;
  text-align: justify;
  padding: 0 5px 0 0;
}

.gct-03 {
    height: 190px;
    width: 200px;
    overflow: auto;
    font-size: 12px;
    text-align: justify;
    padding: 0 5px 0 0;
    position: absolute;
    margin: -20px 0px 0px -20px;
}

.gct-02 p {
  border-left: #dad0d3 solid 1px;
  margin: 7px 0 7px 10px;
  padding: 0 0 0 10px;
}

.gct-02 b {
  font: 600 14px;
  color: var(--color-main);
}

.gct-02 i {
  font: 14px cutive mono;
  color: var(--border);
}

.gct-02::-webkit-scrollbar {width: 5px;}

.gtabs [type=radio]:checked ~ label i {color: #aaa;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 {z-index: 2;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 .gct-02 {transform: scale(1);}
</style>

<div class="garden">
  <div class="garden2">
    <div class="gard-01"><h2><b>Гостевая</b></h2></div>
    <div class="gard-02 fl frowr bcet">
      <div class="gard-side flexs">
        <icon><iconan></iconan><img src="https://i.pinimg.com/564x/d8/04/93/d80493a32f53c5626d58a45cc3c4c377.jpg"></icon>
        <sideinfo>
          <basic>Тартар</basic>
          <basic>tg <a href="https://t.me/aDraconis">77777777</a></basic>
       
        </sideinfo>
      </div>
      <div class="gardtabs flex">
        <div class="tabcontain"></div>
        <div class="gtabs">
          <input type="radio" id="gtab1" name="gardentabs" checked>
          <label for="gtab1" title="index"></label>
          <div class="gct-01">
            <div class="gct-02">
              <b>Добро пожаловать!</b> <i>Здесь</i> мог бы быть форум, но не был. Не случилось, не срослось. Стоит ли вообще что-то делать одному, когда в компании веселее?
            </div>
            <div class="gct-03">
              <b>Забронированы:</b> <i>-------------</i>.
            </div>
          </div>
        </div>
 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[/html]