Gabriel Navarrete muñoz

About me:

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

<style>

/* == font import == */

@font-face { font-family: 'perry goth'; 

src: url(https://external-media.spacehey.net/media/sJehavmRnSfPA6Vkj18FKkg3KQRRotAr_FgpH_pDSMc8=/https://dl.dropbox.com/s/9a25q7d9s3tsmcf/PERRYGOT.ttf); 

} body{ font-family: 'perry goth'; font-size: 80%; }

/* == background img == */

body{

background: url(https://external-media.spacehey.net/media/slEXT3qYZnWQtFANCUsEC7ROn6de23CUcDPHLwIq4iEk=/https://i.pinimg.com/564x/45/0a/69/450a69d46d92050f65923d3c17ddcd8e.jpg);

}

/* == nav == */

nav .top{

background: url(https://external-media.spacehey.net/media/sV1iBoxynA_1sHqL4fG5-DHf3ChPZBpU8k6pFiRn1i0M=/https://i.pinimg.com/564x/a6/6e/40/a66e406f8ee0f047e81ecafbeb9ba2ae.jpg);

    border: 2px dotted white;

    margin-top: 10px;

}

button, input {

    overflow: visible;

    background: black;

    border: 1px dotted white;

    color: white;

}

nav .links {

    background-color: black;

    padding: 3.5px 16px 5.5px 16px;

    text-align: center;

    border: 2px dotted white;

margin-top: 20px;

}

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

    content: " † ";

    color: white;

}

nav .links a {

    text-decoration: none;

    color: white;

    text-shadow: 0 0 5px white;

    font-size: 0.98em;

    font-size: 80%;

}

nav .links a:hover {

    color: grey;

    text-transform: uppercase;

    font-size: 90%;

    font-style: italic;

}

nav .links .special a {

    color: lightgrey;

}

nav .links li.active a {

    font-weight: bold;

    color: lightgrey;

}

/* == main == */

main {

    margin-top: 20px;

    border: 2px dotted white;

    background: #0000008f;

    color: white;

    padding: 6px 0px;

    font-size: 80%;

}

.container {

    width: 810px;

    max-width: 100%;

    margin: 0 auto 10px;

    text-transform: lowercase;

}

a {

    color: lightgrey;

    text-decoration: auto;

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

    font-style: italic;

}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

    color: grey;

    text-transform: uppercase;

    text-decoration: underline;

    text-shadow: 1px 1px black;

}

/* == right side == */

span {

    text-align: center;

    font-size: 150%;

    text-transform: uppercase;

}

.edit-link {

    font-size: 90%;

    text-align: center;

}

img.pfp-fallback {

    border: 3px dashed white;

    outline: 1px solid white;

    border-radius: 15px;

}

.general-about .details {

    display: block;

    text-align: center;

}

.online {

    color: grey;

    text-transform: uppercase;

    font-weight: bold;

    font-size: 110%;

    font-style: italic;

    text-decoration: line-through 2px wavy slategrey;

}

.profile .mood {

    margin-bottom: 18px;

    margin-top: 10px;

    width: 100%;

    display: inline-block;

    border: 3px dashed white;

    outline: 1px solid white;

    border-radius: 15px;

    background: black;

    padding: 4px;

    text-align: center;

}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

    background: black;

    color: white;

    border-bottom: 3px dashed white;

    text-align: center;

    padding: 2px 7px;

    text-shadow: 2px 2px grey;

}

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

    width: 100%;

    border: 3px dashed white;

    border-radius: 10px;

    outline: 1px solid white;

    margin: 10px 0;

    background: black;

}

.profile .url-info {

    padding: 4px 7px;

    font-size: 0px;

    background: url(https://external-media.spacehey.net/media/snohOeckOrkRvdP1fLVLxPsxXPm_HfEPCY2c4zwPmX04=/https://i.pinimg.com/564x/26/d8/4d/26d84da35168475464123cd893aa349f.jpg);

height: 250px;

}

.details-table td {

    background: black;

    border: 2px dotted;

    vertical-align: top;

    border-radius: 5px;

}

.details-table td:first-child {

    background: black;

    color: white;

    text-align: center;

    vertical-align: middle;

    border: 2px dotted white;

    font-weight: bold;

    width: 33%;

    border-radius: 5px;

}

/* == left side == */

.profile-info {

    border: 3px dashed white;

    outline: 1px solid white;

    border-radius: 15px;

    background: url(https://external-media.spacehey.net/media/s_OA1ktOoEZ3FO9LuW5AN4rSEeqSzXiWyXmpJ1L-Rs0I=/https://i.pinimg.com/564x/81/f2/60/81f26083089d69c6bcf0843989c6c7fb.jpg);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px 5px;

    margin-bottom: 10px;

    font-size: 0;

    height: 100px;

    background-size: 400px;

    background-position-y: 30%;

    background-position-x: center;

}

.blog-preview {

    background: black;

    border: 3px dashed white;

    outline: 1px solid white;

    border-radius: 15px;

    padding-left: 10px;

    padding-right: 10px;

}

.profile .blurbs .heading, .profile .friends .heading {

    background: black;

    color: white;

    padding: 2px 7px;

    text-align: center;

    border-bottom: 3px dashed white;

}

.profile .blurbs {

    margin: 20px 0;

    border: 3px dashed white;

    border-radius: 10px;

    background: black;

}

.profile .blurbs .section h4 {

    margin: 0;

    color: grey;

    text-align: center;

    padding-bottom: 5px;

}

.friends {

    background: black;

    border: 3px dashed white;

    border-radius: 10px;

}

.count {

    color: grey;

    font-size: 100%;

}

.profile .friends .person p {

    color: white;

    font-weight: bold;

    width: 100%;

    overflow-wrap: break-word;

    word-break: break-word;

    font-size: 100%;

    text-align: center;

}

.profile .friends .person p:hover {

    color: grey;

}

div#comments {

    margin-top: 15px;

}

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

    background: black;

    vertical-align: top;

    border: 3px dashed white;

    border-radius: 10px;

}

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

    background: black;

    text-align: center;

    font-weight: bold;

    width: 38%;

    border: 3px dashed white;

    border-radius: 10px;

}

table.comments-table {

    border: 1px black;

}

/* == footer == */

footer {

    text-align: center;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background: transparent;

    color: white;

}

/* == cursor == */

html,body{cursor: url(https://external-media.spacehey.net/media/s9ncCoxaIUVC48D2jpuXhCxXeWBGMsIUHRJKj_XsveNM=/https://cur.cursors-4u.net/others/oth-8/oth702.cur),auto;}

a:hover{cursor: url(https://external-media.spacehey.net/media/s9ncCoxaIUVC48D2jpuXhCxXeWBGMsIUHRJKj_XsveNM=/https://cur.cursors-4u.net/others/oth-8/oth702.cur),auto;}

/* == scrollbar == */

::-webkit-scrollbar {

    width: 12px;

    height: 12px;

BACKGROUND-COLOR: black;

}

::-webkit-scrollbar-track {

    border-radius: 10px;

    width: 2px;

    border: 1px dotted black;

}

::-webkit-scrollbar-thumb {

    background: grey;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: lightgrey;  

}

</style>

<style>

          /*==========⚠️==========

* for colors go to https://htmlcolorcodes.com/color-names

* for fonts go to https://fonts.google.com

* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com

============⚠️==========*/

/* cursors */

a:hover {

    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur668.cur'), auto;

}

* {

    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur671.cur'), auto;

}

@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');

:root {

    --headers: #ec5a5a;

    --text: pink;

    --names: #ec5a5a;

    --links: pink;

    --hover: #f3d7d7;

    --borders: 1px solid #f3d7d7 !important;

    --background_image: url("https://i.imgur.com/6zCbRs2.png");

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

    --curve: 0px;

    --simple_bg: #ffffff;

}

main .left {

    padding-right: 20px;

}

.url-info {display: none !important;} /* to hide the url */

.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/

a {color: var(--links) !important;} /* color of links */

a:hover {color: var(--hover) !important;} /* color of links on hover */

p, h2 {color: var(--text) !important;} /* color of text */

h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */

h1, .friends a:hover p {color: var(--hover) !important;} /* color of names on hover */

nav label {color: var(--links) !important;} /* color of search */

.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */

.comment-reply:not(:first-child) {border-top: 3px double hotpink;} /* line in between comment replies*/

.count {color: #f3d7d7;}

/* text decoration */

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

    text-decoration: underline;

    text-decoration-style: wavy;

}

.logout-btn:hover, .logout-btn:active {

    text-decoration: underline;

    text-decoration-style: wavy;

}

nav .top a:hover {

    text-decoration: underline;

    text-decoration-style: wavy;

}

nav .links a:hover {

    text-decoration: underline;

    text-decoration-style: wavy;

}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {

    font-family: var(--font-family) !important;

    font-size: 12px!important;

}

/* padding and margin */

.icon {

    border: none !important;

}

.blurbs {

    margin-top: 10px !important;

    margin-bottom: 30px !important

}

.friends {

    margin-top: -10px !important;

    margin-bottom: 30px !important

}

.profile-info {

    border-radius: var(--curve) !important;

}

.comment-replies {

    border: 5px dotted pink;

}

.comments-table {

    border-radius: var(--curve) !important;

    border: none !important;

}

.table-section {

    padding-bottom: 7px !important;

    margin-top: 30px!important

}

#comments {

    margin-top: 5px !important;

    padding-bottom: 5px !important

}

.details p:last-child {

    color: var(--links) !important;

    filter: brightness(95%);

}

.mood {

    margin-top: 20px;

}

/* background image */

body {

    background-image: var(--background_image) !important;

    background-color: white !important;

    background-repeat: repeat;

    background-size: 120px;

}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {

    background: white;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

    margin-bottom: 30px;

    border: var(--borders);

}

nav .top {

    background: rgba(0, 0, 0, 0.0);

}

nav .top a {

    color: pink!important;

}

nav .links {

    background: transparent!important;

    text-align: center;

}

nav .links a{

text-shadow:none;

}

nav img.logo {

    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(305deg) brightness(104%) contrast(105%);

    !important;

}

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

    content: " | ";

    color: var(--headers);

}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {

    background-color: rgba(0, 0, 0, 0.0) !important;

    border: 2px solid pink !important;

    color: pink !important;

    border-radius: 0px !important;

}

button {

    border-radius: 0px !important;

    border: 0px solid pink!important;

    font-family: var(--font-family) !important;

    background-color: rgba(0, 0, 0, 0.0) !important;

    color: pink!important;

}

/*============= online icon ===================*/

.online {

    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);

}

/*============= profile name ===================*/

h1 {

    padding-left: 20px !important;

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

    font-size: 25px !important;

    margin-top: -10px!important;

    color: var(--links)!important;

}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {

    margin-bottom: 30px;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

}

.table-section, .blurbs, .friends {

    margin-bottom: 30px !important;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

}

.friends {

    margin-top: 10px!important;

}

.profile-info {

    background: white;

    border: var(--borders)!important;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px 5px;

    margin-bottom: 30px;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

}

.profile-info .inner {

    font-weight: bold;

    text-align: center;

}

.contact {

    background: white;

    padding: 20px;

    margin-bottom: 40px!important;

}

main {

    background: transparent;

    padding: 6px 0px;

}

.profile-pic img {

    outline: none !important;

    border: none!important;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

}

.friends-grid img {

    outline: none !important;

    filter: opacity(90%) !important;

    border-radius: var(--curve) !important;

}

td {

    background-color: transparent!important;

}

hr {

    border-top: 1px solid pink;

}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {

    border-radius: var(--curve) !important;

    padding: 2px !important;

    border: var(--borders) !important;

}

.friends, .blurbs {

    background: white;

}

.mood, .contact, .blog-preview {

    border-radius: var(--curve) !important;

    padding: 2px !important;

    border: var(--borders) !important;

}

.mood, .blog-preview {

    text-align: center;

    background: white;

    border: var(--borders) !important;

}

.table-section {

    border: var(--borders) !important;

    background-color: white!important;

    border-radius: var(--curve) !important;

}

.heading {

    background: transparent!important;

    padding-bottom: 4px !important;

    background-size: 100%100%!important;

    text-align: center;

    border: none!important;

}

.comments-table {

    display: block;

    height: 500px!important;

    overflow-y: scroll;

    border: var(--borders) !important;

    outline: none !important;

    border: none!important;

}

.comments-table td {

    background-image: url('') !important;

    background-size: cover;

    border: var(--borders);

}

.comments-table td:first-child img {

    /* you can clip images at https://bennettfeely.com/clippy and add the code here */

}

footer {

    color: var(--text);

    text-align: center;

    font-size: 60%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background: white;

    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;

}

/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {

    width: 5px;

    height: 12px;

}

::-webkit-scrollbar-track {

    border-radius: 0px;

    width: 2px;

    border: 1px dotted hotpink;

}

::-webkit-scrollbar-thumb {

    background: pink;

    border-radius: 0px;

}

::-webkit-scrollbar-thumb:hover {

    background: hotpink;

}

          </style>

Who I'd like to meet:

Personas a las que les guste las series, los libros y las películas de Disney.