@font-face {
  font-family: 'Dosis';
  src: url(../Fonts/dosis.ttf);
}
  
@font-face {
  font-family: 'Quicksand';
  src: url(../Fonts/quicksand.ttf);
}

@font-face {
  font-family: 'Aqila';
  src: url(../Fonts/aqila.ttf);
}

html, body {
    font-family: 'Quicksand', system-ui, sans-serif;
    height:100%;
    margin:0;
    padding:.5em;
    background:white;
}


h1 {
    font-size:1.5em;
}

/* -------------------- PORTFOLIO PAGE -------------------- */

.portimg {
  flex: 1 1 calc(33.333% - 0.8rem);
  max-width: calc(33.333% - 0.8rem);
  height: auto;
  max-height: 250px;
  object-fit: cover;
  display: block;
}

.portimgstack {
  flex: 1 1 calc(33.333% - 0.8rem);
  max-width: calc(33.333% - 0.8rem);
  height: auto;
  width:100%;
  object-fit: cover;
  display: block;
}

.portimg:hover {
  opacity: 1;
  transform: scale(1.03);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hide {
 display:none;
 margin-top:4em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: flex-start;
}

.stack {
  display: block;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: flex-start;
}

.portbutton {
 border:none;
 display:inline-block;
 padding:8px 16px;
 vertical-align:middle;
 overflow:hidden;
 text-decoration:none;
 color:inherit;
 background-color:inherit;
 text-align:center;
}

.modal {
 z-index:4;
 display:none;
 padding-top:0;
 position:fixed;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow:auto;
 background-color:rgb(0,0,0);
 background-color:rgba(0,0,0,0.4)
}

.modal-content {
 margin:auto;
 background-color:#fff;
 position:relative;
 padding:0;
 outline:0;
 width:600px;
 text-align:center;
}

#caption {
 display:inline-block;
}

.inimage {
 max-width:100%;
 height:auto
}


/* -------------------- PORTFOLIO PAGE END -------------------- */

.fit {
  width:100%;
  height:auto;
  border-radius:10px;
}

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

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideFade {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  button:hover, a:hover {
    transform: scale(1.05);
  }

  button:active, a:active {
    transform: scale(0.97);
  }

  @keyframes glowPulse {
    0%, 100% { 
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 
                    0 0 15px rgba(255, 255, 255, 0.2); 
    }
    50% { 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 
                    0 0 20px rgba(255, 255, 255, 0.5), 
                    0 0 30px rgba(255, 255, 255, 0.3); 
    }
}

/* --------- Link Colors --------- */

a {
  color:#069076;
}

a:hover {
  color:#903b06;
}

a:focus {
  color:#903b06;
}

a:active {
  color:#067990;
}

/* --------- Link Colors End --------- */