dd-weekend/src/style/combined.scss

@import "_variables.scss";
@import "fontawesome/fontawesome.scss";

@import "_reset.scss";
@import "_navigation.scss";
@import "_style.scss";
@import "_footer.scss";
@import "_cards.scss";
@import "_form.scss";
@import "_sidebar.scss";
@import "_customgrid.scss";
@import "_layout_shorthand.scss";

@font-face {
  font-family: "SFMoviePoster";
  src: url("../font/SFMoviePoster.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SFMoviePoster";
  src: url("../font/SFMoviePosterBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "FiraSans";
  src: url("../font/FiraSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FiraSans";
  src: url("../font/FiraSans-Light.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "FiraSans";
  src: url("../font/FiraSans-Medium.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
    local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"),
    local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

html {
  height: 100%;
}

body {
  background-color: #fff !important;
  font-family: "FiraSans", system-ui, sans-serif;
  position: absolute;
  top: 80px;
  width: 100%;
  min-height: calc(100vh - 80px);
}

h1,h2,h3,h4,h5,h6 {
  font-family: "SFMoviePoster", system-ui, sans-serif;
  line-height: normal;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 3rem;
}

h2,h3 {
  margin-top: 20px;
}

p {
  margin-bottom: 15px;
}

#content {
  padding: 50px;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  padding-bottom: 300px;

  @media screen and (max-width: $breakpoint-sm) {
    padding-bottom: 380px;
  }
  
}

hr {
  color: $primary-color;
  text-align: left;
  margin-left:0;
  width: 300px;
  max-width: 100%;
  margin-bottom: 25px;
}

.center-container {
  display: flex;
  justify-content: center;
}

.text-center {
  text-align: center;
}

input.btn, a.btn {
  color: #000 !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.42857143;
  font-size: 1em;
  padding: 6px 12px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  &.btn-sm {
    font-size: .8em;
  }

  &.btn-lg {
    font-size: 1.5em;
  }

  &.btn-xl {
    font-size: 2em;
  }

  &:hover {
    color: #333 !important;
    background-color: #e6e6e6;
    border-color: #adadad;
  }

  &.btn-light {
    color: #FFF !important;

    &:hover {
      color: #333 !important;
    }
  }

  &:disabled, &:disabled:hover {
    color: #CCC !important;
    background-color: unset;
    border-color: #ccc;
    cursor: default;
  }
}

body.hero {
  // background: rgba(0, 0, 0, 0)
  //   linear-gradient(to right, rgb(252, 70, 107), rgb(63, 94, 251)) repeat scroll
  //   0% 0%;
  background: linear-gradient(-45deg, #000, rgb(128, 0, 0), #000);
	background-size: 400% 100%;
	animation: bggradient 8s ease infinite;
  background-repeat: no-repeat;
}

@keyframes bggradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#hero {
  color: $hero-color;
  display: flex;
  font-weight: lighter;
  height: calc(100vh - 80px);
  align-items: center;
  justify-content: center;
  text-align: center;

  h1,h2,h3,h4 {
    text-shadow: 3px 3px 5px #595959;

    img {
      vertical-align: middle;
      display: inline-block;
    }

    small {
      font-size: .5em;
      vertical-align: text-top;
    }
  }

  h1 {
    font-size: 14vw;
    font-weight: normal;
    line-height: 11vw;

    img {
      width: 18vw;
      height: auto;
    }
  }

  h2 {
    font-weight: lighter;
    font-size: 8vw;
    line-height: 8vw;
  }

  h3 {
    font-size: 3vw;
    font-weight: lighter;
  }

  a {
    color: $hero-color;
  }

  hr {
    color: $hero-color;
    width: 20%;
    opacity: 0.3;
  }

  @media only screen and (max-width: $breakpoint-xl) {
    h1 {font-size: 20vw; line-height: 17vw; img{width: 28vw;}}
    h2 {font-size: 12vw; line-height: 12vw;}
    h3 {font-size: 4vw;}
  }

  @media only screen and (max-width: $breakpoint-lg) {
    h1 img{width: 34vw;}
    h3 { font-size: 5vw; }
  }

  @media only screen and (max-width: $breakpoint-sm) {
  }

  @media only screen and (max-width: $breakpoint-xs) {
    h1 {font-size: 22vw; line-height: 20vw;}
    h2 {font-size: 16vw; line-height: 16vw;}
    h3 {font-size: 9vw;}
  }
}