/*Importing font stylesheet from fonts.google.com*/
@import url('https://fonts.googleapis.com/css2?family=Kablammo&display=swap');
body {
    width:90%;
    background-color: azure;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#Fonts>p {
    font-family: 'Kablammo', cursive;
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-size: 23px;
    line-height: 1.3em; /* em is how much times is the height from the parent height */
    font-weight: 900;
    font-variant: small-caps;
}



/*Colors*/
.inline-code {
    font-family: 'Courier New', Courier, monospace;
    background-color: gray;
    padding: 2px;
    border-radius: 5px;
    display: inline;
}

#canvas {
    border: 10px solid black;
    border-radius: 25px;
    margin: auto;
    width: 75%;
    height: 300px;
    background-color: rgb(33, 86, 130);
}

#face {
    top:50px;
    position: relative;
    margin:auto;
    width:300px;
    height:200px;
    background-color: rgb(198, 159, 76);
    clip-path:polygon(0% 10%,
                      5% 0%,
                      50% 10%,
                      95% 0%,
                      100% 10%,
                      95% 30%,
                      80% 80%,
                      50% 100%,
                      20% 80%,
                      5% 30%);
    
    background-image: linear-gradient(60deg,rgba(0, 0, 0, 0.523) 30%, rgba(255, 255, 255, 0.249));
}

.eye{
    position: relative;
    top:25%;
    left: 12%;
    width: 30%;
    height: 15%;
    display: inline-block;
    background-color: white;
    clip-path: polygon(0% 0%,
                       90% 75%,
                       100% 100%,
                       20% 80%);
}

#right-eye {
    left:25%;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#mouth {
    position: relative;
    display: inline-block;
    right: 17.5%;
    top:60%;
    width:10%;
    height:5%;
}

#mouth-line {
    stroke:rgb(0, 0, 0);
    stroke-width:1;
    fill: none;
}