ZombiesDevGame/style.css at main · San-QP/ZombiesDevGame · 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  outline: none;
}

:root {
  --color-pink: #ff0156;
  --color-green: #66ec7f;
}

body {
  background-image: url(/img/background.jpg);
  height: 100vh;
  width: 100vw;
  /* overflow: hidden;  hay que quitarlo al no ser responsivo debemos permitir hacer scroll en pantallas pequeñas*/
  font-family: "Pixelify Sans";
}

.logo {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

header {
  margin: 20px 36px;
  height: 100px;
  background: linear-gradient(
    88deg,
    #6e20f6 0.91%,
    #00c6ee 25.73%,
    #7707d7 65.84%,
    #ff0156 96.39%
  );
  border-bottom: solid 20px transparent;
  border-image: linear-gradient(
      90deg,
      #2f04ed 0%,
      #00c6ee 28%,
      #7707d7 65.84%,
      #ff001d 100%
    )
    1;
}

header ul {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

header ul li {
  list-style-type: square;
  margin-right: 20px;
  font-size: 32px;
  font-weight: bold;
}

header ul li:hover {
  color: #fff;
}

main {
  margin: 0 36px;
  border: 20px solid transparent;
  height: 82vh;
  border-image: linear-gradient(
      76deg,
      #ff0156 0.91%,
      #7707d7 31.46%,
      #00c6ee 71.57%,
      #6e20f6 96.39%
    )
    1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main h1 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 40%;
}

main h2 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

button {
  margin-top: 40px;
  background-color: transparent;
  color: var(--color-green);
  font-size: 40px;
  text-shadow: 5px 5px 0 var(--color-pink);
  padding: 20px;
  border: 5px solid var(--color-green);
  box-shadow: 5px 5px 0 var(--color-pink);
  font-family: "Pixelify Sans";
}

button:hover {
  transform: translateY(2px);
  border: 5px solid var(--color-pink);
  box-shadow: 5px 5px 0 var(--color-green);
}

.start {
  font-size: 24px;
  text-align: center;
  color: #4d4d92;
  margin-top: 20px;
}