Life Is Strange Spacehey Layout (+To all of you - Syd Matters)

<style>
.profile {

background: #ab9b90; opacity: 0.8;

 }
</style>

<style>
.general-about {

 background:#94857b;

  border-radius: 15px;
</style>

<style>
.friends:not(#comments) {

  grid-area: friends;

  background:#8f847c;  

  border-radius: 15px

}

</style>

<style>
.profile .friends td {

  background: #94857b;

  border-radius: 15px

} 

</style>

<style>
.profile .table-section .details-table td {
  background-color: #8f847c;
  color: #blue;
}

.profile .blurbs .heading, .profile .friends .heading {
  background-color:#7d7169;
  color: #bbb;
</style>

<style>
.profile-pic {

border-radius: 500px;

overflow: hidden;

}


.profile .friends .person img {

border-radius: 500px;

}
</style>

<style>
.profile .contact, .profile .table-section, .profile .url-info {
  border: 4px solid #8f847c;
</style>

<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #8f847c;
  color: #bbb;
}
</style>

<style>
body {
     background-image: url("https://images4.alphacoders.com/685/685747.jpg") !important;
     background-color: black !important;
     background-attachment: fixed !important;
     margin: 0;
     padding: 0;
}
</style>

<style>
main a {
  color: var(--black);
}
</style>

<style>
p {
color: #403b37;
}
</style>

<style>
@import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap");

.w-40 h1{
font-family: Gochi Hand;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: ;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
p{
  font-family: 'Gochi Hand', cursive;
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-family: 'Gochi Hand', cursive;
  font-size: 120%;  
</style>

<style>
:root {
    --logo-blue: transparent;
</style>

<style>
:root {
   --lighter-blue: url("https://i.pinimg.com/564x/d6/a8/9a/d6a89aee36a02bd2a33577ab084cdde4.jpg"); 
</style>

<style>
main:before {
	width: 100%;
	height: 130px;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/564x/9d/e0/84/9de0846eb7b19356cc4b58c6b4d27b96.jpg');
	background-position: center center;
</style>

<style>
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 130px;
	}
}
</style>

<style>

 .blurbs .section h4{display: none !important;}

</style>

<style>

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

</style>

<img src="https://i.pinimg.com/564x/d6/a8/9a/d6a89aee36a02bd2a33577ab084cdde4.jpg"/>

<img src="https://i.pinimg.com/564x/08/31/04/08310477513b325942fd418e0344359b.jpg"/>


<style>

  .blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "❝Everything is a picture waiting to be taken...❞ "; font-size:.8rem; font-weight:bold; color:insert color; }
</style>

<style>
.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "Comments!!"; font-size:.8rem; font-weight:bold; }
</style>

<style>
img.logo{
content: url("https://gifcity.carrd.co/assets/images/gallery06/9e454399.gif?v=26dffab5");
width: 50px !important;
height: 50px !important;
</style>

<style>
.online { visibility: hidden; } .online img { content: url("https://s4.ezgif.com/tmp/ezgif-4-3af269179e.gif"); animation-name: none; visibility: visible; height: 40px; width: 40px; 
</style>

<style>
li.active .icon { content:url('https://gifcity.carrd.co/assets/images/gallery92/a3c39389.png?v=26dffab5'); width: 20PX;height: 20px;}
</style>

<style>
.profile .friends .person img:not(.icon):hover {
    transform: scale(1.2);
    transition: 0.5s ease;
}
.profile .friends .person img:not(.icon) {
    transition: 0.5s ease
}
</style>

<style>
body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://s6.ezgif.com/tmp/ezgif-6-b1665aeafb.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>* {cursor: url(http://www.rw-designer.com/cursor-view/110065.png), url(http://www.rw-designer.com/cursor-view/110065.png), auto !important;}</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/AoHFCLxTkE4?si=EuMz_QDerHQwZrky//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>