body {
background: url('/anime/future/bg.jpg') #aaa;
font-family: 'freak';
color: #fff;
text-shadow: 0px 0px 2px #fff;
margin: 0 auto;
}
 @font-face {
font-family: 'freak'; 
src: url('http://km3j.at.ua/anime/future/freak.ttf');
font-style: normal;
font-weight: normal;
} 
h2 {
    font-size: 1.1em; /* Размер шрифта */
    color: #800040; /* Цвет текста */
    text-shadow: 0px 0px 1px #fff;
    margin-top: 0; /* Отступ сверху */
   }
   #container {
    width: 880px; /* Ширина слоя */
    margin: 0 auto; /* Выравнивание по центру */
    background: url('bg.png') rgba(255, 255, 255, 0.1); /* Цвет фона левой колонки */
   }
   #header {
    font-size: 2.2em; /* Размер текста */
    text-align: center; /* Выравнивание по центру */
    padding: 5px; /* Отступы вокруг текста */
    background: rgba(31, 31, 31, 0.7); /* Цвет фона шапки */
    border: 3px double #000;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    color: #ffe; /* Цвет текста */
   }
   #sidebar {
    margin-top: 10px; 
    width: 110px; /* Ширина слоя */
    padding: 0 10px; /* Отступы вокруг текста */
    float: left; /* Обтекание по правому краю */
   }
   #content {
    margin-left: 5px; /* Отступ слева */
    padding: 10px; /* Поля вокруг текста */
    background: rgba(255, 255, 255, 0.1); /* Цвет фона правой колонки */
   }
   #footer {
    background: rgba(31, 31, 31, 0.7); /* Цвет фона подвала */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Отступы вокруг текста */
    border: 3px double #000;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    clear: left; /* Отменяем действие float */
   }
   #logo {
   font-family: 'freak';
font-size: 50px;
color: red;
   }
   a, a:hover, a:visited {
   color: #aaf;
   text-shadow: 0px 0px 3px #fff;
   }
   .splash {
   background: rgba(231, 231, 231, 0.8); 
   border: 3px double #000;
   width: 720px;
   }
   
   /* photo */
  .photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .photo:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 15px; top: 15px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(31,31,31,0.5); /* Полупрозрачный цвет фона */
    font-family: "minecraft", sans-serif; /* Гарнитура шрифта */
    font-size: 12px; /* Размер текста подсказки */
    text-shadow: 0px 0px 5px grey;
    padding: 5px 10px;
    border-top: 1px solid #9ff;
    border-left: 1px solid #9ff;
    border-bottm: 1px solid #9ff;
    borde-right: 1px solid #9ff;
    border-radius: 3px;
   }
   .photo:hover::before {
   border-radius: 50%;
   }
   /* slash */
   #turnaround {
width: 468px;
height: 422px;
float: left;
background-image: url(turnaround.jpg);
position: absolute;
}

#turnaround a {
position: absolute;
display: block;
border: 3px solid #f9f35c;
width: 55px;
height: 55px;
border-radius: 55px;
cursor: help;
text-decoration: none;
opacity: 0;
-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;
}

#turnaround a:hover {
opacity: 1;
}

#turnaround a#face1 {
left: 187px;
top: 26px;
}

#turnaround a#face2
{
left: 48px;
top: 26px;
}

#turnaround a#tattoo
{
left: 187px;
top: 65px;
}

#turnaround a#arm1
{
left: 82px;
top: 105px;
}

#turnaround a#arm2
{
left: 293px;
top: 105px;
}

#turnaround a#crotch
{
left: 48px;
top: 151px;
}

#turnaround a#vents1
{
left: 188px;
top: 203px;
}

#turnaround a#vents2
{
left: 177px;
top: 284px;
}

#turnaround a#skates1
{
left: 10px;
top: 327px;
}

#turnaround a#skates2
{
left: 87px;
top: 327px;
}

#turnaround a#skates3
{
left: 178px;
top: 327px;
}

#turnaround a#skates4
{
left: 285px;
top: 327px;
}

#turnaround a#skates5
{
left: 364px;
top: 327px;
}

#turnaround a#back
{
left: 325px;
top: 64px;
}
  	 
   
   /* персонажи */
   #per {
background: rgba(255, 200, 156, 0.7)
border-left: 2px solid rgb(255, 200, 156);
border-top: 2px solid rgb(255, 200, 156);
border-right: 2px solid rgb(49, 40, 49);
border-bottom: 2px solid rgb(49, 49, 49); 
border-radius: 3px;
padding: 5px;
}
 #vto {
background: rgba(255, 170, 180, 0.7);
border-left: 2px solid rgb(255, 170, 180);
border-top: 2px solid rgb(255, 170, 180);
border-right: 2px solid rgb(255, 1, 1);
border-bottom: 2px solid rgb(255, 1, 1); 
border-radius: 3px;
 padding: 5px; 
}
 #tre {
background: rgba(132, 65, 66, 0.7);
 border-left: 2px solid rgb(132, 65, 66);
border-top: 2px solid rgb(132, 65, 66);
border-right: 2px solid rgb(75, 90, 90);
border-bottom: 2px solid rgb(75, 90, 90); 
border-radius: 3px;
 padding: 5px; 
}
 #che {
background: rgba(100, 105, 150, 0.7);
 border-left: 2px solid rgb(100, 105, 150);
border-top: 2px solid rgb(100, 105, 150);
border-right: 2px solid rgb(57, 57, 66);
border-bottom: 2px solid rgb(57, 57, 66); 
border-radius: 3px;
 padding: 5px; 
}
 #pyt {
background: rgba(132, 200, 165, 0.7);
 border-left: 2px solid rgb(132, 200, 165);
border-top: 2px solid rgb(132, 200, 165);
border-right: 2px solid rgb(240, 135, 90);
border-bottom: 2px solid rgb(240, 135, 90); 
border-radius: 3px;
 padding: 5px; 
}
 #she {
background: rgba(156, 164, 63, 0.7);
border-left: 2px solid rgb(156, 164, 63);
border-top: 2px solid rgb(156, 164, 63);
border-right: 2px solid (220, 100, 75);
border-bottom: 2px solid (220, 100, 75);
border-radius: 3px;
 padding: 5px; 
}
 #sed {
background: rgba(247, 240, 247, 0.7);
 border-left: 2px solid rgb(247, 240, 247);
border-top: 2px solid rgb(247, 240, 247);
border-right: 2px solid rgb(200, 207, 240);
border-bottom: 2px solid rgb(200, 207, 240); 
border-radius: 3px;
 padding: 5px; 
}
 #sedu {
background: rgba(66, 50, 82, 0.7);
 border-left: 2px solid rgb(66, 50, 82);
border-top: 2px solid rgb(66, 50, 82);
border-right: 2px solid rgb(206, 230, 240);
border-bottom: 2px solid rgb(206, 230, 240); 
border-radius: 3px;
 padding: 5px; 
} 
 #vos {
background: rgba(222, 125, 99, 0.7);
 border-left: 2px solid rgb(222, 125, 99);
border-top: 2px solid rgb(222, 225, 99);
border-right: 2px solid rgb(156, 77, 82);
border-bottom: 2px solid rgb(156, 77, 82); 
border-radius: 3px;
 padding: 5px; 
}
 #dev {
background: rgba(255, 240, 250, 0.7);
 border-left: 2px solid rgb(255, 240, 250);
border-top: 2px solid rgb(255, 240, 250);
border-right: 2px solid rgb(75, 50, 80);
border-bottom: 2px solid rgb(75, 50, 80); 
border-radius: 3px;
 padding: 5px; 
}
 #des {
background: rgba(173, 154, 154, 0.7);
 border-left: 2px solid rgb(173, 154, 154);
border-top: 2px solid rgb(173, 154, 154);
border-right: 2px solid rgb(120, 140, 180);
border-bottom: 2px solid rgb(120, 140, 180); 
border-radius: 3px;
 padding: 5px; 
}
 #odi {
background: rgba(49, 45, 49, 0.7);
 border-left: 2px solid rgb(49, 45, 49);
border-top: 2px solid rgb(49, 45, 49);
border-right: 2px solid rgb(90, 77, 90);
border-bottom: 2px solid rgb(90, 77, 90); 
border-radius: 3px;
 padding: 5px; 
}
 #dve {
background: rgba(180, 73, 73, 0.7);
 border-left: 2px solid rgb(180, 73, 73);
border-top: 2px solid rgb(180, 70, 70);
border-right: 2px solid rgb(230, 230, 230);
border-bottom: 2px solid rgb(230, 230, 230); 
border-radius: 3px;
 padding: 5px; 
}
 #ksk {
background: rgba(230, 186, 80, 0.7);
 border-left: 2px solid rgb(230, 186, 80);
border-top: 2px solid rgb(230, 186, 80);
border-right: 2px solid rgb(65, 75, 90);
border-bottom: 2px solid rgb(65, 75, 90); 
border-radius: 3px;
 padding: 5px; 
}
 #p1 {
background: rgba(206, 178, 222, 0.7);
 border-left: 2px solid rgb(206, 178, 222);
border-top: 2px solid rgb(206, 178, 222);
border-right: 2px solid rgb(239, 170, 140);
border-bottom: 2px solid rgb(239, 170, 140); 
border-radius: 3px;
 padding: 5px; 
}
 #p2 {
background: rgba(132, 86, 66, 0.7);
 border-left: 2px solid rgb(132, 86, 66);
border-top: 2px solid rgb(132, 86, 66);
border-right: 2px solid rgb(206, 110, 155);
border-bottom: 2px solid rgb(206, 110, 155); 
border-radius: 3px;
 padding: 5px; 
}
 #aks {
background: rgba(206, 207, 214, 0.7);
 border-left: 2px solid rgb(206, 207, 214);
border-top: 2px solid rgb(206, 207, 214);
border-right: 2px solid rgb(132, 138, 190);
border-bottom: 2px solid rgb(132, 138, 190); 
border-radius: 3px;
 padding: 5px; 
}
 #mur {
background: rgba(247, 247, 247, 0.7);
 border-left: 2px solid rgb(246, 247, 244);
border-top: 2px solid rgb(246, 247, 244);
border-right: 2px solid rgb(213, 200, 220);
border-bottom: 2px solid rgb(213, 200, 220); 
border-radius: 3px;
 padding: 5px; 
} 
#ops {
font: bold;
text-align: justify;
max-width: 413px;
}