:root {
  --color-primary: linear-gradient(45deg, #b2ccd6 30%, #ff8e53 90%);
  --color-secondary: rgb(247, 244, 244);
  --color-accent: black;
}

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


body {
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 2rem;
}

h4 {
  text-align: center;
  padding-bottom: 1rem;

}


a:hover {
  cursor: pointer;
  text-decoration: none; 
}

.video-section {
  object-fit: cover;
  width: 100%;
  height: 100vh;
  position: fixed;
}

 /* Navbar */

.portfolio-content {
  z-index: 1;
  padding-top: .6rem;
  position: absolute;
  top: 0;
  width: 100%;
}

.navigation__section {
  color:  var(--color-secondary);

}


.initials {
  background: var(--color-primary);
  color: var(--color-accent);
  height: 2.8rem;
  width: 2.8rem;
  border-radius: 50%;
  text-align: center;
  float: left;
}

/*Icons*/

.icons-primary a:hover {
  text-decoration: none;
}

.icons {
  margin-right: 2rem;
  display: flex;
  flex-direction: column;
  float: right;
 
}
.icons i {
  opacity: 0.7;
  margin-bottom: 1em;
  font-size: 1.2em;
  display: grid;
  border-radius: 50%;
  border: 4px solid  var(--color-secondary);
  place-items: center;
  padding: 0.65em;
  transition: 0.2s;
  background: #d4dbe9;
  box-shadow: -11px -11px 25px rgba(255, 255, 255, 0.35),
    11px 13px 25px rgba(238, 241, 247, 0.738);
}

.icons i:hover {
  opacity: 1;
  border-radius: 50%;
  cursor: pointer;
  background: #eaeef5;
  transform: scale(1.1);
  mix-blend-mode: normal;
  box-shadow: -11px -11px 22px rgba(255, 255, 255, 0.524448),
    11px 13px 22px rgba(166, 181, 208, 0.929496),
    inset -11px -11px 28px rgba(255, 255, 255, 0.692936),
    inset 11px 11px 28px rgba(211, 221, 240, 0.856);
}

.contact__icons {
  font-size: 2rem;
  text-align: center;
}
.contact__icons > * + * {
  margin-left: 2rem;
}

/* Typewriting */

.intro {
  color: var(--color-secondary);
  padding: 23% 15% ;
}

.typing {
  margin-left: .8rem;
  position: relative;
}

.typing::after {
  content: "";
  position: absolute;
  right: -5px;
  animation: blink 0.4s infinite ease;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Card */

.card {
  margin: 5rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 10px #9cafd1;
  padding: 20px 30px;
  width: 80%;
  text-align: justify;
  overflow: hidden;

}

.card h4 {
  font-size: 2.5rem;
}
.card h5 {
  font-size: 1.5rem;
  margin-top: 1rem;
  text-decoration: underline;
}
.portfolio-content .card {
  background-color: var(--color-accent);
  color: var(--color-secondary);
}

@media screen and (max-width: 599px) {
  .card {
    text-align: left;
  }
}

/* Image */

.image {
  background-image: url(../assets/img.jpg);
  background-size: cover;
}

.img-size {
  width: 17rem;
  height: 15rem;
  max-width: 100%;
  border-radius: 25%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Resume */

#resume a {
  color: white;
}

#resume a:hover {
  color:black;
  text-decoration: none;
}

.btn {
  cursor: pointer;
  background: var(--color-accent);
  box-shadow: 0 0 10px #9cafd1;
}
.btn:hover {
  background: var(--color-secondary);
}

/* Projects */

.projects-img {
  max-width: 100%;
  width:20rem;
  height:9rem;
  opacity: 0.5;
  cursor: pointer;
 
}

#projects-img[title]:hover:after {
  content: attr(title);
  position: absolute;
}

.projects-img:hover {
  opacity: 1;
}
.projects_individual {
  margin:1rem;
}

/* Grid */
.grid {
  display: grid;
}
.grid--align{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2,1fr);

}
.grid > * + * {
  margin-left: 1rem;
}

@media screen and (max-width: 599px) {
  .grid--align{
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6,1fr);
  
  }
}

.back_to_top {
  font-size: 2rem;
 
}

/*Footer */

footer {
  text-align: center;
  padding: 3px;
  background: var(--color-primary);
  color:var(--color-accent);
}