body {
    overflow-x: hidden;
}


/*  p::first-letter {
    font-size: 50px;
} */ 

p.intro::first-letter {
    font-size: 50px;
}
p::first-line {
    color: rgb(25, 0, 255);
}
.blackk::first-line {
    color:black
}

/* Changes colours from default when text is selected/highlighted */
p::selection {
    color: rgb(6, 187, 51);
    background-color: rgb(0, 0, 0);
}

h5::before {
   content: "👌"
}
h4::after {
    content: "👀";
}

.div1::before {
    content: "😎";
}

.div1::after {
    content: "🚀";
}
.begin::before {
    content: "🤣 text to show bkgd of ::before";
    background-color: rgb(255, 38, 0);
    color: rgb(255, 255, 255);
}
#list1 li::before {
    content: "🐪";
}

#list2 li::after {
    content: "💩";
}

.colour-start::before {
    display: block;
    content: "";
    background-color: aqua;
    width: 20px;
    height: 20px;
}
.colour-end::after {
    display: block;
    content: "";
    background: linear-gradient(to right, rgba(221, 33, 33, 0.6), rgba(0, 170, 255, 0.6));
    width: 400px;
    height: 20px;
}
/* This is for the list bullets */
li::marker {
    color: aqua;
}
.heroine::after {
    display: block;
    content: "";
    width: 400px;
    height: 50px;
    background: linear-gradient(to right, rgba(0, 170, 255, 0.6), rgba(0, 255, 0, 0.6));
}
.character::after {
    content: " == ✔";
    width: 50px;
    height: 50px;
    color: blue;
}
.character2::after {
    content: " >>>  Text as well? With a coloured bkgd. And larger font size";
    width: 50px;
    height: 50px;
    color: black;
    background: aqua;
    font-size: 25px;
}
.rotate::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50px;
    width: 130%;
    height: 96%;
    background: #68A4C4;
    opacity: 0.3;
    z-index: 0;
    border-radius: 0% 0% 50% 50%;
    transform: translateX(-50%) translateY(18px) rotate(10deg);
}
.rotate::before {
    content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 95%;
  background: rgba(225, 0, 255, .5);
  opacity: .3;
  /* background: linear-gradient(to right, rgba(30, 67, 86, 0.2), rgba(30, 67, 86, 0.6)), url("../img/hero75.jpg") center top no-repeat; */
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) rotate(-10deg);
}

.circle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;  /* 25% */
    height: 500px;  /* 50% */
    background: #68A4C4;
    opacity: 0.3;
    z-index: -1;
    border-radius: 50% 50% 50% 50%;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.red-vest{
    position: relative;
    left:54.5%;
    top: -3px;
    width: 30%;
    height: 30%;
    transform: translateX(-50%) translateY(150px) rotate(0deg);
}
/* @media screen and (max-width: 1000) {
    img {
      display: none;
    }
  } */

  @media screen and (max-width: 700px) {
    .circle {
        display: none;
    }
    img {
        display: none;
    }
}