﻿.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../gif/pre1.gif') 50% 50% no-repeat rgb(249,249,249);
}
body {
    font-family: 'Arvo', serif;
    background: #ABCDEF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    min-height: 90vh;
    transition: 1s;
}

.error {
    color: #20293F;
    box-shadow: 0 5px 0px -2px #20293F;
    text-align: center;
    animation: fadein 1.2s ease-in;
}

    .error > .code {
        font-size: 10.5em;
        text-shadow: 0 6px 1px rgba(0,0,0,0.0980392), 0 0 5px rgba(0,0,0,0.0980392), 0 1px 3px rgba(0,0,0,0.298039), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.247059), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.14902);
        margin: 0;
    }

    .error > .desc {
        text-shadow: 0px 3px 5px rgba(0,0,0,0.5), 0px 6px 20px rgba(0,0,0,0.3);
        font-weight: 400;
    }

@keyframes fadein {
    0% {
        margin-top: -50px;
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

footer {
    position: absolute;
    bottom: 0px;
}


.button:link, .button:visited {
    position: relative;
    display: inline-block;
    width: 15em;
    height: 3em;
    border-top: 1px solid hsla(240, 9%, 6%,1);
    border-radius: 3px;
    background: hsla(240, 9%, 11%,1);
    border-radius: 2px;
    box-shadow: 0 1px 0 hsla(255,255%,255%,0.05), 0 0 1px hsla(255,255%,255%,0.1), inset 0 1px 2px hsla(0,0%,0%,0.2);
    transition: all .1s ease;
    z-index: 1;
}

    .button:link:before, .button:visited:before {
        position: absolute;
        top: 2px;
        right: 3px;
        bottom: 3px;
        left: 3px;
        padding: .5em 0 0;
        border-radius: 2px;
        background: linear-gradient(to bottom, hsla(240, 8%, 15%,1), hsla(240, 8%,9%,1));
        box-shadow: inset 0 1px 0 hsla(255,255%,255%,0.05), inset 0 0 1px hsla(255,255%,255%,0.1), 0 4px 6px hsla(0,0%,0%,0.85), 0 1px 2px hsla(0,0%,0%,0.9);
        color: hsla(0, 0%, 87%,1);
        font-weight: normal;
        font-size: 117%;
        text-shadow: 0 -1px 1px hsla(0,0%,0%,0.5);
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .08em;
        line-height: 1.2;
        content: "BACK TO HOME PAGE";
        z-index: 0;
    }

.button:hover:before {
    background: hsla(26, 98%, 47%,1);
    background: linear-gradient(to bottom, hsla(240, 9%, 18%,1), hsla(240, 6%, 12%,1));
    color: hsla(0, 0%, 96%,1);
}

.button:active:before {
    border-top: 1px solid hsla( 0, 0%, 1%,1);
    background: hsla(26, 98%, 47%,1);
    background: linear-gradient(to bottom, hsla(240, 6%, 7%,1), hsla(240, 8%, 7%,1));
    color: hsla( 0, 0%, 20%, 1);
    box-shadow: inset 0 1px 3px hsla(0,0%,0%,0.3), inset 0 0 2px hsla(0,0%,0%,0.6), 0 1px 0 hsla(0,0%,20%,1);
}
