F_MNIST

1
h1,h2, h3,h4, h5, h6, * {
2
    margin: 0;
3
    padding: 0;
4
    box-sizing: border-box;
5
}
6

7
body {
8
    background: rgb(82, 36,8);
9
}
10
.canvas {
11
    background-color: white;
12
    border-radius: 20px;
13
}
14
.section-main {
15
    display: flex;
16
    flex-direction: column;
17
    align-items: center
18
}
19

20
.headDescr__heading, .headDescr__descr {
21
    display: inline-block;
22
    text-align: center;
23
}
24

25
.headDescr__heading {
26
    color: white;
27
    font-size: 60px;
28
    font-weight: 700;
29
    margin-bottom: 10px;
30
}
31

32
.headDescr__descr {
33
    color: white;
34
    font-size: 20px;
35
}
36

37
.main__block {
38
    width: 600px;
39
    display: flex;
40
    flex-direction: column;
41
    align-items: center
42
}
43

44
.main_headDescr {
45
    display: flex;
46
    flex-direction: column;
47
}
48

49
.blockPredict {
50
    width: max-content;
51
    display: flex;
52
    flex-direction: column;
53
    align-items: center;
54
}
55

56
.buttons {
57
    width: 100%;
58
    margin-bottom: 20px;
59
    display: flex;
60
    justify-content: space-between;
61
}
62

63
.canvas {
64
    width: 280px;
65
    height: 280px;
66
    margin-bottom: 10px;
67
}
68

69
.button {
70
    font-size: 20px;
71
    padding: 2px 5px;
72
    outline: none;
73
    color: white;
74
    border: none;
75
    border-radius: 5px;
76
    cursor: pointer;
77
}
78

79
.buttonClear {
80
    background-color: pink;
81
}
82

83
.buttonPredict {
84
    background-color: aqua;
85
}
86

87
.button:hover {
88
    transform: scale(1.1);
89
    box-shadow: 2px 2px 10px white;
90
}
91

92
.button:active {
93
    transform: scale(0.95);
94
}
95

96
.predictElem {
97
    font-size: 100px;
98
    color: white;
99
}