Side Order Layout... <3

Looks better in medium-sized profiles!!!

Hello!!!!!!!!! Since there wasn't any Side Order Layout, I decided to make one... It was all "hand-made" since I didn't use other layout to get some work done. Please comment if using since it was a really hard work for me. Theres a custom font called "Lexend Exa", i couldnt put it on here.

<style>

@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&display=swap');

p{

  font-family: 'Lexend Exa', cursive;

  font-size: 120%;

  color: #352A2A

}

h1,h2,h3,h4,h5{

  font-family: 'Lexend Exa', cursive;

  font-size: 130%;  

}

h1 {

  color: #352A2A;

}

h4 {

  color: #352A2A;

}

</style>

<div class="marina"></div>

<div class="pearl"></div>

<div class="marie"></div>

<div class="callie"></div>

<style>

  .marina {

        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/1/1a/SO_Sprite_Pixel_Marina.gif/120px-SO_Sprite_Pixel_Marina.gif) no-repeat;

        background-size: 60%!important;

        position: fixed;

        right: -125px;

        bottom: 75px;

        height: 166px;

        width: 300px;

        z-index: 1000;

        opacity: 100%;

    }

    .pearl {

        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/8/8f/SO_Sprite_Pixel_Pearl.gif/120px-SO_Sprite_Pixel_Pearl.gif) no-repeat;

        background-size: 60%!important;

        position: fixed;

        left: 0px;

        bottom: 75px;

        height: 185px;

        width: 300px;

        z-index: 1000;

        opacity: 100%;

    }

  .marie {

        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/6/6b/SO_Sprite_Pixel_Marie.gif/120px-SO_Sprite_Pixel_Marie.gif) no-repeat;

        background-size: 60%!important;

        position: fixed;

        right: -125px;

        top: 75px;

        height: 166px;

        width: 300px;

        z-index: 1000;

        opacity: 100%;

    }

    .callie {

        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/thumb/7/7e/SO_Sprite_Pixel_Callie.gif/120px-SO_Sprite_Pixel_Callie.gif) no-repeat;

        background-size: 60%!important;

        position: fixed;

        left: 0px;

        top: 75px;

        height: 185px;

        width: 300px;

        z-index: 1000;

        opacity: 100%;

    }

:root {

        --logo-blue: #6C5050;

        --darker-blue: #352a2a;

        --lighter-blue: #816161;

        --even-lighter-blue: #BC8F8F;

        --lightest-blue: #D8ACAC;

        --dark-orange: #352a2a;

        --light-orange: #816161;

        --even-lighter-orange: #BC8F8F;

        --green: beige;

    }

  body

        {background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/9/92/SO_Palette_Reward_2_Portrait.png); no-repeat fixed; background-size: cover; background-position: center;

    }

main {

  background-color: #FFFFFF57

    }

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

    content: " ※ ";

    color: white;

}

main:before {

    width: auto;

    margin-bottom: 5px;

    border: 1px solid black;

    height:230px;

    display: block;

    content: "";

    background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/6/6c/S3_Banner_864.png?20240224200405);

    background-position: center center;

    background-size: cover;

}

footer {

    border-radius: 10px;

    background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/6/6c/S3_Banner_864.png?20240224200405);

    color: white;

background-size: cover;

height: 100%;

background-attachment: fixed;

background-attachment: scroll;

background-position: center;

}

.heading {

    border-radius: 8px 8px 0px 0px;

}

.inner{

background: url(https://cdn.wikimg.net/en/splatoonwiki/images/6/6c/S3_Banner_864.png);

    border: 2px;

    border-radius: 0px 0px 10px 10px;

    box-shadow: 3px 3px 5px #00000082;

    background-position: cover;

}

.details-table td:first-child {

    background: #BC8F8F75;

    color: white;

    font-weight: bold;

    width: 33%;

    border: 1px solid white;

}

.details-table td {

    background: #D8ACAC75;

    vertical-align: top;

    border: 1px solid white;

}

.comments-table td:first-child, .music-table td:first-child {

    background: #BC8F8F75;

    text-align: center;

    font-weight: bold;

    width: 38%;

}

.comments-table td, .music-table td {

    background: #D8ACAC75;

    vertical-align: top;

}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

    width: 100%;

    border: none;

    margin: 10px 0;

}

nav .top .left .logo {

    width: 165px;

    height: 42px;

    content: url(https://i.ibb.co/S5zgBpF/IMG-8106-removebg-preview.png);

.profile .profile-info{

color: white; 

background-image: url(https://cdn.wikimg.net/en/splatoonwiki/images/6/6c/S3_Banner_864.png?20240224200405);

background-size: cover;

background-position: center;

}

.friends img {

        -webkit-mask-image: url(https://static.wikia.nocookie.net/p__/images/b/bd/S3OctoIcon.png/revision/latest/scale-to-width-down/250?cb=20230601220320&path-prefix=protagonist);

        -webkit-mask-size: 100%;

        -webkit-mask-repeat: no-repeat;

        -webkit-mask-position: center;

    }

</style>