*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
  font-family: 'Quicksand', sans-serif;
  --color1: hsl(0, 0%, 90%);
  --bgcolor2: hsla(328, 65%, 35%, 0.9);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.2em;
}


header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5.2em;
  background: linear-gradient(45deg, hsl(272, 40%, 20%), hsl(272, 40%, 30%));
  z-index: 100;
}


#navbar {
  font-size: 1.8em;
  margin-right: 1.7em;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}


#navbar ul {
  display: flex;
  flex-direction: row;
}


#navbar li {
 list-style: none;
 height: 100%;
 width: 100%;
 display: flex;
 align-items: center;
}


#navbar li:hover {
  background-color: hsl(328, 65%, 40%);
}


#navbar a {
  display: flex;
  align-items: center;
  padding: 0 1em;
  height: 100%;
  width: 100%;
  padding-top: 0.1em;
  text-decoration: none;
  color: var(--color1, white);
  font-weight: 500;
}


/* above is the navbar */


main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh 1fr auto;
}


/* below is the welcome section */


#welcome-section {
  background: 
  linear-gradient(45deg,
   hsl(230, 50%, 65%),
   hsl(230, 67%, 32%));
   text-align: center;
}


h1 {
   font-size: 5em;
   font-weight: 600;
   color: var(--color1, white);
   font-family: "Archivo", sans-serif;
   margin-top: 5em;
}


#welcome-section p {
   color: hsla(178, 100%, 70%, 0.7);
   font-size: 2em;
   font-style: oblique;
   margin-top: 0.3em;
}


/* below is the project section */


#project-section {
  padding: 0 1.5em;
  background: linear-gradient(
     45deg,
    hsl(205, 80%, 50%),
    hsl(178, 50%, 60%) );
  display: grid;
  grid-template-areas: 
  'description description'
  'cards books'
  'documentation tribute'
  'pricing landing'
  'show show';
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto) repeat(2, 1fr) auto;
  gap: 3em;
}


#project-section h2 {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 3em;
  color: hsl(0, 0%, 20%);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  margin: 3em auto 0;
  padding: 0 0.5em 0.1em;
  height: 1em;
  grid-area: description;
  border-bottom: 2px solid;
}


#tic-tac-toe {
  grid-area: cards;
}


#currency-converter {
  grid-area: books;
}


#weather-app {
  grid-area: documentation;
}


#sound-machine {
  grid-area: tribute;
}


#under-construction-1 {
  grid-area: pricing;
}


#under-construction-2 {
  grid-area: landing;
}

#under-construction-1:hover, #under-construction-2  :hover{
    cursor: not-allowed;
}

.project-tile a{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
}

.project-tile:nth-of-type(-n+2) a {
  height: 15em;
  min-height: 300px;
  max-height: 300px; 
}

.project-tile:nth-of-type(n+3) a {
  height: 25em;
  min-height: 350px;
  max-height: 350px;
  max-width: 335px;
}

.project-tile img {
  width: 100%;
  height: 85%;
  object-fit: cover;
}


.project-tile p {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 1.5em;
  background-color: var(--bgcolor2);
  color: var(--color1, white);
  font-weight: 600;
  padding: 1em 0.2em;
}

.project-tile p::before {
  content: "< ";
  padding-right: .2em;
}

.project-tile p::after {
  content: " />";
  padding-left: .2em
}

.project-tile p::after, .project-tile p::before {
  color: hsl(35, 100%, 50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.project-tile p:hover::after, .project-tile p:hover::before {
  opacity: 1;
} 

#project-section .more{
  display: flex;
  align-content: center;
  margin: 1.7em auto 4.4em;
  font-size: 1.5em;
  grid-area: show;
  line-height: 2.2em;
  height: 2.5em;
  width: fit-content;
  background-color: var(--bgcolor2);
  color: var(--color1, white);
  box-shadow: none;
  border: none;
  transition: background-color 0.3s ease-in-out;
}

#project-section .more > a {
  padding: 0 1em 0 0.7em;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: var(--color1, white);
}

#project-section .more > a:after {
  content: " >";
  margin-left: 3px;
  display: inline-block;
  font-weight: 600; 
  font-size: 1.5em;
  font-family: "Archivo", sans-serif;
  transition: transform 0.3s ease-in-out;
}

#project-section .more > a:hover::after {
  transform: translateX(2.7px);
}

#project-section .more:hover {
  background-color: hsl(272, 65%, 20%); 
  cursor: not-allowed;
}

/* Finally the social media links. */

#online {
  background: 
  linear-gradient(to top left,
   hsl(230, 50%, 60%),
   hsl(230, 67%, 32%));
  text-align: center;
  color: var(--color1, white);
  padding: 13em 0 10em;
  border-bottom: 3.7px solid hsl(272, 65%, 20%);
}

#online h2 {
  font-size: 5em;
  font-weight: 700;
}

#online p {
   font-size: 1.5em;
   font-style: oblique;
}

.contacts {
  display: flex; 
  justify-content: center;
}

.social-media {
  margin: 3.5em 1.5em 0;
  transition: transform 0.3s ease-in-out;
}

.social-media:hover {
  transform: translateY(0.7em);
}

.icons {
  display: inline-block;
  min-width: fit-content;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color1, white);
  font-size: 1.8em;
  font-weight: 500;
  text-shadow: 1px 1.5px black;
}

.icons::before {
  font-family: FontAwesome;
  margin-right: 0.4em;

}

#x {
  padding: 0 0.5em;
}

#x:hover {
  cursor: not-allowed;  
}

#profile-link::before {
  content: "\f082" ;
}

#profile-link:hover {
  cursor: not-allowed;  
}

#github::before {
  content: "\f09b";
}

#email::before {
  content: "\f0e0" ;
}

#ctc-num::before {
  content: "\f10b" ;
}

/*       THE FOOTER       */

footer {
 background-color: var(--bgcolor2);
 margin-top: -0.2em;
 padding: 3.5em 3.5em 2.5em;
 color: var(--color1, white);
 display: grid;
 grid-template-areas: 
      'final final free';  
    
}

.note {
 font-size: 1.4em;
 grid-area: final;
}

footer div {
 grid-area: free;
}

footer > div > p {
  font-size: 1.4em; 
}

footer a {
 font-size: 1.4em; 
 text-decoration: none;
 color: var(--color1, white);
 position: relative;
}

footer a::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  margin-left: .5rem;
  background-color: var(--color1, white);
  mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/freecodecamp.svg");
}

/* LASTLY THE MEDIA QUESRIES */

@media screen and (max-width: 600px) {
  #project-section {
    padding-left: 5em;
    grid-template-areas: 
  'description'
  'cards'
  'books'
  'documentation' 
  'tribute'
  'pricing' 
  'landing'
  'show';
   grid-template-rows: repeat(8, auto);
   grid-template-columns: 90%;
   row-gap: 7em;
  }

 .project-tile:nth-of-type(-n+2) a, 
 .project-tile:nth-of-type(n+3) a {
   width: auto;
   min-width: 450px;
   height: 10em;
   min-height: 250px;
 } 

 #project-section h2 {
   min-width: 450px;
 }

 .contacts {
   flex-direction: column;
 }

 .social-media {
   margin-bottom: 0;
 }

 #online h2 {
   margin-right: 0.5em;
   margin-left: 0.5em;
 }
}

/* NOW FULL LARGER SCREENS */

@media screen and (min-width: 768px) {
  :root {
    font-size: 80%;
  }
  
  #project-section {
  padding: 0 auto;  
  grid-template-areas: 
  'description description description'
  'cards books documentation'
  'tribute pricing landing'
  'show show show';
  width: auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto repeat(2, 1fr) auto; 
  row-gap: 2.5em;
  }

  .project-tile:nth-of-type(-n+2) a, 
 .project-tile:nth-of-type(n+3) a {
   width: auto;
   min-width: 255px;
   height: 100%;
   min-height: 350px;
   max-height: none;
   max-width: none;
 }

 .project-tile p {
   font-size: 1.2em
 }

 #online {
   padding: 17em 0 15em;
 }
}

/* largest screen */

@media screen and (min-width: 1024px) {
  #project-section {
    padding: 0 10em;
  }

  .project-tile p {
   font-size: 1.2em
 }

   footer {
    padding: 3.7em 3.5em 3.3em; 
}
  .note {
    text-align: center;
  }

  footer p {
    display: inline;
  } 
}

@media screen and (min-width: 1240px) {
  .project-tile p {
   font-size: 1.5em
 }
}

/* scrolling type */

@media (prefers-reduced-motion: smooth) {
  html {
    scroll-behavior: auto;
  }
}