@import "normalize.css";
@import "navigation.sass";
@import "flaticon.css";

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Playfair+Display|Bree+Serif|Lato|Source+Sans+Pro|Montserrat|Inconsolata);

@mixin long-shadow-text ($distance, $blur, $color) {
  $shadows: null;
  $color: darken($color, 10);
  $blur: $blur + px;
  @for$i from 0 through $distance {
    $dist: $i + px;
    $shadows: append($shadows, ($dist $dist $blur $color), comma);
  }
  text-shadow: $shadows;
}

body {
  background-color: #7aa2cb;
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
}

.flexcontainer {
  display: flex;
  flex-direction: column;
}

.first-page {
  background: linear-gradient(#070a15, #252b46); /* Standard syntax */
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  height: 100vh;
  flex-direction: column;
}

.logo {
  font-family: 'Montserrat', serif;
  font-size: 15em;
  line-height: 0.8em;
  text-transform: uppercase;
  color: #E08E79;
  @include long-shadow-text(30, 0, #F1D4AF);
}

.welcome-text {
  font-family: 'Inconsolata', serif;
  padding: 50px;
  font-size: 2em;
  line-height: 0.8em;
  text-transform: uppercase;
  color: #fff;
}

.second-page {
  background: linear-gradient(#F1D4AF, #ECE5CE); /* Standard syntax */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.second-page h1 {
  font-family: 'Inconsolata';
  color: #774F38;
  text-align: center;
}

.item {
  padding: 50px;
}

.item p {
  line-height: 1.4em;
  text-align: justify;
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-size: 10em;
}

.item span {
  color: #fff;
}