/* ---------------------------- TRANSITIONS ---------------------------- */

/* ----- PROJECT BOXES ----- */
.project-1 {
  transition: transform 0.5s;
}

.project-1:hover {
  transform: scale(1.1);
}

.project-2 {
  transition: transform 0.5s;
}

.project-2:hover {
  transform: scale(1.1);
}

/* ----- BUTTONS ----- */

/* See Project */
.external_link {
  transition: background-color 1s, transform 1s;
}

/* Get my Resume */
#ex-li-3 {
  transition: background-color 1s, transform 1s;
}

#ex-li-3:hover {
  background: #008552;
}

/* Get in touch */
#contact-button {
  transition: background-color 1s, transform 1s;
}

#contact-button:hover {
  background: #008552;
}

/* ----- TOP MENU (Portfolio/About/Contact) ----- */

.list-item {
  transition: transform 0.5s;
}

.list-item:hover {
  transform: scale(1.4);
  margin: 0;
  box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24);
}

/* ----- About Me Grids (Languages/Frameworks/Skills) ----- */

.am-skills-list:hover {
  color: rgba(8, 209, 213, 0.905);
  transform: scale(1.3);
  box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24);
  transition: transform 0.5s;
}
.am-frame-list:hover {
  color: rgba(8, 209, 213, 0.905);
  transform: scale(1.3);
  box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24);
  transition: transform 0.5s;
}
.am-lang-list:hover {
  color: rgba(8, 209, 213, 0.905);
  transform: scale(1.3);
  box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24);
  transition: transform 0.5s;
}

/* ---------------------------- ANIMATIONS ---------------------------- */

/* ----- Index Page Headline title ----- */

.headline-title2 {
  animation-duration: 3s;
  animation-name: h2title2;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes h2title2 {
  from {
    margin-left: -10%;
  }

  to {
    margin-left: 20%;
  }
}

/* ----- Index Page subtitle ----- */

.headline-sub-title {
  animation-duration: 3s;
  animation-name: h2subtitle;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes h2subtitle {
  from {
    margin-left: 20%;
  }

  to {
    margin-left: -10%;
  }
}

/* ----- Get my resume button (SPINNER) ----- */

#ex-li-3:active {
  animation: 3s infinite linear threesixty;
}

@keyframes threesixty {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 359deg;
  }
}