|
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|
|
|
body { |
|
overflow: hidden; |
|
background-size: cover; |
|
display: grid; |
|
align-items: center; |
|
justify-content: center; |
|
height: 1px; |
|
} |
|
.container { |
|
|
|
|
|
padding: 0px; |
|
justify-content: center; |
|
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); |
|
border-radius: 15px; |
|
background-color: rgba(255, 255, 255, .15); |
|
backdrop-filter: blur(10px); |
|
} |
|
.switch-field { |
|
border-radius: 30px; |
|
display: flex; |
|
margin-bottom: 5px; |
|
overflow: hidden; |
|
height: 50px; |
|
} |
|
|
|
.switch-field input { |
|
|
|
clip: rect(0, 0, 0, 0); |
|
height: 1px; |
|
width: 1px; |
|
border: 0; |
|
overflow: hidden; |
|
padding: 0px; |
|
margin: 0px; |
|
} |
|
|
|
.switch-field label { |
|
background-color: #e4e4e4; |
|
color: rgba(0, 0, 0, 0.6); |
|
font-size: 23px; |
|
font-family: Bahnschrift; |
|
font-weight: bold; |
|
line-height: 1; |
|
text-align: center; |
|
padding: 14px 16px; |
|
margin-right: -1px; |
|
border: 1px solid rgba(0, 0, 0, 0.2); |
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); |
|
transition: all 0.15s ease-in-out; |
|
} |
|
.switch-field label:hover { |
|
background-color: #888; |
|
color: rgba(0, 0, 0, 0.6); |
|
font-size: 23px; |
|
font-family: Bahnschrift; |
|
font-weight: bold; |
|
line-height: 1; |
|
text-align: center; |
|
padding: 14px 16px; |
|
margin-right: -1px; |
|
border: 1px solid rgba(0, 0, 0, 0.2); |
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); |
|
transition: all 0.1s ease-in-out; |
|
} |
|
|
|
.switch-field label:hover { |
|
cursor: pointer; |
|
} |
|
|
|
.switch-field input:checked + label { |
|
background-color: #000; |
|
color: #656565; |
|
box-shadow: none; |
|
} |
|
|
|
.switch-field label:first-of-type { |
|
border-radius: 4px 0 0 4px; |
|
} |
|
|
|
.switch-field label:last-of-type { |
|
border-radius: 0 4px 4px 0; |
|
} |
|
|
|
.form { |
|
max-width: 270px; |
|
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; |
|
font-weight: bold; |
|
line-height: 1.625; |
|
margin: 8px auto; |
|
padding-left: 16px; |
|
z-index: 2; |
|
} |
|
|
|
h2 { |
|
font-family: Bahnschrift; |
|
font-size: 20px; |
|
margin-bottom: 9px; |
|
} |
|
.area{ |
|
font-family: Bahnschrift; |
|
text-align:center; |
|
outline: 0; |
|
background: #f2f2f2; |
|
width: 80%; |
|
border: 3px solid #f2f2f2; |
|
margin: 0 0 10px; |
|
padding: 10px; |
|
box-sizing: border-box; |
|
font-size: 20px; |
|
height: 50px; |
|
border-radius: 25px; |
|
font-weight: bold; |
|
} |
|
|
|
.location{ |
|
font-family: Bahnschrift; |
|
outline: 0; |
|
background: #f2f2f2; |
|
width: 80%; |
|
border: 3px solid #f2f2f2; |
|
margin: 0 0 10px; |
|
padding: 10px; |
|
box-sizing: border-box; |
|
font-size: 20px; |
|
font-weight: bold; |
|
height: 50px; |
|
border-radius: 25px; |
|
} |
|
|
|
.submit{ |
|
font-family: Bahnschrift; |
|
background: #000; |
|
width: 80%; |
|
border: 3px solid #000; |
|
margin: 25px 0 10px; |
|
box-sizing: border-box; |
|
font-weight: bold; |
|
font-size: 20px; |
|
color: #fff; |
|
height: 50px; |
|
text-align: center; |
|
border-radius: 25px; |
|
} |
|
|
|
.result{ |
|
background: #000; |
|
font-family: Bahnschrift; |
|
width: 80%; |
|
border: 2px solid #fff; |
|
margin: 25px 0 20px; |
|
color: #fff; |
|
box-sizing: border-box; |
|
font-size: 23px; |
|
font-weight: bold; |
|
height: 50px; |
|
text-align: center; |
|
border-radius: 25px; |
|
padding-top: 10px; |
|
padding-bottom: 10px; |
|
} |
|
|
|
.img { |
|
background-image: url('thumb-1920-102834.jpg'); |
|
background-repeat: no-repeat; |
|
background-size: auto; |
|
background-size:100% 100%; |
|
-webkit-filter: blur(1px); |
|
-moz-filter: blur(1px); |
|
-o-filter: blur(1px); |
|
-ms-filter: blur(1px); |
|
|
|
position: fixed; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
} |
|
|
|
body, html { |
|
height: 100%; |
|
} |
