html {
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}
.w3-row-padding img {
    margin-bottom: 12px;
}
.w3-sidebar {
    width: 120px;background: #222;
}
#main {
    margin-left: 120px;
}
@media only screen and (max-width: 600px) {
    #main {margin-left: 0}
}

/* .hidden {
    opacity: 0;
    transition: all 1s;
}

.show {
    opacity: 1;
} */

#home {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

/*.typewriter h2 {
    color: #fff;
    overflow: hidden;
    border-right: .1em solid rgba(0,0,0,0);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .1em;
    animation: 
      typing 0.2s steps(30, end),
      blink-caret .5s step-end 6;
}*/

.typewriter h1 {
    color: #fff;
    overflow: hidden;
    border-right: .1em solid rgba(0,0,0,0);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .1em;
    animation: 
      typing 3.5s steps(30, end),
      blink-caret .5s step-end 6;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
}

.wave {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}
  
@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }
    100% { transform: rotate( 0.0deg) }
}

.c_black {
    color:black;
}
.c_white {
    color:white;
}
/* .thepeeps191_icon {
    background-image: url("/thepeeps191.png");
    background-position: center center;
} */