Mahoutsukai Precure Layout

It looks kinda bad cuz i didn't spent too much time on it, but i hope someone out there will like it!!

<style>

@import url('https://fonts.cdnfonts.com/css/adelia');

h1,h2,h3,h4,h5,blurbs{ 

    font-family: 'ADELIA', sans-serif;  

    font-size: 100%;

    color: #fff; 

      text-shadow:

      -1px -1px 0 rgb(255, 105, 195),

       1px -1px 0 rgb(255, 105, 195),

      -2px 2px 0 rgb(255, 105, 195),

       2px 2px 0 rgb(255, 105, 195);  

}

@import url('https://fonts.cdnfonts.com/css/cute-apricot');

p{

   font-family: 'Cute Apricot', sans-serif;

   font-size: 140%

   color: rgb(255, 102, 179);

}

   body  {

      background: 

      url(https://i.pinimg.com/736x/6f/b9/8f/6fb98f2334a6e9fdfb4f13e43ce71223.jpg);

        background-size: 10%

}

/* change all headings on page to different colors. */

  .profile .contact .heading,

  .profile .table-section .heading{

   background-color: #8a55c2;

}

/* banner */

main:before {

width: auto;

height: 300px;

display: block;

content: "";

background-image: url('https://media.tenor.com/Za4JGX3rHhoAAAAM/cure-miracle-cure-magical.gif');

background-position: center center;

background-size: cover;

        margin-bottom: 25px;

        border: 0px;

   box-shadow: 0px 0px 5px 1px #8a55c2;

  background-position: center center;

    background-size: cover;

}

:root {

    --logo-blue: #8a55c2;

    --darker-blue: ;

    --lighter-blue: #8a55c2;

    --even-lighter-blue: #8a55c2;

    --lightest-blue: #fff;

    --dark-orange: #fff;

    --light-orange: #8a55c2;

    --even-lighter-orange: #8a55c2;

    --green: #8a55c2;

}

footer .copyright::before{

   margin-right:20px;

   content:"love and peace!!";

   text-decoration:none;

}

.profile .friends .heading{

  margin-top:20px;

  text-align:center;

  text-transform:lowercase;

  border-right:1px solid white;

  background:#8a55c2;

  padding:10px;

}

.profile .friends::before{

  content:url('https://wilardo.crd.co/assets/images/gallery02/036de405.gif?v=95951d9a');

  position:absolute;

  margin-left:10px;

  margin-bottom:10px;

  margin-top:1px;

}

.profile .table-section .heading{

letter-spacing:3px;

text-align:center;

background:url('https://i.pinimg.com/736x/e0/eb/6f/e0eb6f7ed0c6dfa0a0174cb632f5a774.jpg') repeat center center;

text-transform:lowercase;

padding:10px;

}

.details-table td:nth-child(odd) p::before{

  content:url('https://64.media.tumblr.com/cfb71a1c0a198404cc4d7d0584d8c1a6/cebdf9e2928c000d-34/s75x75_c1/dcbb3a59d72f079b190eacaf72b1bd745edac9cf.pn');

  margin-right:5px;

}

.details-table td:nth-child(even) p::before{

  content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/stara17.gif');

  margin-right:5px;

}

.online img {

  content:url('https://files.catbox.moe/ixrasf.png');

  margin-bottom:-3px;

  margin-right:-5px;

  height:20px;

}

.profile h1::before{

  content:url('https://64.media.tumblr.com/c269588576135f4891387a2fe1f38e85/cebdf9e2928c000d-84/s75x75_c1/fa788b67ff2deefc6c953a7689bbc5c23f1f1ac8.png');

  width:20px;

}

.profile h1 {

  position:relative;

  text-transform:lowercase;

  letter-spacing:2px;

  margin-bottom:10px;

  text-align:left;

  font-size:30px;

  width:300px;

}

.profile .contact {

  z-index:99999999;

  box-shadow: 2px 2px 0px #8a55c2;

  padding:5px;

  background:white;

  border:1px #8a55c2;

}

.general-about .details{

  border:1px #8a55c2;

    overflow:auto;

    height:160px;

    width:200px;

  background:#8a55c2;

    padding:10px;

  text-align:center;

}

.general-about {

  border-top:1px #8a55c2;

  border-left:1px #8a55c2;

  padding:10px;

  background:#8a55c2;

     border-right:1px solid white;

     border-bottom:1px solid white;

        box-shadow:2px 2px 0px #8a55c2;

}

.top{

  border-radius: 25px 25px 0 0 !important;

    }

    main{

        border-radius: 0 0 25px 25px !important;

        border: 3px dotted #8a55c2;

}

.contact .inner a img {

  font-size: 0;

}

.contact .inner a img:before {

  font-size: 1em;

    display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

  /* add to friends */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

  /* add to favorite */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

  /* send a message */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

  /* forward to friend*/

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

  /* instant message */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9af")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

  /* block user */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

  /* add 2 group  */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

  /* report */

    content: url("https://wilardo.crd.co/assets/images/gallery20/44eb4032.gif?v=95951d9a")

}

.online {

color: #F795B4;

text-shadow: 0px 0px 5px pink;

    font-size: 15px;

}

}

.blog-preview h4{

border:1px solid white;

background:url('https://i.pinimg.com/736x/af/9d/86/af9d86c438fbef0d9a761d99e97072a9.jpg') repeat center center;

padding:10px;

}

.blog-preview p{

border:1px solid white;

background:url('https://i.pinimg.com/736x/fb/4a/47/fb4a4734b24d3f7de6536c563281ea96.jpg') repeat center center;

padding:10px;

}

.blog-preview{

text-align:center;

padding-right:10px;

padding-left:10px;

box-shadow:3px 3px 0px #8a55c2;

background:#8a55c2;

border-left:1px #8a55c2;

border-top:1px #8a55c2;

border-right:1px solid white;

border-bottom:1px solid white;

}

.profile .blurbs .section:last-child{

margin-bottom:0px;

}

.profile .blurbs .section{

margin-bottom:10px;

}

.profile .blurbs .section h4{

margin-bottom:10px;

text-align:center;

padding:10px;

text-transform:lowercase;

letter-spacing:3px;

font-size:15px;

background:url('https://i.pinimg.com/736x/e0/eb/6f/e0eb6f7ed0c6dfa0a0174cb632f5a774.jpg') repeat center center;

}

.profile .blurbs .inner{

background:white;

border-right:1px #8a55c2;

border-top:none;

}

.profile .contact .inner a:hover {

color:pink;

text-shadow:0px 0px 5px #8a55c2;

}

.profile .contact .inner a {

color:#8a55c2;

}

.profile .contact .heading h4 {

text-align:center;

letter-spacing:3px;

}

.general-about .profile-pic img{

max-width:100%;

border:1px #8a55c2;

max-height:100%;

}

.general-about {

border-top:1px #8a55c2;

border-left:1px #8a55c2;

padding:10px;

background:#8a55c2;

border-right:1px solid white;

border-bottom:1px solid white;

box-shadow:2px 2px 0px #8a55c2;

}

.general-about .details{

overflow:auto;

height:160px;

width:270px;

background:white;

padding:10px;

text-align:center;

}

.details-table td:first-child{

text-transform:lowercase;

color: white;

}

.profile .mood{

text-transform:lowercase;

background:#8a55c2;

color:white;

box-shadow: 2px 2px 0px #8a55c2;

border:1px #8a55c2;

border-bottom:1px solid white;

border-right:1px solid white;

padding:10px;

width: 301px;

}

.profile .mood a:hover{

color:white;

text-shadow:0px 0px 5px white;

}

footer .links{

text-align:right;

}

footer{

position:absolute;

padding:10px;

left:0px;

font-size:15px;

width:100%;

text-align:right;

margin-top:0px;

background:#8a55c2;

color:white;

z-index:-1;

}

@media (max-width: 600px) {

.image{display:none;}

}

html:after {

  animation: grain 8s steps(10) infinite;

  background-image: url(https://64.media.tumblr.com/109cd526d53a8c3be202d48be7829012/382afd2d5a443171-0b/s400x600/5482a6f8b0d508ee9e2fa10ec6c90435ddbee603.gifv) ;

  content: "";

  height:1000%;

  left: 0%;

  opacity: 100%;

  position: fixed;

  top: -110%;

  width: 100%;

  pointer-events:none;

}

@keyframes grain 

  70% { transform:translate(0%, 15%)

}

</style>

<div style="float1:  ; max-height: 10px; position: fixed; right: 10px; bottom: 150px; z-index: 10;"><img 

src="https://64.media.tumblr.com/adfce82a4256cd9c11f4da5197700c5b/3292e7a2fa58dad4-77/s250x400/b8a8e259d5003ed34231681f2bb8fc958209e7f7.gifv" 

width="" height="150"/></div>

<div style="float2:  ; max-height: 10px; position: fixed; left: 00px; bottom: 400px; z-index: 10;"><img 

src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d6abc390-8509-4fa4-9867-398dd480463c/ddj4gdt-bc1437ad-55e4-44ce-8792-c75400ea7bae.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Q2YWJjMzkwLTg1MDktNGZhNC05ODY3LTM5OGRkNDgwNDYzY1wvZGRqNGdkdC1iYzE0MzdhZC01NWU0LTQ0Y2UtODc5Mi1jNzU0MDBlYTdiYWUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.fYFVYpSa1Fd6ssexstBHeeTaHYtyiSJWmGUB2E-E390" 

width="" height="500"/></div>

<div style="float3:  ; max-height: 10px; position: fixed; right: 40px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/fe5ab4b3f054469de63c74535a7973e3/5dca1dadafb5ca1c-a0/s250x400/7a272b046cf6ec7f23fb705a07619d49620304bb.webp" 

width="" height=300"/></div>

<div style="float4:  ; max-height: 10px; position: fixed; left: 30px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/fe5ab4b3f054469de63c74535a7973e3/5dca1dadafb5ca1c-a0/s250x400/7a272b046cf6ec7f23fb705a07619d49620304bb.webp" 

width="" height=500"/></div>

<div style="float5:  ; max-height: 10px; position: fixed; left: 120px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/163a2f102c4fb840ccdca0fd2bdd0f63/2baa9088791e4d45-25/s250x400/6c81a591d7d5fb1904fb741f3431a17f7a26a180.gifv" 

width="" height=300"/></div>

<div style="float6:  ; max-height: 10px; position: fixed; left: 50px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>

<div style="float7:  ; max-height: 10px; position: fixed; left: 350px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>

<div style="float8:  ; max-height: 10px; position: fixed; left: 650px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>

<div style="float9:  ; max-height: 10px; position: fixed; right: 350px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>

<div style="float10:  ; max-height: 10px; position: fixed; right: 50px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>

<div style="float10:  ; max-height: 10px; position: fixed; right: 650px; top: 0px; z-index: 10;"><img 

src="https://64.media.tumblr.com/5339c7cde285b7b00b50f1c53984681c/35a0975b4285d5c9-fe/s250x400/4eaba16dc1c40a4ce3d2ca33949234bd67a313bc.gifv"

width="" height=30"/></div>