@font-face { font-family: oswald; src: url('../lib/fonts/Oswald-Regular.ttf'); } 
@font-face { font-family: oswald; font-weight: bold; src: url('../lib/fonts/Oswald-Bold.ttf');}

section, footer {
    padding: 80px 0;
}

#hero {
    height: 100vh;
    background-color: #191a2d;
    color: #2e9cca;
}

#hero .btn, #skills .btn, .btn-custom {
    padding: 10px 40px;
    font-size: 18px;
    border-radius: 30px;
}

.typewriter {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: 2px solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    
    animation: 
    typing 5.5s steps(25, end) 1s infinite,
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  /* from { width: 0 }
  to { width: 100% } */
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fec267 }
}

.subtitle, .card-title {
    font-family: oswald;
    font-weight: 600;
    text-transform: uppercase;
}

.normal-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: black;
}

#skills img {
    object-fit: cover;
    height: 50px;
    display: inline-block;
    margin: 40px 40px 0 0;
    transition: 0.6s;
}

#skills img:hover {
    height: 90px;
    margin: 0px 40px 0 0;
    transition: 0.6s;
}

#case-studies {
    background-color: #342b29;
    color: #fec267;
}

.card {
    margin-top: 20px;
}

.card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.btn-case:hover {
    background-color: white;
    border: 2px solid #fec267;
}

.btn-case {
    background-color: #fec267;
    border: 2px solid #fec267;
    margin-top: 20px;
    padding: 10px 30px;
    border-radius: 50px;
}

.bg-case {
    display: inline-block;
    font-size: 14px;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 8px 24px 8px 24px;
    border-radius: 30px;
    margin: 10px 10px 0 0;
}

#hobbies {
    background-color: #111111;
}

#contact a {
    margin: 10px 20px 0 0;
}

@media screen and (max-width: 600px) {
    .display-1 {
      font-size: 36px;
    }
}