body { .page { div.login-wrapper { display: flex; align-items: center; justify-content: center; height: auto; max-width: 500px; margin: 0 auto; margin-top: 85px; div.login { text-align: center; flex: 0 0 auto; h1 { color: #2636F9; font-size: 3.5em; font-weight: bold; } h2 { margin: 30px 10px 0px 10px; font-size: 2em; font-weight: bold; color: #333; } hr { margin-top: 50px; border-top: 1px #2636F9 solid; width: 2em; } button.login { margin-top: 20px; color: #2636F9; font-size: 1.3em; background-color: white; padding: 7px 35px; border: 1px #2636F9 solid; &:hover, &:active { color: white; background-color: #2636F9; } } } } div.dates-wrapper { div.dates { max-width: 700px; margin: 0 auto; margin-top: 85px; h2 { color: #2636F9; font-size: 3.3em; font-weight: bold; text-align: center; } form { margin-top: 65px; div.month-row { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; div.month-button { -webkit-flex-grow: 1; flex-grow: 1; text-align: center; label.radio-inline { text-align: center; color: #999; padding: 10px; font-size: 1.2em; width: 160px; border: 1px #999 solid; margin-bottom: 20px; } input[type="radio"] { display: none; &:checked + label.radio-inline { color: #fff; background-color: #2636F9; border: 0px; } } } } div.years { margin-top: 20px; text-align: center; label.radio-inline { color: #999; padding: 9px 40px; font-size: 1.6em; } input[type="radio"] { display: none; &:checked + label.radio-inline { color: #2636F9; font-weight: bold; } } } div.error { color: #2636F9; width: 400px; text-align: center; margin: 0 auto; margin-top: 30px; } } } } div.photos-wrapper { h4 { color: #2636F9; font-size: 1em; text-align: center; margin-bottom: 0px; } h2 { margin-top: 0px; color: #2636F9; font-size: 2.3em; font-weight: bold; text-align: center; } div.photos { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; div.photo { margin: 3px 8px; width: 54px; height: 74px; div.title { color: #333; font-size: 0.7em; text-align: center; } img { height: 54px; width: 54px; } canvas { width: 54px; height: 54px; } } } div.dominants { margin: 0 auto; width: 400px; div.dominant { text-align: left; flex: 0 0 auto; h3 { color: #2636F9; } div.color { background-color: red; height: 72px; } h5 { color: #808080; } } } div.final { text-align: center; } } } }