html{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  body {
    margin: 0;
    padding: 0;

    font-size: 2rem;
    font-family: 'Courier Prime', monospace;
    background-color:black;
  }

  section{
    scroll-snap-align: start;
  }

  /* Colors */
  .white {
    background-color: #F0F1EC;
  }
  .red {
    background-color: #E72F24;
  }
  .blue {
    background-color: #004592;
  }
  .yellow {
    background-color: #F9D01E;
  }
  .black {
    background-color:#232629;
  }
  .green{
    background-color:green;
  }
  .lightBlue{
    background-color: #139bbd;
  }
  .turqouise{
    background-color: rgba(64, 224, 208, 0.673);
  }

  /* Styling for homeContainer */

  .homeContainer{
    height: 100svh;
    width: 100%;
    display: grid;
    grid-template-columns: 320fr 198fr 153fr 50fr;
    grid-template-rows: 414fr 130fr 155fr 22fr;
    background-color: black;
    gap: 9px;
  }

  .homeContainer > .white {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .homeContainer > .red {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    width:auto;
  }

  .homeContainer > .red *{
    margin:0;
  }

  .homeContainer > .blue {
    border-bottom: 10px solid black;
  }

  #one {
    grid-column: span 3;
  }

  #two {
    grid-row: span 2;
  }

  #three {
    grid-column: span 2;
    grid-row: span 2;
    overflow: hidden;

    background-color: black; /*In the painting it's white, but for :hover purposes I need a black background */
    position:relative;
  }

  #three:hover .backgroundImage {
    background-image: url(./portfolio_images/background_1_lowerRes.jpg);
    opacity: 80%;
    transform: scale(1.3);
  }

  .backgroundImage{
    background-image: url(./portfolio_images/background_2_lowerRes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top; 
    height:100%;
    width:100%;

    position: absolute;
  }

  #four {
    grid-row: span 2;
  }

  #photoTitle{
    z-index:1;
    color:white;
  }

  .clickable{
     /* Removes blue coloring and underline */
    text-decoration: none;
    color: unset;
  }

  .clickable:hover *{
    transform: scale(1.15);
  }
  
  #cursor {
    animation: fade 0.75s step-end infinite;
  }

  @keyframes fade{
    50%{
      opacity:0;
    }
  }

  /* Styling for portfolioContainer */

  .portfolioContainer{
    margin-top: 9px;
    height: 100dvh;
    width: 100%;
    display: grid;
    grid-template-columns: 15fr 60fr 15fr;
    grid-template-rows: 10fr 80fr 10fr;
    background-color: black;
    gap: 9px;
  }
  .portfolioContainer > .portfolioTitle{
    color:#F0F1EC;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .portfolioContainer > .slideshow{
    grid-area: 2 /2 / 3 / 3;

    display: flex;
    flex-wrap: nowrap; /* Make the container scroll horizontally in a single row */
    overflow-x: hidden;
    /* overscroll-behavior-x: contain; */
    /* scroll-snap-type: x mandatory; */
  }

  .list-item{
    /* scroll-snap-align: center; */
    flex-shrink: 0;

    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    gap:9px;

    max-width:100%;
  }

  .list-item img{
    max-width:70%;
  }

  .list-item > p {
    padding: 0 1rem;
  }

  .slideshowCount{
    display:flex;
    justify-content: space-around;
    align-items: center;
  }

  .slideshowClick{
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    user-select: none;
  }

  #dronePilotImage{
    max-width:35%;
  }

  /* Will be made only available in smaller screens */
  .phoneSlideshowClick{
    display:none;
  }

  /* Styling for AboutMeContainer */
  .aboutMeContainer{
    margin-top: 9px; 

    height: 100svh;
    width: 100%;
    display: grid;
    grid-template-columns: 35fr 16fr 23fr 20fr 8fr 73fr 10fr 8fr;
    grid-template-rows: 12fr 34fr 82fr 7fr;
    background-color: black;
    gap: 9px;
  }

  .aboutMeImg{
    grid-row: span 2;
    grid-column: span 2;

    background-image: url(./portfolio_images/aboutMe.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top; 
    height:100%;
    width:100%;      
  }

  .aboutMeTitle{
    grid-column: span 2;

    display: grid;
    place-items: center;
  }

  .aboutMeTopRed{
    grid-column: span 4;
  }

  /* Styling for photographyContainer */
  .photographyContainer{
    margin-top: 9px; 

    height: 100svh;
    width: 100%;
    display: grid;
    grid-template-columns: 53fr 12fr 8fr 11fr 4fr 14fr 55fr;
    grid-template-rows: 4fr 8fr 8fr 40fr 8fr 4fr;
    background-color: black;
    gap: 9px;
  }
  
  #astrophotography{
    background-image: url(./portfolio_images/M42.jpg);
  }

  #photography{
    background-position-y: top;
    background-image: url(./portfolio_images/bird.jpg);
  }

  .photographyImage{
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center; 
    height:100%;
    width:100%;
  }

  .photographyTitle{
    display: grid;
    place-items:center;
  }

  .photographyTitle > h2{
    margin:0;
    padding: 0;
  }
  
  .greenSize{
    grid-row: span 2;
  }

  #astrophotography{
    grid-column:span 3;
    grid-row: span 2;
  }

  #photography{
    grid-column: span 3;
    grid-row: span 2;
  }

  .whiteSize{
    grid-column: span 2;
  }

  .blackSize{
    grid-column: span 2;
  }

  @media (max-width: 450px) {
    .homeContainer{
      font-size: 0.7rem;
      grid-template-columns: 490fr 198fr 153fr 50fr;
      grid-template-rows: 200fr 100fr 155fr 22fr;
    }      

    .red > h1{
      font-size:2rem;
    }

    .portfolioContainer{
      font-size:1.25rem;
      grid-template-rows: 5fr 80fr 15fr;;
    }
    .slideshowImage{
      max-width:70%;
    }

    /* Hide elements to provide better spacing */
    .slideshowClick, .portfolioContainer .green,.portfolioContainer > .black{
      display:none;
    }

    /* Change layout */

    .portfolioContainer > .slideshow, .slideshowCount{
      grid-column: span 3;
    }

    .phoneSlideshowClick{
      display:flex;
      justify-content: center;
      align-items: center;
      height:100%;
      width:30%
    }

    .portfolioTitle{
      font-size: 1rem;
    }

    /* Change Layout for aboutMe */
    .aboutMeContainer{
      font-size:0.9rem;
      grid-template-columns: 35fr 16fr 23fr 20fr 20fr 73fr 10fr 8fr;
      grid-template-rows: 12fr 16fr 82fr 7fr;
    }

    .aboutMeTitle{
      grid-column: span 3;
      font-size: 0.8rem;
    }

    .aboutMeTopRed{
    grid-column: span 3;
  }

  /* change layout for photography */
  .photographyContainer{
    grid-template-columns: 25fr 22fr 15fr;
    grid-template-rows: 8fr 10fr 50fr 10fr 50fr 20fr;
  }

  .phoneSize{
    display:none;
  }

  .greenSize{
    grid-column: span 3;
    grid-row: span 1;
  }

  #astrophotography{
    grid-area: 3 / 1 / 4 / -1;
  }

  #photography{
    grid-area: 5 / 1 / 6 / -1;
  }

  .whiteSize{
    grid-area: 6 / 1 / -1 / 3;
  }

  .blackSize{
    grid-column: span 1;
  }

  .photographyContainer{
    font-size: 0.7rem;
  }
  }

  /* For mobile devices and tablets with a width up to 767 pixels */
  @media (min-width: 450px) and (max-width: 768px) {
    .homeContainer{
      font-size: 1rem;
      grid-template-columns: 490fr 198fr 153fr 50fr;
      grid-template-rows: 250fr 100fr 155fr 22fr;
    }

    .list-item img{
      max-width:70%;
    }

    /* Hide elements to provide better spacing */
    .slideshowClick, .portfolioContainer .green,.portfolioContainer > .black{
      display:none;
    }

    /* Change layout */
    .portfolioContainer{
      grid-template-rows: 10fr 80fr 5fr;
      font-size:1rem;
    }

    .portfolioContainer > .slideshow, .slideshowCount{
      grid-column: span 3;
    }

    .phoneSlideshowClick{
      display:flex;
      justify-content: center;
      align-items: center;
      height:100%;
      width:30%
    }
    
    .slideshowImage{
      max-width:70%;
    }

    /* Change Layout */
    .aboutMeContainer{
      font-size:1rem;
      grid-template-columns: 35fr 16fr 23fr 20fr 20fr 73fr 10fr 8fr;
      grid-template-rows: 12fr 16fr 82fr 7fr;
    }

    .aboutMeTitle{
      grid-column: span 3;
    }

    .aboutMeTopRed{
    grid-column: span 3;
  }

  /* change layout for photography */
  .photographyContainer{
    grid-template-columns: 25fr 22fr 15fr;
    grid-template-rows: 8fr 10fr 50fr 10fr 50fr 20fr;
  }

  .phoneSize{
    display:none;
  }

  .greenSize{
    grid-column: span 3;
    grid-row: span 1;
  }

  #astrophotography{
    grid-area: 3 / 1 / 4 / -1;
  }

  #photography{
    grid-area: 5 / 1 / 6 / -1;
  }

  .whiteSize{
    grid-area: 6 / 1 / -1 / 3;
  }

  .blackSize{
    grid-column: span 1;
  }

  .photographyContainer{
    font-size: 1rem;
  }
  }

  /* For tablets with a width between 768 pixels and 1023 pixels */
  @media (min-width: 768px) and (max-width: 1024px) {
    .homeContainer{
      grid-template-columns: 490fr 198fr 153fr 50fr;
      font-size: 1.5rem;
    }

    .list-item img{
      max-width:70%;
    }

    /* Hide elements to provide better spacing */
    .slideshowClick, .portfolioContainer .green,.portfolioContainer > .black{
      display:none;
    }

    .slideshowImage{
      max-width:70%;
    }

    /* Change layout */

    .portfolioContainer{
      grid-template-rows: 10fr 80fr 5fr;
      font-size:1.5rem;
    }

    .portfolioContainer > .slideshow, .slideshowCount{
      grid-column: span 3;
    }

    .phoneSlideshowClick{
      display:flex;
      justify-content: center;
      align-items: center;
      height:100%;
      width:30%
    }

    .aboutMeContainer{
      font-size: 1.25rem;
    }

    
  /* change layout for photography */
  .photographyContainer{
    grid-template-columns: 25fr 22fr 15fr;
    grid-template-rows: 8fr 10fr 50fr 10fr 50fr 20fr;
  }

  .phoneSize{
    display:none;
  }

  .greenSize{
    grid-column: span 3;
    grid-row: span 1;
  }

  #astrophotography{
    grid-area: 3 / 1 / 4 / -1;
  }

  #photography{
    grid-area: 5 / 1 / 6 / -1;
    background-position-y:45%; 
  }

  .whiteSize{
    grid-area: 6 / 1 / -1 / 3;
  }

  .blackSize{
    grid-column: span 1;
  }

  .photographyContainer{
    font-size: 1rem;
  }

  }

  /* For larger screens, tablets */
  @media (min-width: 1024px) and (max-width: 1600px) {
    .homeContainer{
      grid-template-columns: 480fr 198fr 153fr 50fr;
      font-size: 1.5rem;
    }

    .aboutMeContainer{
      font-size: 1.5rem;
    }
    
    .photographyContainer{
      font-size: 1.25rem;
    }
  }