/* Util */
h1, h2, h3 {
  transition: all 0.8s ease-in-out 1s;
  color: var(--text1-colour);
  text-shadow: 0px 0px 0px #111;
  cursor: default;
}
h1:hover,
h2:hover,
h3:hover {
  transition-delay: 0s;
  color: var(--light-colour);
  text-shadow: 0px 0px 15px var(--primary2-colour), 1px 1px 1px var(--secondary-colour);
}

/* Navbar Icon & scrolled Menu */
.nav-con2 {
  transform: translateX(100%);
  transition: 0.5s ease-out;
}

.triangle {
  transition: all 0.5s ease-in-out;
}

.nav-con1:hover .triangle {
  opacity: 1.0;
  border-bottom: 70px solid var(--primary1-colour);
  filter: drop-shadow(0 0 20px var(--primary2-colour)) drop-shadow(2px 3px 2px var(--secondary-colour));
  transition: all 0.5s ease-in-out;
}

.nav-hov {
  transition: all 0.5s ease-in-out;
}
.nav-hov:hover {
  transform: rotateZ(180deg) scale(1.2);
  transition: all 0.5s ease-in-out;
}

.nav-icon {
  animation: rotateInf linear 20s infinite;
}
@keyframes rotateInf {
  100% {
    transform: rotateZ(-360deg);
  }
}

@media(min-width: 799px) {
  .nav-con1:hover ~ .nav-con2,
  .nav-con2:hover {
    /* animation: navShow 0.5s ease-out forwards; */
    transition: 0.5s ease-out;
    transform: translateX(0%);
    opacity: 1;
  }

  .navbar a{
    border-bottom: 2px solid transparent;
    transition: 0.5s ease-in-out;
    text-shadow: 0px 0px 0px #111;
  }
  .navbar a:hover {
    transition: 0.5s ease-in-out;
    color: var(--light-colour);
    border-bottom: 2px solid #fff;
    text-shadow: 0px 0px 15px var(--primary2-colour), 1px 1px 1px var(--secondary-colour);
  }
}

@media(max-width: 800px) {
  .nav-con1:hover ~ .nav-con2 {
    /* animation: navShow 0.5s ease-out forwards; */
    transition: 0.5s ease-out;
    transform: translateX(0%);
    opacity: 1;
  }

  .nav-con2:hover {
    transition: 0.5s ease-out;
    transform: translateX(100%);
  }
}

@media(max-width: 1235px) {
  .navbar {
    width: 20vw;
  }
  .nav-con2 {
    text-align: center;
    padding-top: 30vh;
  }
}

@media(max-width: 800px) {
  .navbar {
    width: 100%;
  }
  .nav-con1 {
    right: 5vw;
  }
  .nav-con2 a{
    font-size: 3rem;
    line-height: 5rem;
  }
}

/* Blog View */
@media (max-width: 1367px) {
  .blog-view-con {
    flex-direction: column;
  }
  .blog-view-con .view-con {
    min-width: 90vw;
    max-width: 90vw;
  }

  .blog-view-con .card-container {
    max-width: 80vw;
  }
}

@media(max-width: 1235px) {
  .blog-view-con .view-con {
    min-width: 100%;
    max-width: 100%;
  }

  .blog-view-con .card-container {
    max-width: 90vw;
  }
}

@media(max-width: 900px) {
  .view-con {
    padding: 40px 0;
  }

  .font-ps2{
    text-align: center;
  }

  .view-page p{
    font-size: 1.3rem;
    line-height: 2rem;
    padding: 30px 0;
  }

  .view-page {
    padding: 40px 20px;
  }
}

@media(max-width: 580px) {
  .view-page p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .view-page .font-ps2 {
    font-size: 1.5rem;
  }
}

/* Welcome */
.welcome {
  animation: slideInFromBottom 1.5s ease-out forwards;
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(10%);
  }

  100% {
    transform: translateY(0);
  }
}

.overlay{
  animation: blendIn 2s ease-out forwards;
}

@keyframes blendIn {
  0%{
    background: rgba(0,0,0,1.0);
  }
  100%{
    background: rgba(0,0,0,0.0);
  }
}

.welcome .welc-text{
  opacity: 0;
  text-shadow: none;
  animation: slideInFromRight 2s ease-out forwards 1.2s, blendInWelcome 2s ease-out forwards 1.2s;
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(5%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes blendInWelcome {
  100% {
    opacity: 1;

  }
}



/* Cards */
.card-a,
.card-b {
  transition: transform 0.7s ease-out, background-color 0.7s ease-out;
}

.card-a {
  transform: translateY(50%);
  z-index: 1;
}
.card-b {
  transform: translateY(-50%);
  z-index: 0;
}

.card:hover .card-a,
.card:hover .card-b {
  transform: translateY(0%);
}

.button {
  box-shadow: 0 0 0 #000;
}
.button:hover {
  animation: buttonFloating 1.4s ease-out infinite;
}

@keyframes buttonFloating {
  0% {
    transform: translateY(0);
    box-shadow: 1px 1px 1px #aaa;
    background-color: #555;
    color: var(--primary2-colour);
  }

  50% {
    transform: translateY(-8px);
    box-shadow: 4px 10px 2px #aaa;
    background-color: var(--primary3-colour);
    color: var(--light-colour);
  }

  100% {
    transform: translateY(0);
    box-shadow: 1px 1px 1px #aaa;
    background-color: #555;
    color: var(--primary2-colour);
  }
}


/* Projects */
@media(max-width: 1600px) {
  .projects-main {
    flex-direction: column;
  }
}

@media(max-width: 980px) {
  .p-h-con {
    flex-direction: column;
    /* height: 100vh; */
  }

  .projects-main {
    width: 100%;
  }
  .projects-con {
    flex-direction: column;
  }
}