/* 
rem and em do NOT depend on html font-size in media queries!
Instead, 1rem = 1em =16px
Breakpoints: 1366
*/

/* 
Breakpoints: 
1300px = 81,25rem (Smaller Desktops)

1100px = 68,75rem (Tablets - Landscape)

940px = 58,75rem (Tablets)

770px = 48,125rem

600px = 37,5rem (Smartphones)


Header: 
Hero: ok bis 1080px
Focus: 
Showcase: ok bis 1300
About: ok bis 1195
Footer: ok bis 1300
*/

/* ************************************ */
/* BELOW 1344px (Smaller desktops) */
/* ************************************ */

@media (max-width: 81em) {
  /* Footer */
  .footer-box {
    margin: 3.2rem;
  }

  /* Showcase */
  .carousel {
    max-width: 100rem;
  }

  .carousel-nav {
    max-width: 800px;
  }

  .carousel-indicator {
    font-size: 1.2rem;
    padding: 2.4rem 1.2rem;
  }

  .carousel-indicator.current-item {
    font-size: 1.6rem;
  }

  .carousel-btn-right {
    right: -2%;
  }

  .carousel-btn-left {
    left: -2%;
  }
}

/* ************************************ */
/* BELOW 1100px (Tablets - Landscape) */
/* ************************************ */

@media (max-width: 69rem) {
  /* General */
  .heading-primary {
    font-size: 8.6rem;
  }

  .heading-secondary {
    font-size: 6.2rem;
    letter-spacing: -1px;
    font-weight: 700;
  }

  .heading-tertiary {
    font-size: 4.4rem;
  }

  .heading-quaternary {
    font-size: 3.6rem;
  }

  /* Hero */
  .hero-main-img {
    grid-template-columns: 1fr;
  }

  .hero-img-panorama {
    margin-left: 6.4rem;
  }

  .hero::before {
    width: 60rem;
    height: 60rem;

    transform: translate(10%, -25%) rotate(15deg);
  }

  /* About me */

  .about-me-img {
    height: 30rem;
    width: 30rem;
  }

  .about-me-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .about-me-info p {
    font-size: 1.6rem;
    line-height: 1.8;
  }

  .about-me-info ul {
    font-size: 1.8rem;
    line-height: 1.6;
  }

  /* Showcase */
  .carousel {
    max-width: 90rem;
  }
}

/* ************************************ */
/* BELOW 940px (Tablets) */
/* ************************************ */

@media (max-width: 59rem) {
  /* General */
  .heading-primary {
    font-size: 7.4rem;
  }

  .heading-secondary {
    font-size: 5.2rem;
    letter-spacing: -1px;
    font-weight: 700;
  }

  .heading-tertiary {
    font-size: 3.6rem;
  }

  .heading-quaternary {
    font-size: 3rem;
  }

  /* Hero */
  .hero-text {
    grid-column: 1 / -1;
    padding: 1rem 1rem;
  }

  .hero-img-panorama {
    margin-left: 6.4rem;
  }

  .hero::before {
    width: 45rem;
    height: 45rem;

    transform: translate(10%, -45%) rotate(15deg);
  }

  /* Focus */
  .focus-video {
    width: 30rem;
  }

  .focus-description {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  /* Showcase */
  .carousel {
    max-width: 70rem;
  }

  .carousel-nav {
    max-width: 650px;
  }

  .carousel-indicator {
    padding: 1.6rem 1.2rem;
    width: 30%;

    transform: scale(0.9) translateY(0);
  }

  .carousel-indicator.current-item {
    font-size: 1.6rem;
  }

  .carousel-btn {
    transform: translateY(-50%) scale(0.8);
  }

  .carousel-btn:hover,
  .carousel-btn:active {
    transform: translateY(-50%) scale(0.9);
  }

  .carousel-btn-right {
    right: -4%;
  }

  .carousel-btn-left {
    left: -4%;
  }

  .game-role-box {
    padding: 0 1.6rem;
  }

  .game-learnings-box {
    padding: 0 1.6rem;
  }

  .game-description-box {
    padding: 0 1.6rem;
  }

  .game-post-mortem-box {
    padding: 0 1.6rem;
  }
  /* About me */
  .section-about-me {
    padding-bottom: 12.8rem;
  }

  .about-me-box {
    grid-template-columns: 1fr;
  }

  .about-me-img-box {
    justify-content: center;
    align-items: center;
    margin-bottom: 4.8rem;
  }

  /* Footer */
  .header-row {
    padding-right: 2.4rem;
  }

  /* Mobile Nav */
  .btn-nav-mobile {
    display: block;
    z-index: 999;
  }

  .main-nav {
    background-color: #e9edeef3;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    transform: translateX(200%);
    transition: all 0.75s ease-in;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Hide nav */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0%);
  }

  .nav-open .icon-close {
    display: block;
  }

  .nav-open .icon-menu {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3rem;
  }
}

/* ************************************ */
/* BELOW 770 (Smaller Tablets) */
/* ************************************ */

@media (max-width: 48rem) {
  /* General */
  .heading-primary {
    font-size: 5.2rem;
  }

  /* Hero */
  .heading-primary:first-child,
  .heading-primary:last-child {
    transform: translate(0, 0);
  }

  .hero-text {
    font-size: 1.6rem;
    line-height: 1.8;
  }

  .hero-img-panorama {
    width: 100%;
    margin-left: 0;
  }

  .hero::before {
    width: 35rem;
    height: 35rem;

    transform: translate(10%, -45%) rotate(15deg);
  }

  /* Focus */
  .focus {
    grid-template-columns: 1fr;
    row-gap: 3.2rem;
  }

  .focus-media-box:nth-child(2) {
    grid-row: 1;
  }

  .focus-media-box:nth-child(6) {
    grid-row: 5;
  }

  .focus-video {
    width: 40rem;
  }

  .focus-description {
    margin-bottom: 4.8rem;
  }
  /* Showcase */
  .carousel {
    max-width: 55rem;
  }

  .carousel-nav {
    max-width: 500px;
  }

  .carousel-indicator {
    padding: 1.6rem 1.2rem;
    width: 35%;
    font-size: 1rem;

    transform: scale(0.8) translateY(0);
  }

  .carousel-indicator.current-item {
    font-size: 1.4rem;
    width: 50%;
    transform: scale(1) translateY(0);
  }

  .carousel-btn {
    transform: translateY(-50%) scale(0.7);
  }

  .carousel-btn:hover,
  .carousel-btn:active {
    transform: translateY(-50%) scale(0.8);
  }

  .carousel-btn-right {
    right: -5%;
  }

  .carousel-btn-left {
    left: -5%;
  }

  .game-role-box {
    padding: 0;
  }

  .game-learnings-box {
    padding: 0;
  }

  .game-description-box {
    padding: 0;
  }

  .game-post-mortem-box {
    padding: 0;
  }

  .learnings-text {
    font-size: 1.8rem;
  }

  .showcase-text {
    font-size: 1.6rem;
  }
}
/* ************************************ */
/* BELOW 600 (Smartphones) */
/* ************************************ */

@media (max-width: 38rem) {
  /* General */
  .heading-primary {
    font-size: 4.4rem;
  }

  .heading-secondary {
    font-size: 3.6rem;
    letter-spacing: -1px;
    font-weight: 700;
  }

  .heading-tertiary {
    font-size: 2.4rem;
  }

  .heading-quaternary {
    font-size: 3rem;
  }

  /* Header */
  .header {
    padding: 0;
    padding-right: 1.4rem;
  }

  .header-logo-box {
    margin-left: 0rem;
    margin-bottom: 0.4rem;
    transform: scale(0.8);
  }

  .header-logo-box:hover {
    transform: scale(0.9);
  }

  /* Hero */
  .section-hero {
    padding: 4.8rem 0 4.8rem 0;
  }

  .hero-text-box {
    grid-template-columns: 1fr;
  }

  .hero-text {
    padding: 0;
  }

  .hero-img-panorama {
    transform: scale(1.1);
  }
  /* Focus */
  .focus-video {
    width: 30rem;
  }

  /* Showcase */

  .carousel-item {
    padding: 1.2rem;
  }

  .carousel {
    max-width: 45rem;
  }

  .carousel-nav {
    max-width: 450px;
  }

  .carousel-indicator {
    padding: 1.6rem 1.2rem;
    width: 35%;
    font-size: 1rem;

    transform: scale(0.8) translateY(0);
  }

  .carousel-indicator.current-item {
    font-size: 1.4rem;
    width: 50%;
    transform: scale(1) translateY(0);
  }

  .carousel-btn {
    transform: translateY(-50%) scale(0.45);
  }

  .carousel-btn:hover,
  .carousel-btn:active {
    transform: translateY(-50%) scale(0.55);
  }

  .carousel-btn-right {
    padding: 268px 0px 268px 8px;
    right: -7.5%;
  }

  .carousel-btn-left {
    padding: 268px 8px 268px 0px;
    left: -7.5%;
  }

  .dev-role-list {
    margin-left: 2.4rem;
  }

  .learnings-list {
    margin-left: 2.4rem;
  }

  /* About me */
  .about-me-img {
    height: 25rem;
    width: 25rem;
  }

  /* Footer */
  .footer-subheading {
    padding: 0;
  }

  .footer-heading-tertiary {
    font-size: 2rem;
  }

  .footer-heading-quaternary {
    font-size: 2rem;
  }

  .footer-box {
    grid-template-columns: 1fr;
  }

  .header-row {
    grid-row: auto;
  }

  .copyright-col {
    grid-row: 3;
    grid-column: auto;
  }

  .contact-col {
    grid-row: auto;
    grid-column: auto;
  }

  .contact-list {
    margin-bottom: 3.6rem;
  }

  .footer-text.copyright {
    font-size: 1.2rem;
  }
}

/* Further exeptions for carousel */
@media (max-width: 32rem) {
  .carousel {
    max-width: 40rem;
  }
}

@media (max-width: 27rem) {
  .carousel {
    max-width: 35rem;
  }
}