@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wdth,wght@107.9,200..700&display=swap');


/*Estilos de "papel" virtual o Scrapbook*/
.note1{
    background-color: #f8e1ffc0;
    background-size: 24px 24px;
    background-image:  repeating-linear-gradient(0deg, #7a9d7d, #7a9d7d 1.2000000000000002px, #f8e1ff57 1.2000000000000002px, #f8e1ff4f);
}

.note2{
    background-color: #fff8eebd;
    background-image: radial-gradient(rgba(206,153,73,1) 1.2000000000000002px, #fff8ee4f 1.2000000000000002px);
    background-size: 24px 24px;
}

.note3{
    background-color: rgba(245, 240, 255, 0.438);
    background-image:  linear-gradient(rgba(68, 77, 247, 0.562) 1px, transparent 1px), linear-gradient(to right, rgba(68, 77, 247, 0.788) 1px, rgba(245, 240, 255, 0.438) 1px);
    background-size: 20px 20px;
}

.note4{
    background-color: #7a9d7db9;
    background-size: 24px 24px;
    background-image:  repeating-linear-gradient(0deg, #7a9d7d, #7a9d7d 1.2000000000000002px, #f8e1ff57 1.2000000000000002px, #f8e1ff4f);
}

.Typewriter{
    display: flex;
    justify-content: center;
}

.Typewriter h1{
    font-size: 4rem;
    font-family: 'Courier New', Courier, monospace;
    margin-inline: auto;
    overflow: hidden;

    white-space: nowrap;
    border-right: 3px solid;

    /*steps = number of characters*/
    animation: typing 3s steps(15) forwards, blink 1s step-end infinite;
}

@keyframes typing {
    from{
        width: 0;
    }

    to {
        width: 100%;
    }

}
@keyframes blink {
    50%{
        border-color: transparent;
    }
}

/*Stikers*/

.stiker{
    position: absolute;
    z-index: 1;
    max-width: 150px;
}

#plant{
    top: 0;
    left: 100px;
}

#planet{
    top: 0;
    right: 100px;
}

#About{
    display: flex;
    flex-direction: row;
}