html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #08332a;
  color: #e5e2be;
  font-family: Josefin Sans, sans-serif;
  font-weight: 300;
  line-height: 1.2;
  overflow-x: hidden;
}

/*header stuff*/

header {
  background-color: #08332a;
  z-index: 1; /*dit heb ik moeten opzoeken*/
  position: fixed;
  top: 1rem;
  width: 100vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 3rem;
  overflow-x: hidden;
  gap: 0.9rem;
}
h1 {
  font-family: the-seasons;
  font-size: 2rem;
}

h1 > a:link,
h1 > a:visited,
h1 > a:hover,
h1 > a:active {
  text-decoration: none;
  color: #e5e2be;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

h1 > a:hover {
  color: #8a1631;
  background-color: #e5e2be;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

nav > ul {
  font-family: the-seasons;
  display: flex;
  font-size: 2rem;
  gap: 1rem;
  background-color: #08332a;
  padding: 0.5rem;
}

li > a:link,
li > a:visited,
li > a:hover,
li > a:active {
  text-decoration: none;
  color: #e5e2be;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

li > a:hover {
  color: #8a1631;
  background-color: #e5e2be;
  padding: 0.5rem;
}

/*footer stuff*/

footer {
  display: flex;
  background-color: #08332a;
  width: 100vw;
  padding: 2rem;
  justify-content: space-around;
  align-items: center;
}

footer > h2 {
  font-size: 1.5rem;
}

/*main stuff*/

main {
  margin-top: 10rem;
}

.bold {
  font-weight: 700;
}

.page-structure1 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  justify-content: space-between;
}

.introduction-paragraph {
  background-color: #8a1631;
  color: #e5e2be;
  border-radius: 0.2rem;
  padding: 2rem;
  margin: 1rem;
}

.introduction-paragraph > p {
  margin-bottom: 2rem;
}

.skills-structure {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.skill-list {
  max-width: 26rem;
}

.skillset {
  background-color: #e5e2be;
  color: #08332a;
  border-radius: 0.2rem;
  padding: 2rem;
  margin: 1rem;
  line-height: 1.5;
}

h2 {
  font-family: the-seasons;
  font-size: 2rem;
  color: #e5e2be;
  font-weight: 300;
}
.bigger {
  font-size: 3rem;
  font-weight: 600;
}

.skillset > h2 {
  color: #8a1631;
}

h3 {
  font-family: the-seasons;
  color: #08332a;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2rem;
}

.skillset > h3 {
  color: #08332a;
  font-weight: 600;
}

.skill-type {
  font-family: komet;
  font-style: italic;
  font-weight: 500;
}

.page-structure2 {
  background-color: #e5e2be;
  margin: 1rem;
  border-radius: 0.2rem;
  display: grid;
  width: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem;
  padding: 1rem;
}

.page-structure2 > h2 {
  color: #08332a;
  text-align: center;
  padding-top: 3rem;
  font-size: 3rem;
  grid-column: 1 / span2;
}

.portfolio-image {
  aspect-ratio: 16/9;
  border-radius: 0.2rem;
  position: relative;
}

.portfolio-explanation {
  position: absolute;
  bottom: 1rem;
  background-color: #e5e2be;
  padding-bottom: 1rem;
  padding-right: 1rem;
  border-radius: 0.2rem;
}

.portfolio-explanation > p {
  color: #8a1631;
  text-align: center;
}

.portfolio-explanation > h3 {
  color: #8a1631;
  text-align: center;
}

.item-1 {
  display: flex;
  background-image: url(../assets/asset1_instagram_carousel_red.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.item-1:hover {
  background-image: url(../assets/asset1_instagram_carousel_rgb.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
}

.item-2 {
  background-image: url(../assets/asset2_animated_explainer_red.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.item-2:hover {
  background-image: url(../assets/asset2_animated_explainer_rgb.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.item-3 {
  background-image: url(../assets/asset3_design_redbullsite_red.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  grid-column: 1;
  grid-row: 3;
}

.item-3:hover {
  background-image: url(../assets/asset3_design_redbullsite_rgb.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.item-4 {
  background-image: url(../assets/asset4_promovideo_red.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  grid-column: 2;
  grid-row: 3;
}

.item-4:hover {
  background-image: url(../assets/asset4_promovideo_rgb.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*about page stuff*/

.about-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  background-color: #8a1631;
  padding: 2rem;
}

.about-image {
  border-radius: 0.2rem;
}

.about-text {
  padding: 2rem;
  max-width: 40rem;
}

.about-text > p {
  margin-top: 2rem;
}
/*contact page stuff*/

.contact {
  background-color: #e5e2be;
  color: #8a1631;
  padding: 2rem;
  text-align: center;
  margin: 5rem;
  border-radius: 1rem;
}

.contact > h2 {
  color: #8a1631;
}

.contact > a:link,
.contact > a:visited,
.contact > a:hover,
.contact > a:active {
  color: #8a1631;
  text-decoration: none;
}
.contact > a:hover {
  color: #8a1631;
  text-decoration: none;
  font-weight: 700;
}

/*item page stuff*/

.item-page {
  display: flex;
  flex-flow: column wrap;
  max-width: 90vw;
  background-color: #8a1631;
  border-radius: 1rem;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
}

.item-page-h2 {
  text-transform: uppercase;
}

.item-page-banner-image {
  border-radius: 1rem;
  max-width: 80vw;
  margin: 0 auto;
  margin-top: 2rem;
}

.banner-video {
  display: block;
  max-width: 80vw;
  margin: 0 auto;
  margin-top: 2rem;
}

.item-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  margin: 0 auto;
  align-items: start;
  padding: 1.5rem;
}

.item-flex > img {
  max-width: 35vw;
  border-radius: 0.6rem;
}

.redbull-1 {
  grid-column: 1;
  grid-row: 1;
}

.redbull-2 {
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: center;
  min-width: 70vw;
}

.redbull-3 {
  grid-column: 2;
  grid-row: 1;
}

@media screen and (min-width: 100px) and (max-width: 750px) {
  body {
    overflow-x: hidden;
  }

  /*header stuff*/

  header {
    position: fixed;
    width: 100vw;
  }

  h1 {
    font-size: 1rem;
  }

  h1 > a {
    text-align: center;
    justify-self: center;
    display: block;
  }

  .bold {
    display: block;
  }

  nav > ul {
    font-size: 1rem;
    flex-flow: column nowrap;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 0rem;
  }

  li > a {
    display: block;
  }

  .logo {
    width: 10vw;
    max-height: 4rem;
  }

  /*main stuff*/

  .bigger {
    font-size: 2.5rem;
  }
  .page-structure1 {
    display: flex;
    flex-direction: column;
  }

  .page-structure2 {
    display: flex;
    flex-direction: column;
  }

  .portfolio-explanation {
    display: none;
  }

  /*footer stuff*/

  footer {
    flex-direction: column;
    gap: 1rem;
  }

  footer > h2 {
    font-size: 1rem;
    text-align: center;
  }

  a > img {
    width: 2rem;
    height: auto;
  }

  h3 {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .item-1 {
    flex-direction: column;
  }

  /*item-page stuff*/

  .item-page-h2 {
    font-size: 1.2rem;
  }

  .item-page > h2 {
    max-width: 50vw;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }

  .item-page > p {
    max-width: 50vw;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 0.8rem;
  }

  .item-page-banner-image {
    max-width: 60vw;
    margin: 0 auto;
    border-radius: 0.5rem;
  }
}

@media screen and (min-width: 751px) and (max-width: 1000px) {
  body {
    overflow-x: hidden;
  }

  /*header stuff*/

  header {
    position: fixed;
  }

  h1 {
    font-size: 1.5rem;
  }

  .bold {
    display: block;
    text-align: center;
  }

  h1 > a {
    display: block;
  }

  nav > ul {
    font-size: 1.5rem;
    flex-direction: column;
  }

  .logo {
    width: 10vw;
    max-height: 5rem;
  }

  /*main stuff*/

  .introduction-paragraph > p {
    max-width: 40rem;
  }

  .page-structure1 {
    display: flex;
    flex-direction: column;
  }

  .page-structure2 {
    display: flex;
    flex-direction: column;
  }

  .item-page {
    max-width: 90vw;
  }

  .item-page-banner-image {
    margin: 0auto;
  }

  /*footer stuff*/

  footer {
    flex-direction: row;
    gap: 1rem;
  }

  footer > h2 {
    font-size: 1rem;
  }

  .footer-logo {
    max-height: 2rem;
  }

  a > img {
    width: 2rem;
    height: auto;
  }

  h3 {
    font-size: 2rem;
    font-weight: 700;
  }

  .item-1 {
    flex-direction: column;
  }
}

@media screen and (min-width: 1300px) {
  .introduction-paragraph {
    font-size: 1.2rem;
  }

  .skills-structure {
    font-size: 1.2rem;
  }
}