const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

:root {
  --app-max-width: 600px;
}

#app {
  --main-color: midnightblue;
  
  padding: calc(50% - var(--app-max-width) / 2);
  background: linear-gradient(
    90deg, 
    var(--main-color) 0%,
    var(--dynamic-color, white) 100%
  );
}

:root {
  --tilted-gradient: linear-gradient(
    calc(var(--tilt-angle) * 1deg),
    black 0%,
    white 100%
  );
}

.tilted {
  --tilt-angle: 45;
  background-image: var(--tilted-gradient);
}

*, .withTiltedGradient {
  --tilted-gradient: linear-gradient(
    calc(var(--tilt-angle) * 1deg),
    black 0%,
    white 100%
  );
}

.tilted {
  --tilt-angle: 45;
  background-image: var(--tilted-gradient);
}