:root{
  /* Color variables */
  --barColor: rgb(29, 46, 56);
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 500;
}

.gifBackground{
  position: absolute;

  width: 100%;
  height: 100%;

  background-image: url('background.gif');

  background-size: cover;
  background-position: center;
}

/* Universal Header */

header{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  opacity: 0.9;
  border-radius: 20px;

  background-color: var(--barColor);
  border-color: rgb(16, 34, 83);

  padding: 10px 50px;


  color:aliceblue;


}

.header{
  display: inline-block;
  padding: 0px 20px;

}

.header a{
  color: white;
  font-weight: 600;

  text-decoration: none;
  transition: 0.4s;
  padding: 8px 16px;
  border-radius: 99px;

}

.header a.isActive, .header a:hover {
  z-index: 99;
  background-color: gray;
}

.cta{
  text-decoration: none;
  border: none;
  border-radius: 25px;
  color: white;
  background-color: var(--barColor);
  padding: 8px 16px;
  font-weight: 600;
}

.cta:hover{
  transition: 0.4s;
  background-color: gray;


}


/* Homepage */

.containerBox{
  position: relative;
  display: grid;
  row-gap: 5vh;

  grid-template-columns:  20vw 20vw 20vw 20vw 20vw;



}

.nameTitle{
  grid-column: 2 / span 3;

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



  margin-top: 5vh;
  font-size: 52px;

  opacity: 0.8;

  width:  auto;
  height: auto;

  letter-spacing: 5px;
  color:yellow;



}

.photo{
  grid-row-start: 2;
  grid-column: 2;
  justify-self: center;

  width: 300px;
  height: 400px;

}


.mySkills{
  justify-content: center;
  justify-self: center;
  grid-row:2;
  grid-column: 4;



  border-radius: 25px;
  background-color: cadetblue;
  opacity: 0.8;
  width: 15vw;
  height: auto;
}

.mySkills h1{
  text-align: center;
  text-decoration: underline;
  font-size:x-large;
  padding-bottom: 10px;

}

.mySkills h2{
  text-align: center;
  text-decoration: underline;
  padding-bottom: 10px;

}


.mySkills ul{
  display: table;
  margin: 0 auto;
}

.mySkills li{
  padding: 10px;



  list-style-type: disc;
  list-style-position: inside;
  font-size: large;

}

.summary{
  grid-row: 3;
  grid-column: 2 / span 3;
  grid-template-columns: summary 10px;
  text-align: center;

  font-size: 28px;
  line-height: 2;
  color: yellow;
}


/* Contact me */

.contactContainer{
  position: relative;
}

.contactContainer h1{
  padding-top: 10vh;
  font-size: xx-large;
  color:yellow;
  display: flex;
  justify-content: center;
}

.contactForm{
  max-width: 600px;
  margin:auto;
  padding: 0 20px;
  overflow:hidden;
}

.contactFormText{

  width: 100%;
  margin: 20px 0;
  padding: 20px 40px;
}

textarea.contactFormText{
  resize:none;
  height: 140px;
}

.contactForm-Btn{
  float: right;
  background-color: grey;
  color: white;
  border:none;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  transition: 0.5s;
}

.contactForm-Btn:hover{
  background-color: slategray;
}


/* about me */

.amContainer{
  display: grid;
  grid-template-columns: 20vw 20vw 20vw 20vw 20vw;
  row-gap: 50px;
  position: relative;


}

.amTitle{
  display: flex;
  grid-column: 3;
  margin-top: 7vw;
  justify-content: center;

}

.amTitle h1{
  color: yellow;
  font-size: 48px;
}

.amSummary{
  grid-row: 3;
  grid-column: 2 / span 3;
  font-size: 28px;
  line-height: 2;
}

.amSummary p{
  text-align: center;
  color: yellow;

}

.amPhoto{
  grid-row: 2;
  grid-column: 3;
  justify-self: center;

}

/* Projects */

.projectContainer{
  position: relative;
  display: grid;
  grid-template-columns: 20vw 20vw 20vw 20vw 20vw;
}

.projectTitle{
  grid-column: 3;
  text-align: center;
  padding-top: 7vh;
  padding-bottom: 50px;
  font-size: x-large;
}

.projectTitle h1{
  color: yellow;
}

.projectPhoto{
  display: flex;
  grid-row: 2;
  grid-column: 3;
  justify-content: center;

}

.projectSummary{
  grid-column: 2/ span 3;
  grid-row: 3;
  text-align: center;
  padding-top: 50px;
  line-height: 2;
  font-size: 28px;

}

.projectSummary p{
  color:yellow;
}

.ribbon{
  position: absolute;
  display: flex;
  bottom: 25px;
  right: 0;
}



 /* Universal Footer */

.footerContent{
  position: absolute;
  background-color: var(--barColor);
  opacity: 0.8;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100vw;


}

.footerText{

  padding-right: 5px;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  color:yellow;


}

.iconContainer{
  opacity: 0.8;
  display: flex;
  padding: 5px;
}