/* Hint: use relative measurements you'll find them useful! */
/* I may have removed a selector or two */

@import url("https://fonts.googleapis.com/css?family=Monoton");  /* Set this for Monton a Google Font ...figure out their syntax */

html{
    background-image: url("./background.png");
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
}

* {
    box-sizing: border-box;
}

body {
    margin: 6rem 4rem;
    border-image: url("./border.gif") 15;
    border-width: 1rem;
    border-style: solid;
}

main {
    margin-top: -1.3rem;
    background-color: #FFFFFF;
}

header {
    text-transform: uppercase;
    padding: 2rem;
}

.logo {
    background-color: rgb(253,79,194);
    border-radius: 90%;
    padding: 2vw 2vw;
    box-shadow: 1px 3px 10px black;
    font-family: "Monoton", cursive;
    font-size: 9vw;
    text-decoration: none;
    color: #000;
}

.fun {
    font-family: "Courier",serif;
    font-size: 12vw;
    color: #FFFFFF;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #F00000;
    text-shadow: 1.5px 1.5px 2px #F00000;
    margin-top: 1.5rem;
}

#kern3{
    letter-spacing: -2vw;
}
section {
    /* color rgb(243,234,95) is used */
    background: rgb(253,79,194);
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    color: white;
    margin: 0 2rem 0 2rem;
}

#zap {
    background-color: rgb(243,234,95);
    font-size: 2rem;
    text-shadow: 0 1px 2px #000;
    border-style: double;
    border-color: #FFFFFF;
    border-width: 0.1em;
    border-radius: 0.25rem;
}

#zap > h3 {
    margin: 1rem 0 1rem 0;
}
section > div {
    /* font is 'Comic Sans MS, text is automatically adjusted to lowercase do not mod the HTML */
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 4vw;
    text-transform: lowercase;
    color: #FFFFFF;
    padding: .70em 0;
}
section > div:nth-child(odd) {
    /* background color is  rgb(192,77,249) */
    background: rgb(192,77,249);

}
section > div:nth-child(even) {
    /* background color is  rgb(43,209,252) */
    background: rgb(43,209,252);
}
section > div:nth-child(3):after {
    content: " ♥♥♥";
}

    /* some free rules for fun */
aside {
    background: rgb(255,63,63);
    color: white;
    border: 1rem solid black;
    border-radius: 1rem 3rem 1rem 3rem;
    /* rem units are your friend use them often */
    font-family: sans-serif;
    font-size: 2rem;
    text-align: center;
    margin: 1rem 2rem 1rem 2rem;
}

svg {
    width: 1em;
    height: 1em;
    fill: #fff;
}

footer{
    background-color: rgb(253,79,194);
    /*font not right*/
    font-family: "URW Chancery L", cursive,serif;
    font-size: 4vw;
    padding: 5vw 0;
    text-align: center;
    margin-top:3rem;

}

footer > div  > img{
    width: 40%;
    margin-bottom: 0.5rem;
}

footer > div:hover > span{
    visibility: visible;
}

footer > div > span{
    visibility: hidden;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 2vw;
    box-shadow: 1px 1px 6px #000000;
    font-size: 3vw;
    text-align: center;
    margin-left: 4vw;
    padding-top: 2vw;
    width: 12vw;
    height: 11vw;
    border: 0.9vw solid black;
}

footer > div > span:after{
    position: absolute;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent transparent black black;
    transform-origin: 0 0;
    transform: rotate(45deg);
    font-size: 1.8vw;
    margin-left: -6vw;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
}

/* Oh no! The file has been truncated I guess you have to fill it in */