* {
 cursor: url(https://github.com/maggie-needham/blog/releases/download/images/redarrow.png) 0 0 , auto;
}

body{
    background-image: url('mylip.png'); 
    background-color: steelblue;
    background-repeat: repeat;
    background-size: 120% 30%; 
    overflow: hidden;
    font-family: 'babel_sans';
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: yellow;
}

.blog {
    position: absolute;
    background-color: #fff8dc;
    top: 155px;
    text-align: center;
    left: 600px;
    z-index: 2;
    font-size: 80px;
    opacity: 60%;
    font-family: 'RawNotice';
}

.blog:hover {
    color: rgb(0, 21, 255);
}

.blog-linx {
    position: absolute;
    top: 39%;
    left: 33%;
    width: 33%;
    height: 7%;
    background-color: powderblue;
    opacity: 100%;
    z-index: 2;
    font-family: 'RawNotice';
} 

.by {
    position: absolute;
    top: 155px;
    left: 700px;
    z-index: 2;
    letter-spacing: 15px;
    background-color: yellow;
    font-size: 45px;
    width: 360px;
}

.subscribe {
    position: absolute;
    letter-spacing: 15px;
    top: 68%;
    left: 6%;
    font-size: 20px;
    font-family: 'babel_sans';
    font-style: italic;
    background-color: crimson;
}

.blog-linx {
    position: fixed;
    top: 447px;
    left: 396px;
    width: 396px;
    height: 84px;
    background-color: powderblue;
    opacity: 100%;
    z-index: 2;
    font-family: 'RawNotice';
}

.by {
    position: fixed;
    top: 291px;
    left: 648px;
    z-index: 2;
    letter-spacing: 15px;
    background-color: yellow;
} 

.by:hover {
    color: black;
}

.link {
    margin: 10px;
}

.subscribe {
    position: fixed;
    letter-spacing: 15px;
    top: 795px;
    left: 72px;
    font-size: 20px;
    font-family: 'babel_sans';
    font-style: italic;
    background-color: crimson;
}

.subscribe:hover {
    color: yellow;
} 

.blog-linx {
    position: fixed;
    top: 337px;
    left: 396px;
    width: 396px;
    height: 84px;
    background-color: powderblue;
    opacity: 100%;
    z-index: 2;
    font-family: 'RawNotice';
}

.by {
    position: fixed;
    top: 219px;
    left: 776px;
    z-index: 2;
    letter-spacing: 20px;
    background-color: yellow;
    font-size: 32px;
}

.by:hover {
    color: black;
}

.link {
    margin: 10px;
}

.subscribe {
    position: fixed;
    letter-spacing: 15px;
    top: 558px;
    left: 112px;
    font-size: 29px;
    font-family: 'babel_sans';
    font-style: italic;
    background-color: crimson;
    z-index: 1;
}

.subscribe:hover {
    color: yellow;
}

.pic1 {
    position: fixed;
    width: 250px;
    top: 30px;
    left: 95px;
    opacity: 100%;
}

.pic2 {
    position: fixed;
    width: 190px;
    height: auto;
    top: 135px;
    left: 234px;
    z-index: 1;
}



.pic3 {
    position: fixed;
    width: 130px;
    height: auto;
    top: 342px;
    left: 830px;
    opacity: 70%;
    z-index: 2;
}

.pic4 {
    position: fixed;
    width: 665px;
    height: auto;
    top: 72px;
    left: 372px;
    opacity: 70%;
    z-index: -1;
}

.pic5 {
    position: fixed;
    width: 260px;
    height: auto;
    top: 496px;
    left: 267px;
    opacity: 72%;
}

.pic6 {
    position: fixed;
    width: 207px;
    height: auto;
    top: 387px;
    left: 41px;
    opacity: 90%;
}

.pic7 {
    position: fixed;
    width: 230px;
    top: 383px;
    left: 1057px;
    z-index: 1;
}

.pic8 {
    position: fixed;
    width: 202px;
    height: auto;
    top: 556px;
    left: 868px;
    opacity: 75%;
}

.pic9 {
    position: fixed;
    width: 316px;
    height: auto;
    top: 15px;
    left: 1084px;
    opacity: 90%;
}

.pic10 {
    position: fixed;
    width: 253px;
    height: auto;
    top: 513px;
    left: 1114px;
}

.pic11 {
    position: fixed;
    width: 320px;
    height: auto;
    top: 380px;
    left: 30px;
    opacity: 40%;
    z-index: -1;
}


@font-face {
    font-family: babel_sans;
    src: url("./fonts/BabelSans.woff2");
}

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

@media (max-width: 768px) {
    
    a {
        text-decoration: none;
        color: black;
    }

    .blog {
        position: absolute;
        background-color: #fff8dc;
        top: 150px;
        text-align: center;
        left: 180px;
        z-index: 2;
        font-size: 50px;
        opacity: 60%;
        font-family: 'RawNotice';
    }

    .subscribe {
        position: absolute;
        letter-spacing: 15px;
        top: 68%;
        left: 6%;
        font-size: 20px;
        font-family: 'babel_sans';
        font-style: italic;
        background-color: crimson;
    }
    .blog-linx {
        position: fixed;
        top: 492px;
        left: 396px;
        width: 396px;
        height: 84px;
        background-color: powderblue;
        opacity: 100%;
        z-index: 2;
        font-family: 'RawNotice';
    }

    .by {
        position: fixed;
        top: 336px;
        left: 648px;
        z-index: 2;
        letter-spacing: 15px;
        background-color: yellow;
    } 


    .link {
        margin: 10px;
    }

    .subscribe {
        position: fixed;
        letter-spacing: 15px;
        top: 840px;
        left: 72px;
        font-size: 20px;
        font-family: 'babel_sans';
        font-style: italic;
        background-color: crimson;
    }


    .blog-linx {
        position: fixed;
        top: 292px;
        left: 34px;
        width: 286px;
        height: 54px;
        background-color: powderblue;
        opacity: 100%;
        z-index: 2;
        font-family: 'RawNotice';
    }

    .by {
        position: fixed;
        top: 254px;
        left: 236px;
        z-index: 2;
        letter-spacing: 5px;
        background-color: yellow;
        font-size: 12px;
        width: 110px;
    }


    .link {
        margin: 10px;
    }

    .subscribe {
        position: fixed;
        letter-spacing: 14px;
        top: 623px;
        left: 62px;
        font-size: 17px;
        font-family: 'babel_sans';
        font-style: italic;
        background-color: crimson;
        z-index: 1;
    }

    .subscribe:hover {
        color: yellow;
    }

    .pic1 {
        position: fixed;
        width: 139px;
        top: 25px;
        left: 15px;
        opacity: 100%;
    }

    .pic2 {
        position: fixed;
        width: 130px;
        height: auto;
        top: 80px;
        left: 84px;
        z-index: 1;
    }

    .pic3 {
        position: fixed;
        width: 80px;
        height: auto;
        top: 390px;
        left: 270px;
        opacity: 70%;
        /* height: auto; */
        /* z-index: 0; */
    }

    .pic4 {
        position: fixed;
        width: 245px;
        height: auto;
        top: 77px;
        left: 112px;
        opacity: 70%;
        z-index: -1;
        height: 540px;
    }

    .pic5 {
        position: fixed;
        width: 70px;
        height: auto;
        top: 511px;
        left: 261px;
        opacity: 0%;
    }

    .pic6 {
        position: fixed;
        width: 196px;
        height: 100px;
        top: 352px;
        left: 50px;
        opacity: 0%;
    }

    .pic7 {
        position: fixed;
        width: 140px;
        /* height: auto; */
        top: 366px;
        left: 100px;
        z-index: 1;
        /* height: auto; */
    }

    .pic8 {
        position: fixed;
        width: 212px;
        height: auto;
        top: 601px;
        left: 100px;
        opacity: 0%;
    }

    .pic9 {
        position: fixed;
        width: 96px;
        height: auto;
        top: 18px;
        left: 268px;
        opacity: 90%;
    }

    .pic10 {
        position: fixed;
        width: 133px;
        height: auto;
        top: 508px;
        left: 220px;
        opacity: 80%;
    }

    .pic11 {
        position: fixed;
        width: 280px;
        height: auto;
        top: 238px;
        left: 16px;
        opacity: 40%;
        z-index: -1;
        height: 350px;
    }
  
}