:root{
    --theme-gray: #ededec;
    --theme-dark-turquoise: #2f3f46;
    --theme-gold: #f6ba5b;
    --theme-light-gold:#efc37c;
    --theme-olive: #93a183;
    --theme-navy: #1d344c;
    --theme-navy2: #1e454d;
    --theme-font: Kalam;
    --font-xlarge: 3.5rem;
    --font-large: 2.5rem;
    --font-regular: 1.7rem;
    --font-small: 1rem;
}
*{
    box-sizing: border-box;
    margin: 0;
    scroll-behavior:smooth;
    font-family: var(--theme-font), sans-serif;
}
p{
  font-size: var(--font-small);
  color: var(--theme-navy);
}
h1{
  font-size: var(--font-xlarge);
  color: var(--theme-navy);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: bold;
  padding: 0rem 2.5rem;
  text-align: center;
  border-bottom: var(--theme-gold) .4rem solid;
  border-radius: 0% 0% 35% 0%;
  animation: fadeInLeft 1.5s ease-out;
  margin-bottom: .7rem;
}
h2{
  font-size: var(--font-large);
  color: var(--theme-navy);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-style: italic;
  font-weight: bold;
  padding: 2rem 3rem 0rem;
  text-align: center;
  border-top: var(--theme-gold) .4rem solid;
  border-radius: 35% 0% 0% 0%;
  animation: fadeInRight 1.5s ease-out;
}
hr{
  border: var(--theme-gold) .3rem solid;
  border-radius: 50%;
  width: 35%;
  margin: 1.5em auto;
  opacity: 0;
}
h3{
  font-size: var(--font-regular);
  color: var(--theme-navy);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: .3rem;
  letter-spacing: .15em;
  font-style: italic;
  font-weight: bold;
  padding: .3rem 0rem;
  text-align: center;
}
hr.intro-heading__top{
  animation: moveUp 1s ease-out 1.5s forwards;
}
hr.intro-heading__bottom{
  animation: moveDown 1s ease-out 1.5s forwards;
}

.main-container{
  /* display: grid; */
  /* grid-template-rows: 100vh repeat(3, min-content); */
  /* grid-template-columns: [start-point] repeat(6, [col-start] minmax(min-content, 1fr) [col-end]) [end-point]; */
  /* align-items: stretch; */
  /* justify-items: center; */
}
.intro{
  display: grid;
  width: 100%;
  background-color: var(--theme-olive);
  background-image: url(../images/newlogo.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  height: 100vh;
  align-items: center;
  justify-items: end;
  /* grid-column: start-point / end-point; */
  /* padding-left: 3rem; */
 }
 .intro-heading{
  width: max-content;
  margin: 3rem 2rem 0rem 0rem;
}
.intro-buttons{
  opacity: 0;
  margin: 0rem .5rem 2rem;
  animation: moveDown 1s ease-out 1.5s forwards;
}
/* CSS  for buttons & Projects section heading*/
.intro-buttons > button, .brief-cv-button, .project__buttons>a, .portfolio-projects__heading, .contacts__heading {
  background-color: var(--theme-gold);
  border: 0 solid #E5E7EB;
  color:var(--theme-navy);
  font-size: var(--font-regular);
  font-weight: bold;
  line-height: 1.75rem;
  padding: 1rem 2.5rem;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none var(--theme-navy) solid;
  max-width: 380px;
  margin: 0rem 4rem;
  cursor: pointer;
  transform: rotate(-2deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.intro-buttons > button:focus, .brief-cv-button:focus, .project__buttons>a:focus {
  outline: 0;
}
.intro-buttons > button:after, .brief-cv-button:after, .project__buttons>a:after, .portfolio-projects__heading:after,.contacts__heading:after {
  content: '';
  position: absolute;
  border: 1px solid var(--theme-navy);
  bottom: 6px;
  left: 6px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}
.intro-buttons > button:hover:after, .brief-cv-button:hover:after,  .project__buttons>a:hover:after {
  bottom: 2px;
  left: 2px;
}
 .brief-cv{
  background-color: var(--theme-light-gold);
  display: flex;
  height: max-content;
  min-height: 19rem;
  padding: 2rem 0 2rem 3rem;
 }
.brief-cv-wrapper{
  display: grid;
  grid-template-columns: minmax(250px,1fr) 3fr;
  align-items: center;
  height: auto;
  width: 100%;
  background-color: var(--theme-olive); 
  border-top: .3rem solid var(--theme-navy);
  border-left: .3rem solid var(--theme-navy);
  border-bottom: .3rem solid var(--theme-navy);
  border-radius: 200px 0px 0px 200px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.brief-cv-text__profile{
  text-align: justify;
  line-height: 1.2;
}
.brief-cv-text__button{
  text-align: right;
}
.brief-cv-photo{
  width: 15rem;
  height: 15rem;
  margin: 1rem 1rem;
  border: .3rem solid var(--theme-navy);
  border-radius: 50%;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.brief-cv-text{
  padding: .5rem 1.5rem .5rem 0rem;
}
.brief-cv-text>p{
  text-indent: 1rem;
}
.brief-cv-button {
  line-height: 1rem;
  font-size: 1.3rem;
  padding: 1rem 2rem;
  max-width: 350px;
  margin: .7rem 0rem .7rem  auto;
}
.portfolio-projects{
  display: grid;
  grid-template-columns: [start]repeat(4,[col-start] minmax(min-content, 28rem)[col-end])[end];
  background-color: var(--theme-light-gold);
  justify-content: center;
}
.portfolio-projects__top{
  grid-column: start / end;
 justify-self: center;
}
.portfolio-projects__grid{
  display: grid;
  grid-column: start / end;
  grid-template-columns: repeat(auto-fit,400px);
  gap: 1.5rem;
  justify-content: center;
  align-content: center;
  margin: 2rem .5rem;
}
.portfolio-projects__heading, .contacts__heading{
  letter-spacing: .2rem;
  background-color: var(--theme-olive);
  font-size: var(--font-large);
  line-height: 2rem;
  padding: 2rem 3rem;
  max-width: 460px;
  margin: 2.5rem 4rem;
  transform: rotate(-2deg);
  cursor: default;
  /* user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; */
}
.portfolio-projects__heading:after, .contacts__heading:after{
  border: 3px solid var(--theme-navy);
  bottom: 8px;
  left: 8px;
}
.project{
  align-self: center;
  position: relative;
  transition: .5s ease-in-out;
  outline: 1px solid var(--theme-light-gold);
}
.project > img{
  width: 400px;
  opacity: 1;
  padding: 0rem 0rem;
  transition: .3s ease;
 }
.project__title{
  position: absolute;
  width: 400px;
  text-decoration: none;
  padding: 0rem 1rem;
  top: 5%;
  opacity: 0;
  transition: .5s ease-in-out;
}
.project__buttons{
  position: absolute;
  width: 400px;
  padding: 0rem 1rem;
  text-align: center;
  bottom: 10%;
  opacity: 0;
  transition: .5s ease-in-out;
}
.project__title>span:first-child{
  display: block;
}
.project__title>span:nth-child(2){
  font-size: var(--font-small); 
  text-decoration: underline;
}
.project:hover{
  outline: 1px solid var(--theme-navy);
}
.project:hover .project__title{
  animation: projectTitle 1s  forwards;
}
.project:hover .project__buttons{
  animation: projectButs 1s  forwards;
}
.project:hover img{
  opacity: 0;
}
.project__buttons>a{
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: normal;
  padding: 0rem 1rem;
  line-height: 1.5rem;
  background-color: var(--theme-olive);
  min-width: 130px;
  margin: 0rem 1rem;
}
.project__buttons>a:after{
  bottom: 4px;
  left: 4px;
}
 .contacts{
  display: flex;
  flex-wrap: wrap;
  background-color: var(--theme-olive);
  align-items: center;
  padding: 2rem 1rem 0rem;
 }
 .contacts__heading{
  background-color: var(--theme-gold);
}
.contacts__text{
  margin: 0px auto;  
}
.contacts__text p{
  margin: 0rem 0rem 1rem;
  text-align: center;
  font-size: var(--font-regular);
}
.contacts__social{
  font-size: var(--font-xlarge);
  text-align: center;
}
.contacts__social i{
  padding: 0rem 2rem;
  color:var(--theme-navy);
}
div.contacts__social:first-of-type{
  --fa-animation-duration: 3s;
}
i.fa-square-instagram{
  --fa-animation-delay:0s;
}
i.fa-facebook{
  --fa-animation-delay:1s;
}
i.fa-linkedin{
  --fa-animation-delay:2s;
}
div.contacts__social:nth-of-type(2){
  --fa-animation-duration: 8s;
}
footer{
  background-color: var(--theme-olive);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid var(--theme-navy);
 }
 footer>p{
  font-size: var(--font-regular);
 }

@keyframes fadeInLeft {
  0%
  {
    opacity: 0;
    transform: translateX(10rem) ;
  }
  75%
  {
    opacity: .8;
    transform: translateX(-2rem) ;
  }
  100%
  {
    opacity: 1;
    transform: translateX(0) ;
  }
}
@keyframes fadeInRight {
  0%
  {
    opacity: 0;
    transform: translateX(-10rem) ;
  }
  75%
  {
    opacity: .8;
    transform: translateX(2rem) ;
  }
  100%
  {
    opacity: 1;
    transform: translateX(0) ;
  }
}
@keyframes moveUp {
  0%
  {
    opacity: 0;
    transform: translateY(-5rem);
  }
  100%
  {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDown {
  0%
  {
    opacity: 0;
    transform: translateY(5rem);
  }
  100%
  {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes projectTitle {
  0%{
    opacity: 0;
  }
  25%{
    opacity: .5;
    top: 22%;
  }
  100%{
    opacity: 1;
    top: 20%;
  }
}
@keyframes projectButs {
  0%{
    opacity: 0;
  }
  25%{
    opacity: .5;
    bottom: 25%;
  }
  100%{
    opacity: 1;
    bottom: 22%;
  }
}

@media (max-width: 1054px) {
  h1{
    font-size: 3rem;
  }
  h2{
    font-size: 2rem;
  }
}

@media (max-width: 985px) {
  h1{
    padding: 0rem;
  }
  h2{
    padding: 2rem 1rem 0rem;
  }
  .intro-buttons > button{
    max-width: 300px;
    line-height: 1.25rem;
    padding: .75rem 1.5rem;
    font-size: 1.2rem;
  }
  /* h3{
    font-size: 1.2rem;
  } */
  .brief-cv-button{
    max-width: 300px;
    padding: .75rem 1.25rem;
    font-size: 1rem;
  }
  .portfolio-projects__heading, .contacts__heading{
    font-size: var(--font-regular);
    line-height: 1.6rem;
    padding: 1.5rem 2.5rem;
    max-width: 380px;
    margin: 0rem 2rem;
  }
  .contacts__heading{
    padding: 1.5rem 2rem;
  }
  .brief-cv-wrapper{
    grid-template-columns: minmax(200px,1fr) 5fr;
  }
  .brief-cv-photo{
    width: 10rem;
    height: 10rem;
    justify-self: center;
  }
  .intro-buttons > button:after, .brief-cv-button:after, .portfolio-projects__heading:after,.contacts__heading:after {
    bottom: 4px;
    left: 4px;
  }
}
@media (max-width:784px) {
  .intro{
    background-image: url(../images/smalllogo.png);
  }
  .intro-heading{
    margin-right: 0.2rem;
  }
  h1{
    font-size: 2.7rem;
  }
  h2{
    font-size: 1.7rem;
  }
  .contacts{
    padding: 2rem 0rem 0rem;
   }
   .contacts__heading{
    max-width: 350px;
   }
   .contacts__social{
    font-size: var(--font-large);
   }
  footer>p, .contacts__text p{
    font-size: 1.4rem;
   } 
}
@media (max-width:700px) {
  .intro{
    background-image: none;
    place-items: center center;
  }
  .intro-buttons > button{
    margin: 0rem 2rem;
  }
  .contacts{
    justify-content: center;
  }
  .contacts__heading{
    margin-bottom: 2rem;
  }
  .brief-cv{
    padding: 1rem 1rem 2.5rem;
   }
  .brief-cv-wrapper{
    grid-template-columns: 1fr;
    border: .2rem solid var(--theme-navy);
    border-radius: 20px ;
  }
  .brief-cv-text{
    padding: .5rem 1.5rem;
  }
}
@media (max-width:600px) {
  .project > img{
    width: 350px;
  }
  .portfolio-projects__grid{
    grid-template-columns: repeat(auto-fit,350px);
  }
  .project__title{
    width: 350px;
  }
  .project__buttons{
    width: 350px;
  }
  
}