App.css 2.11 KB
Newer Older
Spark's avatar
layouut    
Spark committed
1
2
3
4
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
  font-family: "Noto Sans KR", sans-serif !important;
Spark's avatar
Spark committed
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: flex;
}

#root {
  width: 100%;
  min-height: 100%;
}

#footer{
  position: relative;
  bottom: 1em;
  padding-top: 2em;
}
21

Spark's avatar
Spark committed
22
23
24
.form-check-input{
  cursor: pointer;
  box-shadow: none !important;
Spark's avatar
Spark committed
25
}
26

Spark's avatar
Spark committed
27
28
.form-check-input:checked {
  background-color: #04AB70 !important;
Spark's avatar
Spark committed
29
30
  border: none;
  }
Spark's avatar
Spark committed
31

Spark's avatar
Spark committed
32
33
34
#btnlink {
  color: white !important;
  text-decoration: none !important;
Spark's avatar
Spark committed
35
36
37
  min-width: 100%;
  margin: auto;
  height: 100%;
Spark's avatar
Spark committed
38
}
39
40
41
42
43
44
45

.btn-primary:active {
  outline: white !important;
  border-color: white !important;
}

.card .card-title {
46
47
48
49
  color: rgb(70, 70, 70);
  font-size: 1.5em;
}

Spark's avatar
Spark committed
50
51
52
53
54
#impactTitle {
  margin: 1em;
  font-size: 1.5em;
}

55
.card .card-subtitle {
Spark's avatar
Spark committed
56
  display: flex;
57
  color: rgb(129, 129, 129);
Spark's avatar
Spark committed
58
  align-items: center;
Spark's avatar
Spark committed
59
  justify-content: center;
Spark's avatar
Spark committed
60
  font-weight: 300;
Spark's avatar
Spark committed
61
62
}

Spark's avatar
Spark committed
63

Spark's avatar
Spark committed
64
65
66
.form-group .form-control {
  border-radius: 40px;
}
67

Spark's avatar
Spark committed
68
69
70
71
72
#formbtn {
  width: 100%;
  border-radius: 40px;
  background-color: rgb(110, 189, 142);
  border-color: ivory;
73
  color: white;
Spark's avatar
Spark committed
74
75
76
}

#logpng {
Spark's avatar
Spark committed
77
78
79
  width: 50%;
  height: 6em;
  object-fit: cover;
Spark's avatar
Spark committed
80
81
82
}

#socialLink {
Spark's avatar
Spark committed
83
84
85
86
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
Spark's avatar
Spark committed
87
88
  padding: 0.5em;
  color: gray;
Spark's avatar
Spark committed
89
  font-size: 0.8em;
Spark's avatar
Spark committed
90
  width: fit-content;
Spark's avatar
layouut    
Spark committed
91
92
}

Spark's avatar
Spark committed
93

Spark's avatar
layout    
Spark committed
94
95
@media (max-width: 767.98px) { 
  body {
96
    padding: 30px;
Spark's avatar
layout    
Spark committed
97
98
99
    padding-left: 20px;
    padding-right: 20px;
    margin: auto;
Spark's avatar
layouut    
Spark committed
100

Spark's avatar
tsx    
Spark committed
101
  }
Spark's avatar
layout    
Spark committed
102
103
104
105
  .container-fluid {
    max-width: 480px !important;
  }
  
Spark's avatar
Spark committed
106
  #stickyy {
107
108
109
110
    max-width: 400px;
  }

  #contour {
Spark's avatar
Spark committed
111
    padding-bottom: 1em;
112
    color: rgba(195, 195, 195, 0.753);
Spark's avatar
Spark committed
113
114
  }
  
Spark's avatar
layout    
Spark committed
115
 }
Spark's avatar
tsx    
Spark committed
116

Spark's avatar
layout    
Spark committed
117
118
119
120
121
122
123
@media (min-width: 768px) {
  body {
    padding: 30px;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
  }
Spark's avatar
layouut    
Spark committed
124

Spark's avatar
layout    
Spark committed
125
  .container-fluid {
Spark's avatar
Spark committed
126
    max-width: 1000px !important;
Spark's avatar
Spark committed
127
128
    min-height: 90%;
    
Spark's avatar
tsx    
Spark committed
129
  }
Spark's avatar
Spark committed
130

Spark's avatar
layout    
Spark committed
131
132
  .container-fluid .row #stickyy {
    position: sticky !important;
Spark's avatar
Spark committed
133
134
135
    top: 40px;
    width: fit-content;
    height: fit-content;
136
137
138
    max-width: 300px;

  }
Spark's avatar
Spark committed
139

140
141
  #contour {
    display: none;
Spark's avatar
tsx    
Spark committed
142
  }
Spark's avatar
layout    
Spark committed
143
144

 }