can opener's notebook: fish whisperer layout

Tags: my little pony, sea, cute, ocean, album, water

Description:

so cool!! comment if using :D Includes auto-playing beach audio, if you want to remove it select from the "iframe width" thing to the end of the code!! Listen to can opener's notebook: fish whisperer by vylet pony

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by whimsicalkel (https://layouts.spacehey.com/layout?id=85819) -->

<style>  


main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://images.squarespace-cdn.com/content/v1/62ba62a13be10d159b4b4530/20257db8-3b26-4120-93c7-d21f8fe2a937/56AD7815-1CD2-4E38-BCFF-119E5D18A246-min.jpg?format=1000w');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}

:root {
    --light-gray: #6AAACE;
    --gray: #49718f;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #6F76F8;
    --darker-blue: #1E40AF;
    --lighter-blue: #DB97A3;
    --even-lighter-blue: #454F94;
    --lightest-blue: #6AAACE;
    --red: #2E89D0;
    --dark-orange: #2E89D0;
    --light-orange: #D15C6E;
    --even-lighter-orange: #E3AD6F;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}

main {
    background: #B6B7ED;
    color: #EFFFF3;
    padding: 6px 0px;
    font-size: 100%;
}

.count {
    color: #2F386F;
}

.profile .friends .person p {
    color: #6C5078;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}
*{
  border-radius: 9px;
}

body, .bodyContent {
background: url(https://i.pinimg.com/originals/3e/28/3b/3e283b798e49d7cff9b0fda28419bd45.gif);
background-repeat: no-repeat;
background-size: cover;
background-attachment:fixed;
}
footer {
    text-align: center;
    font-size: 100%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: #90D5B2;
    background-color: #90D5B2;
}
a {
    color: #1E40AF;
    color: #5E55E1;
    text-decoration: none;
}
.online{content:url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExenpvaWRwYWg2Ym5ycGl0NHRhdjV3aTJ2ejVna2l1MDl0aXk1aGJ0MyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/kPihZzZ5XS9xmh8qG6/source.gif);
    width: 80px;
    height: 20px;
}
body {

text-align: center;

}

body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://i.pinimg.com/originals/43/22/26/432226f016e895c250f0762cb9013d9d.gif);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 2s linear 2s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>
<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://media3.giphy.com/media/rQsBTptbwNcUmcb1LV/giphy.gif?cid=6c09b952lyb47ardcw2fvs0y9d9ofjhf6ly7l2giqnnpg295&ep=v1_stickers_related&rid=giphy.gif&ct=s') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>
<style>

.logo {

content:url("https://cdn.discordapp.com/attachments/998417152619053066/1172401725781594153/spacehey_logo_replacement_for_can_openers_notebook_layout.png?ex=65602f31&is=654dba31&hm=5c1a409acc0136318a56d152f75b86fb4856f857396d0cd08b0c46441e1d411c&");

}
main {
    background: #497dc694;
    color: #CD6580;
    padding: 6px 9px;
    font-size: 100%;
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/dpndP-cBE60//?&;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>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.