/* ================================ ALL ================================*/
* {
    margin: 0;
    box-sizing: border-box;
    font-family: "VCR_ENG", "Verdana","Ariral";
}
@font-face{
    font-family: "VCR_ENG";
    src: url("fonts/VCR OSD Mono Cyr.ttf") format('truetype'),
        url("fonts/VCR OSD Mono.woff2") format("woff2"),
         url("fonts/VCR OSD Mono.woff") format("woff");
    font-size: 12;
}
body{
    margin: 0;
    height: 100%;
    overflow-x: hidden;
}
html{
    height: 100%; /* I dunno why nothing works without it */
}
/* ================================ MARQUEE ================================*/
@keyframes runningOne{
    0%   { transform: translateX(0%); }
    100% { transform: translateX(calc(-100%)); }
}
@keyframes runningTwo{
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(calc(0%)); }
}
@keyframes blink{
    0%   { transform: translateX(100%); }
    100% { transform: translateX(calc(-120%)); }
}
.marquee-container{
    width:60%;
    background-color: yellow;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 10px; margin-bottom: 10px;
    display: flex; flex-direction: column;
}
.marquee{
    display: inline-flex;
    margin: 0;
    min-width: 100%;
    will-change: transform;
    display: inline-flex;
    white-space: nowrap;
}
.marquee > span{
    padding-right: 0.5rem;
    animation: runningOne 5s linear infinite;
}
.marqueeRight{
    display: inline-flex;
    margin: 0;
    min-width: 100%;
    will-change: transform;
    display: inline-flex;
    white-space: nowrap;
}
.marqueeRight > span{
    padding-right: 0.5rem;
    animation: runningTwo 5s linear infinite;
}
.blinkies-55{
    height: 55px;
    display:inline-flex;
    mask-repeat: repeat-x;
    animation: blink 30s infinite linear;
}
/* ================================ WINDOW ================================*/
div.window{
    z-index: 10;
    margin-top: 20px;
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    background-color: #FFFFF0;
    border: 3px solid;
    border-color: #dddd00 #707000 #707000 #dddd00;
}
div.window > div.head{
    z-index: 10;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    background-color: #0F0F0F;
    width: 100%;
    align-items: center;
    height:40px;
}
div.window > div.head > h2{
    color: yellow;
    margin-left: 8px;
    font-size: 14px;
}
div.window > div.head > button{
    margin:4px;
    cursor: pointer;
    font-size: large;
    color: yellow;
    background-color: #0F0F0F;
    width: 32px;
    height: 32px;
    border: 2px solid;                  /* рамка */
    border-color: #dddd00 #707000 #707000 #dddd00; /* светлый верх/лево, тёмный низ/право */
}
div.window > div.head > button:active{
    color:#707000;
    border-color: #707000 #dddd00 #dddd00 #707000; /* рамку переворачиваем */
    padding: 2px 0px 0px 2px;
}
img {
    width: auto ;
    height: auto ;
    max-width: none ;
    max-height: none ;
    object-fit: none;        /* на случай, если задана ширина/высота */
}
/* ================================ INDEX ================================*/
header{
    display: flex;
    width: 100%;
    align-items: center;
}
#getLang{
    font-size: large;
    margin-left: 30px;
    border: 2px solid yellow;
    background-color: black;
    color:white;
}
header > h1{
    text-align: center;
    color: white;
    width: 40%;
    background-color: black;
}
.background{
    background-image: url("../images/backgroundStars.png");
    background-repeat: repeat;
    background-size: auto;
}

.container{
    margin-top: 10px;
    height: 85%;
    display: flex;
}
.sideLeft{
    margin-left: 30px;
    width: 20%;
}
.buttonBlock{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.buttonBlock > button{
    width: 70%;
    margin: 5px;
    color:yellow;
    background-color: #000;
    border: 5px ridge yellow;
    height: 50px;
    font-family: "VCR_ENG", "Verdana","Ariral";
    font-size: 1em;
}
.buttonBlock > button:hover{
    cursor: pointer;
    background-color: #111;
}
.main{
    width: 60%;
    background-color: rgb(255,255,200);
}
.sideRight{
    display: flex; flex-direction: column;
    align-items: center;
    color:white;
    width: 20%;
    margin-right: 30px;

}
.sideRight > h2,ul{
    margin-left: 10px;
    text-decoration: dotted;
}
#TODO{
    background-color: blue;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 40%;
}

#buttonBlog{
    width:200px;
    height:70px;
    color:white;
    background-color: blue;
    font-size: large;
}
/* ================================ GUEST-BOOK ================================*/
iframe.guestBook{
    border: 5px solid;     
    border-color: #dddd00 #707000 #707000 #dddd00;
}
.chatName{
    background-color: black;
    width:300px;
    height: 50px;
    border: 3px solid;     
    border-color: #dddd00 #707000 #707000 #dddd00;
}
#guestBtn{
    width: 150px;
    height: 80px;
    background-color: #000;
    color: yellow;
    border: 2px solid;
    border-color: #dddd00 #707000 #707000 #dddd00;
}
/* ================================ ABOUT-ME ================================*/
div.left > button{
    margin-top:20px; width: 75%; height: 50px; text-align: center; color:#111;
    background-color: yellow;
    font-size: x-large;
    
}
div.left{
    :hover{cursor: pointer;};
    width: 20%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightblue;
}
div.center{
    background-color: blue;
    margin-left: 20%;
    margin-right: 15%;
}
div.center > h1,h2{
    text-align: center;
    margin: 10px;
}
div.center > p{
    text-indent: 40px;
    margin:5px;
}
hr{
    color:aqua;
}