PollVerlaine/static/css/main.css

@import url("/static/fonts/Nunito/Nunito.css");
@import url("/static/fonts/PTSerif/PTSerif.css");

html, body
{
  margin: 0;
  padding: 0;
}

body
{
  background: #242424;
  color: #ECECEC;

  font-family: "Nunito", sans-serif;
}

::-moz-focus-inner
{ border: none; }

body h1
{
  display: block;
  margin: 1em auto;
  font-size: 4em;
  font-weight: 300;
  text-align: center;
}

main
{
  margin: 0 5%;
}

main p
{
  font-size: 1.5em;
  text-align: center;
}
main p strong
{
  font-family: "PT Serif", serif;
  font-size: 1.2em;
  font-weight: normal;
}

main input,
main button,
main a.button
{
  transition: background 0.1s ease-in;
  display: block;
  margin: auto;
  padding: 1em;
  width: 25rem;
  box-sizing: border-box;

  background: #141414;
  color: #ECECEC;
  border: none;
  outline: none;

  font-size: 1.3em;
  text-align: center;
  text-decoration: none;
}
main input[type="submit"],
main button,
main a.button
{ cursor: pointer; }

main input[type="submit"],
a.button.margin
{ margin-top: 1em; }

main input:focus,
main input[type="submit"]:hover,
main button:hover,
main a.button:hover
{ background: #1D1D1D; }

main input[name="title"],
main input[name="title"]:focus
{
  background: transparent;
  font-family: "PT Serif", serif;
  font-size: 1.5em;
}

@keyframes scalex
{
  0%
  { transform: scaleX(0); }
  100%
  { transform: scaleX(1); }
}

main #choices .choice
{
  animation: scalex 0.2s linear;
  display: flex;
  flex-direction: row;
  margin: auto;
  width: 25rem;
}
main #choices .choice > *
{ margin: 0; }
main #choices .choice input
{ font-family: "PT Serif", serif; }
main #choices .choice .delete
{
  background: #FF2E31;
  width: 4em;
}

/*
 * IFNEZIUN
 */
h1.poll
{
  margin: 1.5em 5%;
  font-family: "PT Serif", serif;
  font-size: 2.5rem;
}

.option
{
  display: flex;
  align-items: center;
  margin: auto;
  width: 25rem;
  box-sizing: border-box;

  background: #141414;
}
.option > input
{
  position: absolute;
  float: left;
  width: 0;
  opacity: 0;
  cursor: pointer;
}
.option > .check
{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1em;
  padding: 0;
  width: 1.25em;
  height: 1.25em;
  background: #202020;
}
.option > .check::before
{
  content: "";
  transition: transform 0.1s linear, border-radius 0.4s ease-out;
  display: block;
  background: #0088E5;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  transform: scale(0);
}
.option input:checked ~ .check::before
{ border-radius: 0; transform: scale(1); }
.option > label
{
  flex: 1;
  display: block;
  padding: 1em;
  font-family: "PT Serif", serif;
  font-size: 1.2em;
  cursor: pointer;
}

/*
 * JHFNDSJH
 */

main.results
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
main.results > *
{ flex: 1; }

main.results .chart
{ flex: 2; max-height: 70vh; }
main.results .chart > svg
{ display: block; margin: auto; height: 100%; }

main.results .options table
{
  margin: 0;
  padding: 0 3em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 1.5em;
}
main.results .options table td
{ text-align: right; }
main.results .options .number
{
  font-family: "PT Serif", serif;
  font-size: 2em;
}

footer
{
  display: block;
  margin: 5em;
  color: #8E8E8E;

  font-size: 0.9em;
  font-weight: 700;
  text-align: center;
}