-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
78 lines (67 loc) · 1.42 KB
/
style.css
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
@import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@0,400;1,300&display=swap");
:root {
--colorWhite: #fff;
--borderRadius: 5px;
--font: "Roboto Serif", serif;
--none: none;
}
body {
padding: 0;
margin: 0;
box-sizing: border-box;
background: linear-gradient(to right, rgb(112, 111, 111), rgb(207, 207, 207), aliceblue);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.showcase {
box-shadow: 0 2px 5px 1px rgb(64 60 67 / 100%);
padding: 20px;
border-radius: var(--borderRadius);
line-height: 13px;
background-color: black;
opacity: 0.7;
}
@media (max-width: 656px) {
.showcase button {
width: 30%;
border: var(--border);
border-radius: var(--borderRadius);
}
.showcase input {
width: 60%;
border: var(--border);
outline: var(--none);
border-radius: var(--borderRadius);
}
.container {
height: 90vh;
}
}
.showcase input {
border: var(--none);
outline: var(--none);
border-radius: var(--borderRadius);
}
.showcase button {
border: var(--none);
padding: 5px 7px;
border-radius: var(--borderRadius);
}
.results > p,
p#namecity,
.weather > p,
h2 {
color: var(--colorWhite);
font-family: var(--font);
}
#namecity {
font-size: 20px;
}
#nosuchcity {
color: rgb(255, 0, 0);
}