:root {
    --main: #5959E9;
    --mainL: #7d68ff;
    --shadow: #2f3039;

    --text: #fefefed9;

    --bg: #1b1c21;
    --bgL: #202124;
    --bgT: #1b1c21d9;
}

html, body{
    width: 100%;
    margin: 0px;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    background-color: var( --bg);
    scroll-behavior: smooth; 
    color: var(--text);
    transition: 0.3s;
}

h1{
    margin-top: 0px;
    padding-top: 70px;
    font-size: 55px;
    color: var(--main);
    text-shadow: 2px 2px 1px var(--shadow);
}

hr{
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
}


footer{
    width: 100%;  
    margin-top: 50px;
    font-size: 13px;
    text-align: center;
}

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

.container{
    position: relative;
}

.container-centered{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.link, .link:visited{
    color: var(--main);
    text-decoration: none;
}

.link:hover{
    color: var(--mainL);
}

.moveUP{
    position: fixed;
    z-index: 5;
    left: calc(100% - 40px);
    bottom: 35px;
    width: 30px;
    height: 30px;
}

.moveUP:hover{
    content:url(../images/arrow-up-hover.svg);
}

::-moz-selection,  { /* Code for Firefox */
    background-color: var(--main);
}
  
::selection {
    background-color: var(--main);
}

h1::selection, .link::selection {
    background-color: var(--text);
}

h1::-moz-selection, .link::-moz-selection {
    background-color: var(--text);
}

@media screen and (max-width: 685px) {
    footer{
        margin-top: 0px;
    }
}