html, body {
    margin: 0;
    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {


}

#wrapper {
    margin: 0;
    padding: 0;
  
}

nav {
  position: fixed;
  margin-top: 0;
  width: 100%;
  background-color: CornflowerBlue;
  display: flex; /*Flexbox is my savior*/
  justify-content: flex-end;
  z-index: 1;
  /*The z-index is so absolutely positioned elements stay below the navigation*/
}

.nav-links {
  text-decoration: none;
  color: white;
  padding: 1em;
}

.nav-links:hover{
  background-color: orangered;
}

main {

  display: flex;
  flex-direction: column;
  
}

section {
scroll-margin-top: 3em;
/* Thank You !
https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/ */
}

#welcome-section {
  /*background-color set in main*/
  flex-basis: 100vh;
  background: rgb(213,49,49);
  background: radial-gradient(circle, rgba(203,59,50,1) 0%, rgba(112,30,30,1) 100%);
  font-size: 1.1em;
}

#title-area {
 display: inline-block;
 text-align: center;
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.clapperboard {
 display: inline-block;
 position: relative;
 text-align: center;
 margin: 0;
 width: 10em;
}
  
  /*The translate function reposition elements along a vector: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()*/

#web-dev {
  display: inline-block;
  position: relative;
  top: 1.1em; 
  background: repeating-linear-gradient(-129deg,  #0E0E0E 1em, white 1.5em, white 7em,  #0E0E0E 7.5em,  #0E0E0E 9em);
  outline: 2px solid black;
  color: #0E0E0E;
  transform: skewY(-10deg);
  width: 99%;
  left: -0.5%;
}

#welcome-section h2 {
 text-align: center;
 margin: 0;
 transform: translate(-0.4%, 20%); 
}

#FCC-Profile {
  display: inline-block;
  background-color: #0D0A0D;
  color: white;
  height: 5em;
  width: 100%;
  border-top: 1em solid;
  border-image-source: repeating-linear-gradient(129deg, white 0em, white 1em, black 1em, black 2em);
  border-image-slice: 44;
  outline: 1px solid black;
}

#profile-link{
  color: red;
  text-decoration: underline;
  background-color: black;
}

#projects {
  border-top: 1em dashed black;
  border-bottom: 1em dashed black;
background: rgb(245,247,250);
background: linear-gradient(90deg, rgba(245,247,250,1) 0%, rgba(195,207,226,1) 100%);
}

#contact {
  position: relative;
  padding-top: 9em;
  padding-bottom: 9em;
  left: auto;
  right: auto;
  background: linear-gradient(90deg, rgba(203,59,59,1) 0%, rgba(121,9,9,1) 12.5%, rgba(121,9,9,1) 87.5%, rgba(203,59,59,1) 100%);


  /*commented this one one 
because I liked it too:

background: linear-gradient(90deg, rgba(203,59,59,1) 0%, rgba(121,9,9,1) 35%);*/
}

#contact p {

}

#contact a {
  text-decoration: none;
  color: #F1F1F1;
}

#big-screen {
 width: 70vw;
 height: 100%;
 background-color: #0E0E0E;
 margin: 0px auto;
 border: 0.3em groove black;
 text-align: center;
 color: #F1F1F1;
 font-size: 1.1em;
}

#big-screen h2{

}

#big-screen p {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2em;
  margin-left: auto;
  margin-right: auto;
}


.Contact-Name:after {
  content: "\00a0 ";
  /*non-breaking space placed 
via the pseudo-class :after*/
}

.contact-link{
  text-decoration: underline;
}

#star {
width: 10%;
position: relative;
}

footer { 
  display: flex;
  flex-direction: column;
  align-items: center; 
  background-color: black;
  color: white;
  width: 100%;
  height: 4em;
}

footer a{
  text-decoration: underline;
  color: white;
}

h1, h2 { 

}

p {
 margin-top: 0px;
/*The white spaces are being caused by the paragraphs margins.*/
}

#pj1{background-color: red; order: 5;}
#pj2{background-color: orange; order: 4;}
#pj3{background-color: yellow; order: 6;}
#pj4{background-color: green; order: 2;}
#pj5{background-color: blue; order: 3;}
#pj6{background-color: purple; order: 1;}

#container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 2em; /*guarantee bottom placeholder captions are seen*/
    padding: 2em;
    margin: 0px auto;
    align-items: center;
    border: 1em solid black;
}
 
.grid-items{
  width: 77%;
  text-align: center;
  margin: 0px auto;
}

.project-tile {
  margin: 0px auto;
  border: 0.2em solid black;
  background-color: rgb(203,59,59);
  color: white;
}

.grid-items img{
  max-width: 100%; /*wonder if I should use max-width instead: "If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size" - W3schools.con*/
height: auto;
}

figcaption {

}

.medium-font {
  font-size: medium;
}

.bold {font-weight: bold;}

@media only screen and (max-width: 600px) {
  
#welcome-section {
  flex-basis: 130vh;
  }
#welcome-section h1 {
  /*background-color set in main*/
  padding-top: 5em;
}
  
#projects {
  overflow-x: hidden;
  } /*For Iphone 6/7/8: 
Without, an horizontal scroll bar appears under the section*/
  
#container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-row-gap: 2vw; /*guarantee bottom placeholder captions are seen*/
    padding: 2%;
    margin: 0px auto;
    align-items: center;
    border: 1em solid black;
    width: 90%;
}
  
  .grid-items{
    width: 35vw;
}
  
  .project-tile {

  }
  
#pj1{background-color: transparent; order: 4;}
#pj2{background-color: transparent; order: 5;}
#pj3{background-color: transparent; order: 3;}
#pj4{background-color: transparent; order: 2; padding-top: 3em;}
#pj5{background-color: transparent; order: 1; padding-top: 3em;}
#pj6{background-color: transparent; order: 6;}
  
  #contact {
    
  height: 60vh;    
  font-size: 0.9em;
  }
  
  #big-screen {
    max-height: 60vh;
  }
  
  #big-screen img {
    display: none;
  }
  
}

@media (min-width: 280px) and (max-width: 480px) and (orientation: portrait) {

    #container {
        width: 86%;
        border: 1.3em solid black;
    }

    #big-screen {
        width: 80vw;
        font-size: 1em;
       }

    footer {
        height: 5.5em;
    }
 }