@font-face {
  font-family: roboto;
  src: url('../font/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: robotoThin;
  src: url('../font/Roboto-Thin.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  color: white;
  font-family: roboto;
}

p {
  font-family: robotoThin;
}

h1 {
}

ul {
  list-style-type: none;
  overflow: hidden;
}

a {
  text-decoration: none;
}

section {
  padding: 1rem;
}

/* COMMON STYLES */
.flex--column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex--row-center {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}

.color--fading {
  color: rgba(49, 49, 49, 0.5);
}

.color--fading-white {
  color: rgba(255, 255, 255, 0.5);
}

.bottom__bar {
  border-bottom: 1px solid;
  border-color: rgba(49, 49, 49, 0.274);
}
.hidden {
  visibility: hidden;
  opacity: 0;
}

/* NAV  */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7rem;
  width: 100%;
  z-index: 100;
}
.sticky {
  position: fixed;
  background-color: rgba(31, 31, 31, 0.329);
}
.nav__links {
  margin-right: 3vw;
}

.nav__item {
  /* background-color: grey; */
  display: inline-block;
  padding: 0rem 0.5rem 1.5rem 0rem;
  border-bottom: 10px solid rgba;
}
.nav__item:hover {
  background-color: rgba(0, 0, 0, 0.315);
  border-bottom: 10px solid rgba(209, 34, 34, 0.897);
}

.nav__links a {
  text-decoration: none;
}

.nav img {
  max-height: 8vh;
  margin-left: 8vw;
}

/* HEADER  */
header {
  height: 90vh;
  background-color: rgba(51, 54, 51, 0.835);
  background-image: linear-gradient(
      to bottom,
      rgba(17, 17, 17, 0.582),
      rgba(29, 29, 29, 0.034)
    ),
    url('../img/header_bg.jpg');
  background-size: cover;
  background-position: fixed;
}

.header__content-title {
  margin-top: 25vh;
}
.header__content-description {
  margin-top: 2vh;
  margin-left: 4vw;
  margin-right: 4vw;
}

/* PORTFOLIO SECTION */
#portfolio {
  height: 45vh;
  background-color: rgba(209, 34, 34, 0.897);
}

#contact h2,
#about h2,
#portfolio h1 {
  margin-top: 10vh;
}

#about p,
#portfolio p {
  margin-top: 3vh;
  margin-left: 15vw;
  margin-right: 15vw;
  text-align: center;
}

/* SAMPLE PAGE COMMON */
.sample--page {
  height: 100vh;
}

.sample--page-bg {
  background-image: linear-gradient(
      to bottom,
      rgba(212, 212, 212, 0.911),
      rgba(194, 194, 194, 0.931)
    ),
    url('../img/sample_bg.jpg');
  background-repeat: repeat;
}

.sample--page-container {
  display: flex;
  flex-direction: column;
  width: 35vw;
  align-items: center;
  /* margin-left: 4vw;
  margin-right: 4vw; */
}

.sample--page h2 {
  margin-top: 5vh;
}

.sample--page-container p,
.sample--page-container h2 {
  color: rgba(42, 42, 42, 0.883);
  text-align: center;
}

.sample--page img {
  margin-top: 10vh;
  margin-left: 2vw;
  margin-right: 2vw;
  max-width: 80vw;
}

.sample--page-divider {
  margin-top: 1vh;
  margin-bottom: 2.5vh;
}

.sample--page-btn-container {
  margin-top: 3vh;
}

.sample--page-btn-container button {
  padding: 1vw;
  background-color: rgba(209, 34, 34, 0.897);
}

/* ABOUT ME */
#about {
  height: 45vh;
  background-color: rgba(31, 31, 31, 0.815);
}

/* CONTACT  */
#contact {
  height: 45vh;
  background-color: rgba(209, 34, 34, 0.897);
}

#contact button {
  margin-top: 3vh;
  color: rgba(39, 39, 39, 0.76);
  padding: 1vw;
}

footer {
  height: 40vh;
}

#footer {
  padding-top: 8rem;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 2rem;
  background-image: linear-gradient(
      to bottom,
      rgba(17, 17, 17, 0.582),
      rgba(29, 29, 29, 0.034)
    ),
    url('../img/ocean.jpg');
  background-size: cover;
  background-color: rgba(51, 54, 51, 0.835);
  background-size: cover;
  text-align: center;
}

#footer img {
  margin-bottom: 2rem;
  height: 55px;
}

.footer_link {
  color: rgb(76, 186, 223);
}

.footer__socials {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  margin-top: 1.5rem;
}

#footer li {
  margin: 0.5rem;
}