/** variables **/

:root {
  --back: #000;
  --text: #993fe8;
  --link: #993fe8;
  --logo: #993fe8;

  font-size: 125%;
}

/** fonts **/

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local("Ubuntu Light"),
    local("Ubuntu-Light"),
    url("fonts/Ubuntu-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Ubuntu Bold"),
    local("Ubuntu-Bold"),
    url("fonts/Ubuntu-Bold.ttf") format("truetype");
}

/** defaults for all elements **/

* {
  box-sizing: border-box;

  margin: 0;
  outline: 0;  /* Avoid outline on focus */
  border: 0;
  padding: 0;
  scrollbar-width: none;

  color: var(--text);
  background-color: var(--back);
  -webkit-tap-highlight-color: transparent;

  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
}

/** elements **/

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:active,
a:hover {
  color: var(--back);
  background-color: var(--link);
}

/** sections **/

.title {
  padding: 2rem 1rem 0 1rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--logo);
}

.by {
  padding: 0 1rem 2rem 1rem;
  text-align: center;
}

.logo {
  flex-grow: 1;
  background-image: url("wro-bar-640x1400.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ask {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.5rem;
}