convert css to scss for its nesting feature

[tangway]

this is so that inheritance and cascade issues can be more visually noticeable when looking at the code

can also take advantage of its mixin declarations which has a syntax like a function where you place variables as arguments. you can then re-use styles by calling the mixin with variables you have declared or with the direct values of the colors

as a bonus scss deals with comments within css rules better than vanilla css, this makes it easier to make annotations and not cause errors when you comment them out. for example if i comment out this whole block of body element properties in vanilla css on vscode, it would cause a parsing error

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* is a default setting and is actually not needed */
  padding-top: 10vh; /* sets padding to 10% of viewport height */
  background-image: linear-gradient(120deg, #fdfbfb 0%, #9fb4ca 100%);
  background-size: auto 150vh; /* sets the background width to auto and height to 150% of vp so we see more of the white bg*/
  background-repeat: no-repeat; /* makes sure the image doesn't repeat */
  // background-image: url('/pexels-photo-414171.jpeg'); /* sun and mountain bg image */
}

[tangway]

took some time to think about how to rename these variables since they are inversions of each other:

$choice-button-bg: #fcfcfd;
$choice-button-color: #36395a;
$next-button-bg: #36395a;
$next-button-color: #fcfcfd;

settled on:

$button-bg: #fcfcfd;
$button-text-color: #36395a;
$inverted-bg: $button-text-color;
$inverted-text-color: $button-bg;