Истина где-то рядом...

[html]
<style>
.tablet {
background-image: url(https://forumupload.ru/uploads/001b/ce/b4/4/104993.png);
width: 700px;
height: 920px;
margin-left: 20px;
}

/* Строка имени */
.stim {
width: 578px;
border: 1px;
border-color: #000;
background-color: #959D9F;
font-family: Oswald;
text-align: center;
position: absolute;
margin-top: 40px;
margin-left: 55px;
text-transform: uppercase;
}

.tabbed > input {
display: none;
}
.tabbed > label {
width: 100px;
margin-top: 110px;
margin-left: 43px;
margin-bottom: -90px;
display: block;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Oswald;
text-size: 20px;
text-transform: uppercase;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
background: transparent;
color: #191970;
height: 30px;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
background: #A02223 !important;
color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
background: transparent;
color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

.tabs-body {
width: 470px;
position: relative;
}

.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: 470px;
height: 726px;
padding: 10px;
z-index: 0;
margin-top: 110px;
margin-right: 55px;
text-align: justify;
overflow: auto;
}

/* Переключатели */

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
transform: translateY(0px);
transform: translateX(0%);
opacity: 1;
z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
}
</style>

<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-5 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-6 tabs-body tabs-body tabs-body tabs-body" 1fr
/* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tablet">
<div class="stim"><td>Шимус Кейн <br> Уровень доступа: A </div>

<div class="tabbed">


<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность 1</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Способность 2</label>

<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Характер</label>

<input type="radio" name="tabs-body" id="nav-left-6">
<label for="nav-left-6">Биография</label>
<div class="tabs-body">

<div class="body-left-1">
<center><img src="https://forumupload.ru/uploads/001b/fb/3e/269/656772.png"></center>
Diluc -Genshin Impact<br>
Пол: Мужской<br>
Дата рождения: 21.03.2092<br>
Возраст: 32 года.<br>
Рост и вес: 198 см / 93 кг.
<br><br>

Семейное положение: Холост<br>
Должность/Статус: Сотрудник службы безопасности научно-исследовательского сектора.<br>
Ник в чате академии: X-Files<br>
<br>
Отличительные признаки
<br>
Цвет глаз: Карий<br>
Цвет волос: Рыжий.<br>
Татуировки/Шрамы/Пирсинг/Пигментация:<br> Проколы в ушах. Едва заметные шрамы по всему телу ( результат работы). Татуировка на тыльной стороне левой руки "Veritas alicubi prope est…"<br>
</div>

<div class="body-left-2"><br>
Высокий, широкоплечий, телосложение спортивное. Жестикуляция, движения и походка - стремительные, резкие, уверенные. Правильные черты лица, брови и ресницы - черные, глаза выразительные. Длинные густые волосы. Не стрижет их принципиально, но часто собирает в хвост, чтобы не мешали. Носит темную одежду полувоенного кроя.

</div>

<div class="body-left-3">
► Черный договор<br><br>
Применение: Одна из разновидностей боевого пирокинеза. Активная способность, применяется на других. Радиус применения в поле зрения носителя. Но не более 2-4 м.<br><br>
Описание способности: Шимус способен контролировать огонь и создавать из него мощное оружие, изменяющее форму по его желанию. Способен материализовать разные вариации холодного оружия, но чаще всего использует только те, которые подходят ему больше всего:<br>
гуань дао - длина до 2,5 м<br>
боевая коса - длина рукояти до 2 м, боевая часть - 70 см<br>
хлыст - длина подвижной части до 3 м<br>
кусаригама - длина цепи от 1 до 3 м, лезвия - 45 см<br>
Оружие черного цвета, причудливой формы, похоже на обугленное или обожженное, внутри которого бурлит жидкое пламя, пытаясь вырваться наружу. Пламя имеет очень высокую температуру, сильный удар способен рассечь и оплавить металл.<br>
При активации способности кожный покров на руках, ногах, плечах, позвоночнике и шее изменяется - темнеет до угольно-черного, становится более прочным и жаростойким. Пигментация затрагивает не только шею и плечи, но также подбородок, щеки и грудную клетку, расползаясь языками черного пламени.

<br><br>
Ограничения: Для активации способности источник огня не требуется, Шимус генерирует пламя самостоятельно. Время использования способности максимум три часа. Далее требуется передышка до двенадцати часов. Откат от способности наступает сразу после окончания ее использования. Шимус ощущает легкое покалывание на кончиках пальцев. Испытывает чувство голода и жуткую жажду. В редких случаях может идти кровь носом.
</div>

► Белый договор <br><br>
Применение: Активная способность. Применяется исключительно на себя. Время использования от пары минут до трех часов. Обе способности может активировать одновременно не более, чем на 30-40 минут.
<br><br>
Описание способности: Усиление физических параметров - силы, скорости, выносливости, гибкости и ловкости.<br><br>

Ограничения: Выжирает энергию только так, поэтому держать ее под контролем продолжительное время очень сложно. Рекорды Кейн не устанавливал, как-то вредить себе ему и в голову не приходило, но однажды на одной из миссий ему пришлось почти три часа поддерживать усиление, после чего наступил откат, и он сильно пожалел о своей выходке. Откат от способности наступает через тридцать минут после окончания ее использования. При минимальном использовании способности, а это примерно 1 ч - 1,5 ч - чувствуется усталость во всем теле. Головокружение. Легкое чувство тошноты и звон в ушах. Чем дольше использует способность, тем сильнее откат. При использовании до трех часов - наступает потеря всех чувств до шести часов. Использование способности более трех часов возможен летальный исход.
<br><br>

</div>

<div class="body-left-5">
Холодный в общении, не особо разговорчивый, может быть жестким. Если берется контролировать что-то или кого-то, держит в ежовых рукавицах и не выпускает из виду. Четко делит мир на своих и чужих, раньше - на себя и остальных. Сейчас - на тех, на кого принял решение работать сам, и, опять же, всех остальных.<br>
Его аналитические способности выше средних, он обладает хорошей памятью и критическим мышлением, что делает его трудно контролируемым. Он не получил необходимых академических знаний, чтобы стать ученым или исследователем, но в целом далеко не глуп. Умеет контролировать эмоции, научился держать в узде свой горячий темперамент и упрямый ирландский нрав.<br>
Подозрительность, проблемы с доверием, нежелание подпускать к себе ближе, чем на километр - за все эти качества можно целиком и полностью благодарить Охру. Она сумела воспитать для себя идеальное оружие. Единственное, чего спецы Охры не учли, что оно может обернуться против них самих.
</div>

<div class="body-left-6">
Родился в Претории. Родителей почти не помнит, знает только, что Шимус Кейн - его настоящее имя, а у его предков ирландские корни. Попал в интернат в раннем детстве. В отличии от остальных детей, больше любил проводить время в одиночестве. За чтением книг. В драки влезал очень редко и только в тех случаях, когда задевали его. Тогда о себе давала знать ирландская кровь, что течет в его жилах. В одной из такой драк и активировалась его первая способность. Обошлось без жертв, но с тех пор Шимуса старались обходить стороной. С ранней юности тяготел к точным наукам и исследовательской деятельности. Из него вышел бы неплохой аналитик, но его способности определили его судьбу за него, и Охра сама выбрала для Шимуса путь. За основной учебой и многочасовыми физическими тренировками не оставалось времени на науку, которая была и до сих пор остается для него неким святым Граалем - заветной детской мечтой, о которой он почти забыл. Во время обучения в Академии сблизился и доверился только одному человеку Мойре. Девушка была на курс старше Кейна, и всячески помогала ему. Она не лезла с расспросами в его душу. Сначала он с недоверием смотрел на юного тактика, но в скором времени доверился девушки. И они стали лучшими друзьями, романтические отношения эти двоя никогда не рассматривали, им это даже на ум не приходило. Да и вообще на личном у Шимуса было очень сложно. Было сложно кому-то так сильно довериться, чтобы пустить в свое сердце. После окончания Академии, у Кейна даже шанса не было сорваться с поводка Охры и самому решать чем заниматься. Его путь уже был предрешен, в тот самый момент, когда у него активировалась первая способность. Шимус Кейн - ликвидатор и убийца Охры. Красная неделя время которое он хотел бы забыть, но не сможет. Сколько тогда своих знакомых ему пришлось убить. Но самое главное, Кейну пришлось убить Мойру. Произошедшее с девушкой, еще раз убедило мужчину, что людям нельзя доверять. Кейн никогда не испытывал к своим воспитателям нежных чувств и не считает себя им обязанным. После пары инцидентов у него в личном деле появились особые отметки о нарушении субординации и дисциплины, которые поставили его ценность как элитной боевой единицы под сомнение. Два года назад его перевели в Академию и приписали к научно-исследовательскому комплексу.
<br><br>
Секретная информация: В его личном деле скрыта большая часть информации, касающееся его работы на посту ликвидатора

</div>
[/html]