body, html{
    font-family: 'Cherry Bomb One';
    background-image: url(https://i.pinimg.com/1200x/b9/2f/d8/b92fd880f5315a1eaf14d0d83bbb1bbe.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    
}

@font-face{
    
    font-family: hondurhas;
    src: url(Hondurhas.ttf);
    
}

@font-face{
        
    font-family: CherryBomb;
    src: url(CherryBombOne-Regular.ttf)
        
    }

.Header{
    width: auto;
    height: 200px;
    padding: 10px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(https://i.pinimg.com/736x/dd/04/f9/dd04f9a6502b46252070ddea64915297.jpg);
    background-size: contain;
    position: relative;
    
}

#AboutMe{
    font-family: hondurhas;
    Color: antiquewhite;
    font-size: 80px;
    text-shadow: -2px 0 #7b8344, 0 2px #7b8344, 2px 0 #7b8344, 0 -2px #7b8344;
    text-align: center;
    position: relative;
    margin: 0;
    z-index: 1;
}

.Navg {
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    height: fit-content;
    width: fit-content;
    justify-content: center;
    display: flex;
    position: relative;
    z-index: 3;
}

li a {
    display: block;
    color: white;
    font-family: cherrybomb;
    font-size: 20px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 200px;
    height: 40px;
    border: 3px outset white;
    border-radius: 50px;
    margin: 5px;
}

.HC {
    text-shadow: -1px 0 deeppink, 0 1px deeppink, 1px 0 deeppink, 0 -1px deeppink;
    background-image: linear-gradient(pink, #ff75a8, pink);
}
.HC:hover {
    background-image: linear-gradient(#ffd5dc, #ffa6c7, #ffd5dc);
}

.AMC {
    text-shadow: -1px 0 #ff8000, 0 1px #ff8000, 1px 0 #ff8000, 0 -1px #ff8000;
    background-image: linear-gradient(#ffda53, #ffb453, #ffda53);
}
.AMC:hover {
    background-image: linear-gradient(#ffe891, #ffce63, #ffe891);
}

.GC {
    text-shadow: -1px 0 green, 0 1px green, 1px 0 green, 0 -1px green;
    background-image: linear-gradient(#d3e74b, #9dcf3a, #d3e74b);
}
.GC:hover {
    background-image: linear-gradient(#e3f37f, #b7eb6a, #e3f37f);
}

.BC {
    text-shadow: -1px 0 purple, 0 1px purple, 1px 0 purple, 0 -1px purple;
    background-image: linear-gradient(#d28cd8, #a16bd1, #d28cd8);
}
.BC:hover {
    background-image: linear-gradient(#e6afea, #bb7fdb, #e6afea);
}

.Piano{
    position: relative;
    z-index: 0;
    width: fit-content;
    left: 625px;
    top: -830px;
    transform: rotate(180deg);
    overflow: hidden;
}

.Main {
    font-family: cherrybomb;
    height: fit-content;
    width: 1200px;
    margin: auto;
    padding: 10px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    z-index: 2;
}

.Header2{
    color: white;
    text-shadow: -2px 0 gray, 0 2px gray, 2px 0 gray, 0 -2px gray;
    font-size: 80px;
    position: relative;
    margin: auto;
    z-index:1;
}

.Section1{
    color: white;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    font-family: cherrybomb;
    padding: 10px;
    margin: auto;
    width: 350px;
    border: #dddddd ridge 7px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    bottom: 250px;
    background-image: url(https://i.pinimg.com/736x/6b/dc/e4/6bdce457ca71bb425772a1d2ad2c57dd.jpg);
    background-size: cover;
    z-index: 2;
    
}

.Mypic{
    position: relative;
    left: 100px;
    transform: rotate(-10deg);
    width: fit-content;
    z-index: 3;
    
    
}

.Section2{
    width: 1264px;
    position: relative;
    margin: auto;
    margin-top: -700px;
    overflow-x: hidden;
    height: fit-content;
}

.BD{
    border: 20px solid;
    border-radius: 15px;
    border-image: url(Laceborder.png) 45 round;
    width: 150px;
    height: 150px;
    padding: 15px;
    position: relative;
    left: 900px;
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); 
    color: white;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    text-align: center;
    background-image: url(https://i.pinimg.com/736x/2e/4f/fa/2e4ffa7b60594e759079d8a705b1f28b.jpg);
    background-size: cover;
    font-size: 20px;
    animation: BD 1s linear infinite;
    
   
}
@keyframes BD {
  0%   {top:0;}
  25%  {top:5px;}
  50%  {top:10px;}
  75%  {top:5px;}
  100% {top:0;}
}
.MOVE2{
    position: relative;
    top: -900px;
}

.Header3{
    font-family: cherrybomb;
    color: #99d24b;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
    font-size: 80px;
    position: relative;
    margin: auto;
    padding: 10px;
    
}
.Likes{
    color: white;
    font-family: cherrybomb;
    margin: 0 0 0 50px;
    background-image: url(https://i.pinimg.com/736x/bb/45/23/bb45235c3b2fd46e4a2d92fbf190523d.jpg);
    width: fit-content;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    border:  ridge 7px;
    border-radius: 15px;
    
   
}
.Likes li a{
    border: none;
    color: white;
    width: fit-content;
    margin: 10px;
}

.MedicineMan{
    position: relative;
    z-index: 0;
    margin: 0;
    margin-bottom: -180px;
    left: 80px;
}

.Weather{
    background-image: url(https://i.pinimg.com/originals/e4/93/51/e493516fcb7c8181bc5624d9f8962f5b.gif);
    width: 160px;
    height: 80px;
    background-size: cover;
    font-family: cherrybomb;
    color: white;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    padding: 10px;
    position: relative;
    text-align: center;
    border: 7px ridge;
    border-radius: 15px;
    left: 500px;
    top: -350px;
    margin: 0;
    
    
}

.box1{
    position: relative;
    width: fit-content;
    left: 360px;
    top: -420px;
    margin-bottom: -400px;
}
.text1{
    font-family: cherrybomb;
    color: white;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    position: relative;
    margin: 0;
    text-align: center;
    top: 150px;
    font-size: 20px;
    z-index: 1;
}
.box2{
    position: relative;
    width: fit-content;
    font-family: cherrybomb;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    color: white;
    text-align: center;
    font-size: 20px;
    left: 600px;
    top: -350px;
    margin-bottom: -300px;
    z-index: 1;
}
.text2{
    position: relative;
    top: 150px;
}
.box3{
    position: relative;
    width: fit-content;
    font-family: cherrybomb;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    color: white;
    text-align: center;
    font-size: 20px;
    left: 700px;
    top: -800px;
    margin-bottom: -300px;
    
}
.text3{
    position: relative;
    top: 150px;
    margin: auto;
    width: 200px;
    z-index: 1;
}

.Unicorn{
    position: relative;
    top: -200px;
    right: 300px;
    
}
.cereal{
    position: relative;
    left: 750px;
    top: -250px;
    transform: rotate(-20deg);
    z-index: 0;
}

.Drink{
    position: relative;
    animation-iteration-count: infinite;
    animation: drink 1s linear infinite;
    transform-origin: 16%;
    z-index: 0;
  
}
@keyframes drink {
  0%   {top:0;}
  25%  {top:5px;}
  50%  {top:10px;}
  75%  {top:5px;}
  100% {top:0;}
}

.JCL{
    position: relative;
    left: 700px;
    top: -1200px;
}

.kiss{
    position: relative;
    top: -700px;
    
}
.box4{
    position: relative;
    top: -1600px;
    left: 500px;
    border: ridge 7px;
    border-radius: 15px;
    background-image: url(https://i.pinimg.com/1200x/8a/d2/4c/8ad24c4a30df1b810bb62180d9216975.jpg);
    background-size: cover;
    height: 150px;
    width: 200px;
    color: white;
    padding: 10px;
    text-align: center;
    font-family: cherrybomb;
    line-height: 100px;
    font-size: 20px;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    
}

.Shoes1{
    position: relative;
    top: -350px;
    right: 400px;
    transform: rotate(-90deg);
}
.Bangles{
    position: relative;
    left: 850px;
    top: -850px;
    z-index: 0;
}

.Mikako{
    position: relative;
    z-index: 0;
    margin: 0;
    margin-bottom: -140px;
    left: 900px;
}

.Section3{
    width: 1200px;
    position: relative;
    margin: auto;
    margin-top: -900px;
}
.Header4{
    font-family: cherrybomb;
    color: #da3a3a;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
    font-size: 80px;
    position: relative;
    margin: auto;
    text-align: right;
    padding: 10px;
}
.Dislikes{
    color: white;
    font-family: cherrybomb;
    margin: 0 50px 0 0;
    background-image: url(https://i.pinimg.com/736x/38/6e/8c/386e8c545c70ff982e4145909e58af5f.jpg);
    width: fit-content;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    border:  ridge 7px;
    border-radius: 15px;
    position: relative;
    float:right;
    
}
.Dislikes li a{
    border: none;
    color: white;
    margin: 10px;
    width: fit-content
}