/*
 * Error
 *
 */

html {
    height: 100%;
}

body {
    /*background: #662382;*/
    background: linear-gradient(145deg, rgba(2,0,36,1) 0%, rgba(92,39,152,1) 35%, rgb(225 211 104) 100%);
    font-family: 'Ubuntu', sans-serif;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 100%;
    color: #ffffff;
}

#particles{
    height: 100%;
    width: 100%;
}

#particles canvas {
    animation: appear 1.4s 1;
    animation-fill-mode: forwards;
    -webkit-animation: appear 1.4s 1;
    -webkit-animation-fill-mode: forwards;
}

#error{
    /*background: rgba(102, 35, 130, 0.5);*/
    height: 300px;
    left: 50%;
    margin: -200px 0 0 -250px;
    padding: 100px 0;
    position: absolute;
    top: 50%;
    width: 500px;
}

#error div {
    font-size: 14px;
    line-height: 20px;
    margin: 50px auto;
}

h1 {
    font-size: 20px;
    font-weight: 700;    
}

h2 {
    font-size: 16px;
    font-weight: 700;
}

a {
    color: #ffffff;
    text-decoration: none;
}

#logo {
    display: block;
    position: relative;
}

#gear {
    position: absolute;
    top: 22px;
    width: 66px;
    right: 116px;
}

@-webkit-keyframes appear {
    from {
        -ms-transform: scale(2);
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
    to {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
@keyframes appear {
    from {
        -ms-transform: scale(2);
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
    to {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}