FalloutMemoryGame/style.css at main · MiltonMelson/FalloutMemoryGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
:root {
   --clr-neon: #ff0000;
}

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   height: 100vh;
   display: flex;
   background: black;
}

.memory-game {
   width: 500px;
   height: 500px;
   display: flex;
   margin: 0 auto auto;
   flex-wrap: wrap;
   perspective: 1000px;
}

.memory-card {
   width: calc(25% - 10px);
   height: calc(33.33% - 10px);
   margin: 0.3125rem;
   position: relative;
   transform: scale(1);
   transform-style: preserve-3d;
   transition: transform 1s;
}

.memory-card:active {
   transform: scale(.97);
   transition: transform .2s;
}

.memory-card.flip {
   transform: rotateY(180deg);
}

.memory-card:hover {
   box-shadow: 0 0 5px 2px #ff0000
}

.front-card,
.back-card {
   width: 100%;
   height: 100%;
   padding: 0.0625rem;
   position: absolute;
   border-radius: 0.3125rem;
   backface-visibility: hidden;
}

.front-card {
   transform: rotateY(180deg);
   background: white;
}

.glow {
   font-size: 3.5rem;
   text-align: center;
   color: #fff;
   margin-left: 10px;
   -webkit-animation: glow 1s ease-in-out infinite alternate;
   -moz-animation: glow 1s ease-in-out infinite alternate;
   animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
   from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60000, 0 0 40px #e60000, 0 0 50px #e60000, 0 0 60px #e60000, 0 0 70px #e60000;
   }

   to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4d4d, 0 0 40px #ff4d4d, 0 0 50px #ff4d4d, 0 0 60px #ff4d4d, 0 0 70px #ff4d4d, 0 0 80px #ff4d4d;
   }
}