html {
    overflow: hidden;
}

body {
    background: #363636 url(../img/bck.png);
    background-size: 1920px;
    animation: background_slide 5s linear infinite;
    font: 2.46em 'Source Sans Pro', Arial, Helvetica, sans-serif;
    box-shadow: 7px 2px 19px 7px #0000008c;
}


footer {
    color: #a5a5a5;
    font-size: initial;
    position: fixed;
    bottom: 0px;
    width: 100vw;
    padding: 10px;
}

#center {
    text-align: center;
    position: fixed;
    top: 50%;
    width: fit-content;
    color: #a5a5a5;
    animation: start 1.0s forwards;
    left: 50%;
}



.open {
    background-color: #363636 !important;
    color: #363636 !important;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 11;
    animation: open 1s linear forwards;
}


span#name {
    margin-bottom: 0px;
    z-index: 10;
    position: relative;
    vertical-align: bottom;
    display: inline-block;
    overflow: hidden;
    height: 0px;
    animation: text_apear 0.5s linear forwards 1s;
}

div#line {
    width: 100%;
    height: 4px;
    background-color: #a5a5a5;
    z-index: 10;
    position: relative;
}

div#container_buttons {
    z-index: 1;
    top: -1px;
    position: relative;
}

.link {
    filter: grayscale(1);
    background-color: #a5a5a5;
    color: #363636;
    animation: button_unhover 0.4s linear;
    border: none;
    font-size: 50%;
    cursor: pointer;
    border-radius: 0px 0px 5px 5px;
    width: 72px;
    height: 51px;
    vertical-align: top;
}

.link:hover {
    outline-color: transparent;
    outline-style: none;
    animation: button_hover 0.4s linear 1;
    background-color: #363636; 
    color: #a5a5a5;
}

#games_button {
    position: relative;
    left: 40px;
    animation: games_button 0.5s linear forwards 0.6s;
}

#cv_button {
    position: relative;
    left: -40px;
    animation: cv_button 0.5s linear forwards 0.6s;
}

@keyframes background_slide {
    from { background-position: 0 0; }
    to { background-position: 0 -153px; }
}

@keyframes games_button {
    from { left: 40px; }
    to { left: 0px; }
}

@keyframes cv_button {
    from { left: -40px; }
    to { left: 0px; }
}

@keyframes button_hover {
    from { background-color: #a5a5a5; color: #363636; }
    to { background-color: #363636; color: #a5a5a5; }
}

@keyframes button_unhover {
    from { background-color: #363636; color: #a5a5a5; }
    to { background-color: #a5a5a5; color: #363636; }
}

@keyframes start {
    from { transform: scaleY(0.0) translateY(-50%) translateX(-50%); }
    to { transform: scaleY(1.0) translateY(-50%) translateX(-50%); }
}

@keyframes text_apear {
    from { height: 0px; }
    to { height: 50px; }
}