style.css

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.6em;
  background-repeat: no-repeat;
  background-image: url("https://images.unsplash.com/photo-1474921751718-0692526ddaeb?dpr=1.25&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop");
  background-attachment: fixed;
  color: #ecf0f1; }
  @media screen and (min-width: 1860px) {
    body {
      background-position: center;
      background-image: url("https://images.unsplash.com/photo-1474921751718-0692526ddaeb?dpr=1.25&auto=format&fit"); } }
  @media screen and (min-width: 0px) and (max-width: 1023px) {
    body {
      background-position: center;
      background-image: url("https://images.unsplash.com/photo-1470267826516-96fa10965c57?dpr=1.25&auto=format&fit=crop&w=1500&h=2247&q=80&cs=tinysrgb&crop="); } }
  body h1 {
    font-size: 4vw;
    font-weight: 900;
    margin-bottom: 3%; }
    @media screen and (min-width: 0px) and (max-width: 1023px) {
      body h1 {
        color: #34495e; } }
    @media screen and (min-width: 1860px) {
      body h1 {
        color: #34495e; } }
  body div section:first-of-type {
    margin-bottom: 3%;
    transition: 2s; }
  body div :nth-of-type(2) {
    margin-bottom: 2%; }
    body div :nth-of-type(2) p {
      padding: .3% 2% 0% 2%; }
  body select {
    background-color: #ecf0f1;
    color: #2c3e50;
    border-radius: 5%; }
    body select option {
      color: #2c3e50;
      font-weight: bold 700; }
  body section h2 {
    padding-top: 1.2%; }
  body section select:last-of-type {
    margin-bottom: 1.5%; }
  body footer {
    margin: 3.5% 0% 2% 0%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 5% 1% 3% 1% !important; }
    body footer select {
      height: 10%;
      margin-bottom: .9%; }
      @media screen and (max-width: 647px) {
        body footer select {
          width: 40%;
          align-self: center; } }
      @media screen and (max-width: 767px) {
        body footer select {
          width: 30%;
          align-self: center; } }
    @media screen and (max-width: 767px) {
      body footer {
        flex-direction: column; } }
    body footer a:link, body footer a:visited, body footer a:hover, body footer a:active {
      text-decoration: none; }
    body footer a:link, body footer a:visited {
      color: #2994b2;
      transition: .5s; }
    body footer a:hover {
      color: #fce38a;
      transition: .6s; }
    body footer a:active {
      letter-spacing: 2px;
      transition: 1s; }
  @media screen and (min-width: 0px) and (max-width: 700px) {
    body h1 {
      font-size: 7vw; } }
  @media screen and (min-width: 2160px) {
    body h1 {
      font-size: 3.5vw; } }
  @media screen and (min-width: 2456px) {
    body h1 {
      font-size: 3vw; } }
  @media screen and (min-width: 1500px) {
    body p {
      font-size: 1.7em; } }
  @media screen and (min-width: 320px) and (max-width: 960px) {
    body button {
      font-size: 1.3em; } }
  @media screen and (min-width: 1200px) and (max-width: 1500px) {
    body button {
      font-size: 1.5em; } }
  @media screen and (min-width: 1600px) {
    body button {
      font-size: 1.9em; } }
  @media screen and (min-width: 1500px) {
    body select {
      font-size: 2em; }
      body select option {
        font-size: 100%; } }

.magic-window {
  background-color: rgba(0, 0, 0, 0.7);
  padding-top: 2%;
  padding-bottom: 3%; }

.accented-text, .accented-text-variant {
  color: #2994b2;
  font-size: 1.7em;
  font-weight: bold 700;
  padding-top: 1.5%;
  padding-bottom: 0.5%; }
  @media screen and (min-width: 1500px) {
    .accented-text, .accented-text-variant {
      font-size: 3.5em; } }

.accented-text-variant {
  color: #fbdd71; }

.generic-button, .soc-net-login-button {
  color: #ecf0f1;
  padding: 1% 2% 1% 2%;
  border-radius: 30px;
  border: none;
  background-color: #2994b2;
  transition: 1.2s;
  margin-bottom: 2%; }

.generic-button:hover, .soc-net-login-button:hover {
  color: #2c3e50;
  background-color: #fce38a;
  transition: 1.2s; }

.soc-net-login-button {
  background-color: #3b5998;
  font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif; }

.soc-net-login-button:hover {
  background-color: #4c70ba;
  transition: 1.2s; }

.fade-enter-active {
  transition: opacity .5s; }

.fade-enter, .fade-leave-to {
  opacity: 0; }

/*# sourceMappingURL=style.css.map */