html, body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Arial", sans-serif;
overflow: hidden;
height: 100vh;
max-height: 100vh;
}
html { background-color: #56bff4; }
/* Color themes applied to */
html.harold { background-color: #a84fa9; }
html.la-ronde { background-color: #ffe400; }
html.armando { background-color: #56bff4; }
html.spokane { background-color: #e8666e; }
html.evente { background-color: #32cd37; }
html.montage { background-color: white; }
html.whose-line { background-color: #13b5a6; }
html.jts-brown { background-color: #ba8642; }
html.bat { background-color: #91a8b2; }
h1 {
display: block;
font-size: .75em;
margin: 0;
font-weight: bold;
}
#top {
height: 15vh;
box-sizing: border-box;
display: flex;
padding: 6px;
}
#top div {
height: 100%;
box-sizing: border-box;
}
#title {
width: 70%;
font-size: 38px;
line-height: 28px;
}
#settings {
width: 30%;
height: 65px !important;
text-align: right;
z-index: 99;
}
#gear-outer {
height: 50px !important;
width: 50px;
border-radius: 30px;
margin-left: auto;
margin-right: 0;
transform: rotate(100deg);
transition: transform 2500ms ease-in-out;
cursor: pointer;
}
#gear_svg { border-radius: 30px; }
#gear_svg path {
fill: rgb(0%, 0%, 0%);
fill-opacity: 1;
}
#middle {
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#suggestion-outer {
height: 100%;
display: flex;
align-items: center;
}
.shrink2 {
font-size: 30px !important;
line-height: 34px !important;
}
.shrink1 {
font-size: 42px !important;
}
#suggestion {
width: 100vw;
text-align: center;
font-size: 52px;
padding: 4px;
text-transform: uppercase;
font-weight: 800;
box-sizing: border-box;
line-height: 48px;
}
#bottom {
height: 15vh;
}
#next {
text-align: center;
font-size: 24px;
font-weight: bold;
outline: 6px solid black;
border-radius: 10px;
padding: 15px;
width: 30%;
margin: 0 auto;
margin-top: 5%;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Heart animation */
#heart {
display: none;
position: fixed;
width: 90px;
height: 90px;
z-index: -3;
margin: 0 auto;
animation: stretch 0.4s ease-out alternate infinite running;
}
#heart:before, #heart:after {
position: fixed;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: black;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes stretch {
0% { transform: scale(.75); }
100% { transform: scale(1.0); }
}
/* Settings panel */
#settings-dashboard {
border-top: 4px solid black;
background-color: #F0FFF0;
position: absolute;
width: 100%;
height: 100%;
top: 100%;
overflow: hidden;
transition: all 2s;
color: #000;
}
#settings-dashboard.open { top: 0; }
#settings-title {
display: block;
font-size: 2.5em;
padding: 6px;
font-weight: bold;
}
#setting-fields {
text-transform: uppercase;
margin-top: 1.5rem;
}
.setting-field {
padding: 6px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.setting-header {
font-weight: 800;
padding-left: 12px;
font-size: 1.5rem;
margin-top: 36px;
}
.setting-field-btn, #themes div {
text-align: center;
padding: 6px;
margin: 8px;
outline: 1px solid black;
font-weight: 800;
border-radius: 6px;
flex-basis: 25%;
cursor: pointer;
user-select: none;
}
#themes div {
height: 44px;
vertical-align: middle;
line-height: 44px;
white-space: nowrap;
}
.selected { outline: 7px solid black !important; }
/* Theme swatches */
.harold { background-color: #a84fa9; }
.la-ronde { background-color: #ffe400; }
.armando { background-color: #56bff4; }
.evente { background-color: #32cd37; }
.montage { background-color: white; }
.whose-line { background-color: #13b5a6; }
.jts-brown { background-color: #ba8642; }
#themes .whose-line, #themes .jts-brown { font-size: 0.85em; }
.spokane { background-color: #e8666e; }
.bat { background-color: #91a8b2; }
.bottom-text {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
width: 360px;
text-align: center;
text-transform: none;
}
.bottom-text a { white-space: nowrap; color: #333; }
.multi-select {
font-weight: initial;
float: right;
font-size: initial;
padding: 6px 9px 0px;
}
.checkbox {
height: 12px;
width: 12px;
outline: 2px solid black;
display: inline-block;
border-radius: 2px;
margin: 0px 8px;
cursor: pointer;
}
.checkbox-inner {
height: 100%;
width: 100%;
background-color: black !important;
}
.unchecked { background-color: honeydew !important; }
/* Responsive */
@media (max-width: 350px) {
.setting-field-btn { flex-basis: 24%; font-size: smaller; }
#themes div { font-size: smaller; padding: 4px; }
.bottom-text { font-size: smaller; }
#suggestion { font-size: 36px; line-height: 40px; }
.shrink2 { font-size: 20px !important; line-height: 26px !important; }
.shrink1 { font-size: 30px !important; line-height: 36px !important; }
}
@media (min-width: 500px) {
#setting-fields { padding: 0px 50px !important; }
h1 { font-size: 1em; }
}
@media (min-width: 600px) {
#setting-fields { padding: 0px 100px !important; }
}
@media (min-width: 800px) {
#setting-fields { padding: 0px 200px !important; }
}
@media (min-width: 1150px) {
#setting-fields { padding: 0px 350px !important; }
}
@media (max-height: 580px) {
.bottom-text { display: none; }
}
/* Safari MacOS fix */
@media not all and (min-resolution: 0.001dpcm) {
.checkbox { border: 2px solid black; outline: none; }
#next { border: 6px solid black; outline: none; }
.setting-field-btn, #themes div { border: 2px solid black; outline: none; margin: 6px !important; }
.selected { outline: none !important; box-shadow: 0 0 0 4px black; }
.setting-header { margin-top: 14px !important; }
}