/* ========================================================= */
/* 🩻 MORUTE PUPVERT STYLE.CSS 🩻 */
/* ========================================================= */

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


/* ================= VARIABLES ================= */

:root {

  --content-background-color: #fffafd;
  --sidebar-background-color: #fff1f7;

  --text-color: #493641;
  --sidebar-text-color: #493641;

  --link-color: #c75b88;
  --link-color-hover: #8d82c9;

  --font: 'Super Renewables', sans-serif;
  --heading-font: 'Super Renewables', sans-serif;

  --font-size: 16px;

  --margin: 12px;
  --padding: 20px;

  --border: 3px dashed #e7a8c2;

  --round-borders: 22px;

  --sidebar-width: 230px;

}


/* ================= BASICS ================= */


* {
  box-sizing:border-box;
}


body {

  display:flex;
  justify-content:center;
  align-items:flex-start;

  min-height:100vh;

  margin:0;
  padding:var(--margin);

  font-size:var(--font-size);

  font-family:var(--font);

  color:var(--text-color);

  line-height:1.5;


  background:

  url("https://i.pinimg.com/736x/20/d1/97/20d197f17f33646e4ae9dd1b95c15d27.jpg");


  background-size:cover;
  background-attachment:fixed;

}



::selection {

 background:#e7a8c2;
 color:white;

}



a {

 text-decoration:underline;

}


a,
a:visited {

 color:var(--link-color);

}


a:hover,
a:focus {

 color:var(--link-color-hover);

 text-decoration-style:wavy;

}



/* ================= LAYOUT ================= */


.layout {

 width:1000px;

 display:grid;

 grid-gap:var(--margin);


 grid-template:

 "header header" auto
 "leftSidebar main" auto
 "footer footer" auto

 /

 var(--sidebar-width) auto;

}



main {

 grid-area:main;

 overflow-y:auto;

 padding:var(--padding);

 background:

 linear-gradient(
 135deg,
 #fffafd,
 #fff3f8
 );


 border:var(--border);

 border-radius:var(--round-borders);


 box-shadow:

 0 5px 20px rgba(199,91,136,.15);

}



/* ================= HEADER ================= */


header {

 grid-area:header;

 background:#fffafd;

 border:var(--border);

 border-radius:var(--round-borders);

 box-shadow:

 0 5px 20px rgba(199,91,136,.15);

}



.header-content {

 padding:var(--padding);

}



.header-title {

 font-family:var(--heading-font);

 font-size:1.5em;

 font-weight:bold;

 color:#c75b88;

 text-shadow:

 2px 2px #ffd5e5;

}



.header-image img {

 width:100%;

 height:auto;

}



/* ================= SIDEBAR ================= */


aside {

 background:

 linear-gradient(
 135deg,
 #fff1f7,
 #fff8fb
 );


 border:var(--border);

 border-radius:var(--round-borders);


 padding:var(--padding);

 color:var(--sidebar-text-color);


 box-shadow:

 0 5px 20px rgba(199,91,136,.12);

}



.left-sidebar {

 grid-area:leftSidebar;

}



.right-sidebar {

 grid-area:rightSidebar;

}



.sidebar-title {

 font-family:var(--heading-font);

 font-size:1.2em;

 text-align:center;

 font-weight:bold;

 color:#c75b88;

}



.sidebar-section {

 margin-bottom:2em;

 padding:12px;


 background:

 rgba(255,205,225,.22);


 border-radius:18px;


 border:

 2px dotted #e7a8c2;

}



.sidebar-section img {

 max-width:100%;

 height:auto;

}



.sidebar-section ul,
.sidebar-section ol {

 padding-left:1.5em;

}



.sidebar-section blockquote {

 background:

 rgba(231,168,194,.25);


 padding:12px;

 border-radius:15px;

}



/* ================= BLINKIES ================= */


.blinkies {

 display:flex;

 flex-wrap:wrap;

 justify-content:center;

 gap:5px;

}



.blinkies img {

 max-width:100%;

 border-radius:0;

}



/* ================= SITE BUTTON ================= */


.site-button {

 display:flex;

 flex-direction:column;

 align-items:center;

 gap:8px;

}



.site-button img {

 max-width:100%;

}



.site-button textarea {

 width:100%;

 font-family:monospace;

}



/* ================= NAVIGATION ================= */


nav {

 margin-bottom:3em;

}



nav ul {

 list-style:none;

 padding:0;

 margin:0;

}



nav li {

 margin-bottom:5px;

}



nav a,
nav strong,
nav details summary {

 display:inline-block;

 padding:7px 12px;

}



nav a {

 background:#fff0f6;

 border-radius:15px;

}



nav a:hover {

 background:#ffd7e7;

 transform:translateY(-2px);

}



header nav {

 margin-bottom:0;

}



header nav ul {

 display:flex;

 flex-wrap:wrap;

}



header nav ul li {

 position:relative;

}



header nav ul ul {

 display:none;

 position:absolute;

 top:100%;

 left:10px;


 background:#fffafd;

 border:var(--border);

 border-radius:15px;

 padding:10px;

 z-index:10;

}



header nav ul li:hover ul,
header nav ul li:focus-within ul {

 display:block;

}
/* ================= CONTENT ================= */


main {

 line-height:1.6;

}



main p,
main .image,
main .full-width-image,
main .two-columns {

 margin:.75em 0;

}



main ul,
main ol {

 margin:.5em 0;

 padding-left:1.5em;

}



main li {

 margin-bottom:.3em;

 line-height:1.4;

}



main ul li::marker {

 content:"🩸 ";

 color:#c75b88;

}



main a:hover {

 text-shadow:

 0 0 8px #ffd0e3;

}




/* ================= HEADINGS ================= */


main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {

 font-family:var(--heading-font);

 color:#bd527f;

 text-shadow:

 1px 1px #ffd7e6,
 0 0 8px rgba(255,170,205,.5);


 margin-bottom:0;

 line-height:1.5;

}



main h1 {

 font-size:1.5em;

}



main h2 {

 font-size:1.4em;

}



main h3 {

 font-size:1.3em;

}



main h4 {

 font-size:1.2em;

}



/* ================= DIVIDERS ================= */


main hr {

 border:0;

 border-top:

 3px dotted #e7a8c2;

 margin:1.5em 0;

}



/* ================= BLOCKQUOTES ================= */


main blockquote {

 background:

 rgba(231,168,194,.25);


 border-left:

 5px solid #c75b88;


 padding:15px;


 border-radius:15px;

}




/* ================= COLUMNS ================= */


.two-columns {

 display:flex;

}



.two-columns > * {

 flex:1;

}



.two-columns > *:first-child {

 padding-right:.75em;

}



.two-columns > *:last-child {

 padding-left:.75em;

}





/* ================= IMAGES ================= */


.image {

 display:block;

 max-width:100%;

 height:auto;

}



.full-width-image {

 display:block;

 width:100%;

}



.images {

 display:flex;

 width:calc(100% + 10px);

 margin-left:-5px;

}



.images img {

 width:100%;

 padding:5px;

}



img {

 border-radius:18px;

}




/* ================= ABOUT BOX ================= */


.aboutbox {

 background:

 linear-gradient(
 135deg,
 rgba(255,210,230,.45),
 rgba(255,240,247,.6)
 );


 border:

 2px dashed #d98baa;


 border-radius:22px;


 padding:18px;


 box-shadow:

 inset 0 0 15px rgba(255,180,210,.35);

}



.aboutbox p {

 margin:12px 0;

}




/* ================= CUTE MORUTE DETAILS ================= */


strong {

 color:#bd527f;

}



mark {

 background:transparent;

 color:#bd527f;

 text-shadow:

 0 0 8px #ffc4db;

}



/* little creepy-cute glow */

main,
aside,
header {

 position:relative;

}



main::before,
aside::before,
header::before {

 content:"♡";

 position:absolute;

 top:8px;

 right:14px;

 color:#e7a8c2;

 opacity:.55;

 font-size:18px;

}



/* ================= SCROLLBAR ================= */


::-webkit-scrollbar {

 width:13px;

}



::-webkit-scrollbar-track {

 background:#ffeaf3;

}



::-webkit-scrollbar-thumb {

 background:#e7a8c2;

 border-radius:20px;

 border:

 3px solid #ffeaf3;

}



::-webkit-scrollbar-thumb:hover {

 background:#c75b88;

}



/* ================= SKIP LINK ================= */


#skip-to-content-link {

 position:fixed;

 top:0;

 left:0;


 padding:.5rem 1rem;


 background:#fffafd;


 color:#493641;


 border:

 2px dashed #e7a8c2;


 border-radius:0 0 15px 0;


 transform:translateY(-4rem);


 transition:.2s;


 z-index:999999;

}



#skip-to-content-link:focus,
#skip-to-content-link:focus-within {

 transform:translateY(0);

}
/* ================= MOBILE ================= */


@media (max-width:800px){


 body {

  font-size:14px;

 }


 .layout {

  width:100%;


  grid-template:

  "header"
  auto

  "main"
  auto

  "leftSidebar"
  auto

  "footer"
  auto

  /

  1fr;

 }



 .right-sidebar {

  display:none;

 }



 aside {

  padding:12px;

 }



 main {

  padding:15px;

 }



 .two-columns {

  flex-direction:column;

 }



 .two-columns > * {

  padding:0 !important;

 }



 .images {

  flex-wrap:wrap;

 }



 .images img {

  width:100%;

 }


 header nav ul {

  flex-direction:column;

 }



 header nav a {

  display:block;

 }



}



/* ================= EXTRA MORUTE DECOR ================= */


/* soft pink shine */

main,
aside,
header {

 animation:

 softpulse 6s infinite alternate;

}



@keyframes softpulse {


 from {

  box-shadow:

  0 5px 20px rgba(199,91,136,.12);

 }


 to {

  box-shadow:

  0 5px 25px rgba(199,91,136,.22);

 }

}



/* cute medical-ish labels */


h2::after,
h3::after {

 content:"  ♡";

 color:#e7a8c2;

 font-size:.8em;

}




/* tiny heart cursor trail feeling */

a {

 transition:.2s ease;

}



a:hover {

 transform:translateY(-1px);

}




/* make lists feel scrapbooky */


main li {

 padding-left:3px;

}



main li:hover {

 color:#bd527f;

}



/* sidebar little sticker feeling */

.sidebar-section {

 box-shadow:

 inset 0 0 12px rgba(255,180,210,.25);

}




/* old web / blinkie friendly */


.blinkies img,
.sidebar-section img {

 image-rendering:auto;

}




/* footer spacing */


footer {

 text-align:center;

 color:#bd527f;

 padding:15px;

}




/* morute color accents */


::selection {

 background:#c75b88;

 color:white;

}



input,
textarea {

 border:

 2px dashed #e7a8c2;


 border-radius:12px;


 background:#fff8fb;


 color:#493641;

}




/* final puppy + spooky vibe */

body::after {

 content:"🐾  ♡  🩻  ♡  🐾";


 position:fixed;


 bottom:8px;

 right:15px;


 color:#d98baa;


 opacity:.5;


 font-size:14px;


 pointer-events:none;

}