@font-face {
    font-family: "Awke";
    src: url("../../content/fonts/Awke-Regular.woff2");
}

body{
    background-color: rgb(255, 255, 255);
}

p {
    font-family: "Awke";
    margin: 0;
    padding: 10px;
    font-size: 25px;
    font-weight: bold;
    border: 2px solid black;
    transition: all 1000ms ease-in-out;

    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0% { line-height: 1; }
    50% { line-height: 1.6; }
    100% { line-height: 1; }
}

p.one {
    margin-top: -15px;
    line-height: 0;
    width: 320px;
    animation-delay: 0s;
}

p.two {
    margin-top: -15px;
    line-height: 20%;
    width: 420px;
    animation-delay: 0.2s;
}

p.three {
    margin-top: -15px;
    line-height: 40%;
    width: 520px;
    animation-delay: 0.4s;
}

p.four {
    margin-top: -15px;
    line-height: 60%;
    width: 620px;
    animation-delay: 0.6s;
}

p.five {
    margin-top: -15px;
    line-height: 80%;
    width: 720px;
    animation-delay: 0.8s;
}

p.six {
    margin-top: -15px;
    line-height: 100%;
    width: 820px;
    animation-delay: 1s;
}

p.seven {
    margin-top: -15px;
    line-height: 100%;
    width: 860px;
    animation-delay: 1.2s;
}

p.eight {
    margin-top: -15px;
    line-height: 80%;
    width: 820px;
    animation-delay: 1.4s;
}

p.nine {
    margin-top: -15px;
    line-height: 60%;
    width: 720px;
    animation-delay: 1.6s;
}

p.ten {
    margin-top: -15px;
    line-height: 40%;
    width: 620px;
    animation-delay: 1.8s;
}

p.eleven {
    margin-top: -15px;
    line-height: 20%;
    width: 520px;
    animation-delay: 2s;
}

p.twelve {
    margin-top: -15px;
    line-height: 0;
    width: 420px;
    animation-delay: 2.2s;
}

p.thirteen {
    margin-top: -15px;
    line-height: 20%;
    width: 520px;
    animation-delay: 2.4s;
}

p.fourteen {
    margin-top: -15px;
    line-height: 40%;
    width: 620px;
    animation-delay: 2.6s;
}

p.fifteen {
    margin-top: -15px;
    line-height: 60%;
    width: 720px;
    animation-delay: 2.8s;
}

p.sixteen {
    margin-top: -15px;
    line-height: 80%;
    width: 820px;
    animation-delay: 3s;
}

p.seventeen {
    margin-top: -15px;
    line-height: 100%;
    width: 860px;
    animation-delay: 3.2s;
}

p.eighteen {
    margin-top: -15px;
    line-height: 80%;
    width: 820px;
    animation-delay: 3.4s;
}

p.nineteen {
    margin-top: -15px;
    line-height: 40%;
    width: 620px;
    animation-delay: 3.6s;
}

p.twenty {
    margin-top: -15px;
    line-height: 0;
    width: 420px;
    animation-delay: 3.8s;
}


p.one:hover { width: 400px; padding-left: 50px; }

p.two:hover { width: 500px; padding-left: 80px; }

p.three:hover { width: 600px; padding-left: 100px; }

p.four:hover { width: 700px; padding-left: 150px; }

p.five:hover { width: 800px; padding-left: 180px; }

p.six:hover { width: 1000px; padding-left: 250px; }

p.seven:hover { width: 1000px; padding-left: 250px; }

p.eight:hover { width: 800px; padding-left: 180px; }

p.nine:hover { width: 700px; padding-left: 150px; }

p.ten:hover { width: 600px; padding-left: 100px; }

p.eleven:hover { width: 500px; padding-left: 80px; }

p.twelve:hover { width: 400px; padding-left: 50px; }

p.thirteen:hover { width: 500px; padding-left: 80px; }

p.fourteen:hover { width: 600px; padding-left: 100px; }

p.fifteen:hover { width: 700px; padding-left: 150px; }

p.sixteen:hover { width: 800px; padding-left: 180px; }

p.seventeen:hover { width: 1000px; padding-left: 250px; }

p.eighteen:hover { width: 800px; padding-left: 180px; }

p.nineteen:hover { width: 600px; padding-left: 100px; }

p.twenty:hover { width: 400px; padding-left: 50px; }