reprogl

1
@import 'settings';
2

3
$color-404: #FFAB00;
4

5
* {
6
    -webkit-box-sizing: content-box;
7
    box-sizing: content-box;
8
}
9

10
body {
11
    padding: 0;
12
    margin: 0;
13
    background-image: url('/errors/FVS.jpg');
14
    font-family: $main-font;
15
}
16

17
.error-div {
18
    position: relative;
19
    height: 100vh;
20
    background-color: rgba(34, 34, 34, 0.85);
21

22
    .error {
23
        position: absolute;
24
        left: 50%;
25
        top: 50%;
26
        -webkit-transform: translate(-50%, -50%);
27
        -ms-transform: translate(-50%, -50%);
28
        transform: translate(-50%, -50%);
29
        background-color: #222;
30
        padding: 68px 92px;
31
        border-radius: 32px;
32
    }
33
}
34

35
.error {
36
    max-width: 460px;
37
    width: 100%;
38
    text-align: center;
39
    line-height: 1.4;
40

41
    .error-header {
42
        height: 158px;
43
        line-height: 153px;
44

45
        h1 {
46
            color: #222;
47
            font-size: 130px;
48
            letter-spacing: 10px;
49
            margin: 0;
50
            font-weight: 700;
51
            text-shadow: 0 0 4px #AAA;
52

53
            span {
54
                text-shadow: 2px 2px 0 $color-404, -2px -2px 0 $color-404, 0 0 32px $color-404;
55
            }
56
        }
57
    }
58

59
    p {
60
        color: #c9c9c9;
61
        font-size: 16px;
62
        font-weight: 400;
63
        margin-top: 0;
64
        margin-bottom: 15px
65
    }
66

67
    a {
68
        font-size: 14px;
69
        text-decoration: none;
70
        text-transform: uppercase;
71
        background: 0 0;
72
        color: #c9c9c9;
73
        border: 2px solid #c9c9c9;
74
        display: inline-block;
75
        padding: 10px 25px;
76
        font-weight: 700;
77
        -webkit-transition: .3s all;
78
        transition: .3s all;
79

80
        &:hover {
81
            color: $color-404;
82
            border-color: $color-404;
83
        }
84
    }
85
}
86

87
@media only screen and (max-width: 480px) {
88
    .error .error-header {
89
        height: 122px;
90
        line-height: 122px;
91

92
        h1 {
93
            font-size: 100px;
94
        }
95
    }
96
}
97