@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');

/* body {
    font-family: 'Fredericka the Great', cursive;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    color: rgb(73, 66, 66);
    overflow: hidden;
} */

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 3rem;
}

h1,
h2 {
    font-weight: 200;
    margin: 0.4rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 2rem;
    color: rgb(73, 66, 66);
}

.author {
    color: rgb(180, 0, 75);
    text-decoration: none;
}

a:hover {
    color: rgb(23, 77, 32);
}

.fas {
    color: rgb(0, 0, 0);
    /* font-size: 3rem; */
    /*  background-color: green; conditional */
    margin: 0px;
    padding: 0px;
    /*****
    animation-name: erasing;    
    animation-duration: 3s;
    ***/
}

/**** this is the Pencil Erasing animation****/
.erasing-animation {
    animation-name: erasing;
    animation-duration: 1.8s;
}

@keyframes erasing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(180deg);
    }

    60% {
        transform: rotate(180deg);
    }

    70% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/***this is the pencil writing animation*****/
.writing-animation {
    animation-name: writting;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes writting {
    0% {
        transform: scale(1.5) translate(0px, 0px);
    }

    2% {
        transform: scale(1.5) translate(30px, -40px);
    }

    4% {
        transform: scale(1.5) translate(0px, 0px);
    }

    6% {
        transform: scale(1.5) translate(30px, -40px);
    }

    8% {
        transform: scale(1.5) translate(0px, 0px);
    }

    10% {
        transform: scale(1.5) translate(30px, -40px);
    }

    12% {
        transform: scale(1.5) translate(0px, 0px);
    }

    14% {
        transform: scale(1.5) translate(30px, -40px);
    }

    16% {
        transform: scale(1.5) translate(0px, 0px);
    }

    18% {
        transform: scale(1.5) translate(30px, -40px);
    }

    20% {
        transform: scale(1.5) translate(0px, 0px);
    }

    22% {
        transform: scale(1.5) translate(30px, -40px);
    }

    24% {
        transform: scale(1.5) translate(0px, 0px);
    }

    26% {
        transform: scale(1.5) translate(30px, -40px);
    }

    28% {
        transform: scale(1.5) translate(0px, 0px);
    }

    30% {
        transform: scale(1.5) translate(30px, -40px);
    }

    32% {
        transform: scale(1.5) translate(0px, 0px);
    }

    34% {
        transform: scale(1.5) translate(30px, -40px);
    }

    36% {
        transform: scale(1.5) translate(0px, 0px);
    }

    38% {
        transform: scale(1.5) translate(30px, -40px);
    }

    40% {
        transform: scale(1.5) translate(0px, 0px);
    }

    42% {
        transform: scale(1.5) translate(30px, -40px);
    }

    44% {
        transform: scale(1.5) translate(0px, 0px);
    }

    46% {
        transform: scale(1.5) translate(30px, -40px);
    }

    48% {
        transform: scale(1.5) translate(0px, 0px);
    }

    50% {
        transform: scale(1.5) translate(30px, -40px);
    }

    52% {
        transform: scale(1.5) translate(0px, 0px);
    }

    54% {
        transform: scale(1.5) translate(30px, -40px);
    }

    56% {
        transform: scale(1.5) translate(0px, 0px);
    }

    58% {
        transform: scale(1.5) translate(30px, -40px);
    }

    60% {
        transform: scale(1.5) translate(0px, 0px);
    }

    62% {
        transform: scale(1.5) translate(30px, -40px);
    }

    64% {
        transform: scale(1.5) translate(0px, 0px);
    }

    66% {
        transform: scale(1.5) translate(30px, -40px);
    }

    68% {
        transform: scale(1.5) translate(0px, 0px);
    }

    70% {
        transform: scale(1.5) translate(30px, -40px);
    }

    72% {
        transform: scale(1.5) translate(0px, 0px);
    }

    74% {
        transform: scale(1.5) translate(30px, -40px);
    }

    76% {
        transform: scale(1.5) translate(0px, 0px);
    }

    78% {
        transform: scale(1.5) translate(30px, -40px);
    }

    80% {
        transform: scale(1.5) translate(0px, 0px);
    }

    82% {
        transform: scale(1.5) translate(30px, -40px);
    }

    84% {
        transform: scale(1.5) translate(0px, 0px);
    }

    86% {
        transform: scale(1.5) translate(30px, -40px);
    }

    88% {
        transform: scale(1.5) translate(0px, 0px);
    }

    90% {
        transform: scale(1.5) translate(30px, -40px);
    }

    92% {
        transform: scale(1.5) translate(0px, 0px);
    }

    94% {
        transform: scale(1.5) translate(30px, -40px);
    }

    96% {
        transform: scale(1.5) translate(0px, 0px);
    }

    98% {
        transform: scale(1.5) translate(30px, -40px);
    }

    100% {
        transform: scale(1.5) translate(0px, 0px);
    }


}

@media(min-width: 1200px) {
    h1 {
        font-size: 3rem;
    }

    /* .fas {
        font-size: 3rem;
    } */
}

@media(max-width: 800px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 3rem;
    }
}

@media(max-width: 500px) {
    h1 {
        font-size: 2.5 rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

/***this is the hand writing animation*****/
.hand-animation {
    animation-name: hand;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes hand {
    0% {
        transform: translate(0px, 0px);
    }

    2% {
        transform: translate(0px, -40px);
    }

    4% {
        transform: translate(0px, 0px);
    }

    6% {
        transform: translate(0px, -40px);
    }

    8% {
        transform: translate(0px, 0px);
    }

    10% {
        transform: translate(0px, -40px);
    }

    12% {
        transform: translate(0px, 0px);
    }

    14% {
        transform: translate(0px, -40px);
    }

    16% {
        transform: translate(0px, 0px);
    }

    18% {
        transform: translate(0px, -40px);
    }

    20% {
        transform: translate(0px, 0px);
    }

    22% {
        transform: translate(0px, -40px);
    }

    24% {
        transform: translate(0px, 0px);
    }

    26% {
        transform: translate(0px, -40px);
    }

    28% {
        transform: translate(0px, 0px);
    }

    30% {
        transform: translate(0px, -40px);
    }

    32% {
        transform: translate(0px, 0px);
    }

    34% {
        transform: translate(0px, -40px);
    }

    36% {
        transform: translate(0px, 0px);
    }

    38% {
        transform: translate(0px, -40px);
    }

    40% {
        transform: translate(0px, 0px);
    }

    42% {
        transform: translate(0px, -40px);
    }

    44% {
        transform: translate(0px, 0px);
    }

    46% {
        transform: translate(0px, -40px);
    }

    48% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -40px);
    }

    52% {
        transform: translate(0px, 0px);
    }

    54% {
        transform: translate(0px, -40px);
    }

    56% {
        transform: translate(0px, 0px);
    }

    58% {
        transform: translate(0px, -40px);
    }

    60% {
        transform: translate(0px, 0px);
    }

    62% {
        transform: translate(0px, -40px);
    }

    64% {
        transform: translate(0px, 0px);
    }

    66% {
        transform: translate(0px, -40px);
    }

    68% {
        transform: translate(0px, 0px);
    }

    70% {
        transform: translate(0px, -40px);
    }

    72% {
        transform: translate(0px, 0px);
    }

    74% {
        transform: translate(0px, -40px);
    }

    76% {
        transform: translate(0px, 0px);
    }

    78% {
        transform: translate(0px, -40px);
    }

    80% {
        transform: translate(0px, 0px);
    }

    82% {
        transform: translate(0px, -40px);
    }

    84% {
        transform: translate(0px, 0px);
    }

    86% {
        transform: translate(0px, -40px);
    }

    88% {
        transform: translate(0px, 0px);
    }

    90% {
        transform: translate(0px, -40px);
    }

    92% {
        transform: translate(0px, 0px);
    }

    94% {
        transform: translate(0px, -40px);
    }

    96% {
        transform: translate(0px, 0px);
    }

    98% {
        transform: translate(0px, -40px);
    }

    100% {
        transform: translate(0px, 0px);
    }


}