/* FONT IMPORT */
@import url("https://sadhost.neocities.org/fonts/FreePixel.ttf");
@font-face {
  font-family: "FreePixel";
  src: url("https://sadhost.neocities.org/fonts/FreePixel.ttf")
    format("truetype");
}

/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #dfb9f9;
  --content-background-color: #f7d1f4;
  --sidebar-background-color: #f7d1f4;

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #2b9aab;
  --link-color-hover: #7780ec;

  /* Text: */
  --font: "FreePixel", serif;
  --heading-font: "FreePixel", serif;
  --font-size: 14px;

  /* Other Settings: */
  --margin: 10px;
  --padding: 20px;
  --border: none;
  --round-borders: 5px;
  --sidebar-width: 200px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("");
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(
      --sidebar-width
    )
    auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
}

.header-content {
  padding: var(--padding);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.102);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto "leftSidebar" auto "main" auto "rightSidebar" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}

/* -------------------------------------------------------- */
/* ALERT BUTTON */
/* -------------------------------------------------------- */

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.alert.info {
  padding: 20px;
  background-color: #40d2e2;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.info {
  background-color: #9ee3ef;
  border-left: 6px solid #45c0d6;
  padding: 4px;
}

/* -------------------------------------------------------- */
/* LAST.FM WIDGET */
/* -------------------------------------------------------- */

/*
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
   last.fm sounds of the now
       last several songs
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
i learned about the last.fm stuff
       from the amazing
 Prashant Shrestha (prashant.me)
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
*/

/* below styles the container for the entire situation, so to speak... */
#recentsongs {
  width: 170px;
  margin: 0.2em auto;
  font-family: FreePixel, sans-serif;
  border: 0.2em #e7e7e7;
  border-radius: 0.5em;
  background-color: transparent;
}

/* below styles the title at the top of the display of songs, which can optionally be removed as long as you remove it within the html as well */
#recentsongs h2 {
  background-color: transparent;
  font-weight: bold;
  color: black;
  margin: 0;
  padding-top: 0.1em;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
}

/* the next portion styles the paragraph text which follows the title, remove if you remove the paragraph itself */
#recentsongs p {
  margin: 0.3em;
  font-size: 0.8em;
  text-align: center;
  color: black;
}

#recentsongs a {
  text-decoration: none;
  color: #2b9aab;
}
#recentsongs a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* styling the behavior of the links within the display of songs, ie, the song titles themselves */
#recentsongs .song a {
  text-decoration: none;
  color: #2b9aab;
}
#recentsongs .song a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  color: #7780ec;
}

/* the container for each individual song itself */
#recentsongs .song {
  display: flex;
  width: 100%;
  background-color: #dfb9f9;
  justify-content: start;
  gap: 0em;
  padding: 0;
  border-top: 0.4em solid #f7d1f4;
}

/* positioning the information next to the album cover */
#recentsongs .songinfo {
  flex: 1;
  margin: 0.5em;
}

/* styling the title and artist names */
#recentsongs .songtitle {
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1em;
  font-size: 13px;
}

#recentsongs .artist {
  font-size: 12px;
  color: black;
  line-height: 1em;
  text-transform: lowercase;
}

/* styling the album art image for each song. the height of the first element will apply to width of the art too, and affect the size of each song entry in the list. */
#recentsongs .albumart {
  width: 0%;

  background: transparent;
  border-right: 0em solid #e7e7e7;
}

#recentsongs .albumart img {
  height: 0%;
  width: 0%;
  padding: 0;

  margin: 0;
  border-radius: 0.1em;
}

/* -------------------------------------------------------- */
/* IMG COLOR FILTER */
/* -------------------------------------------------------- */

.pink-image {
  position: relative;

  img {
    filter: brightness(1.1) contrast(1.3);
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: pink;
    opacity: 1;
    pointer-events: none;
  }
}

/* -------------------------------------------------------- */
/* COLLAPSIBLE */
/* -------------------------------------------------------- */

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #5ac9d5;
  color: #000;
  font: "FreePixel", serif;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: #dfb9f9;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f7d1f4;
}

/* -------------------------------------------------------- */
/* ZONELETS INTEGRATION */
/* -------------------------------------------------------- */

/* Zonelets integration */
#postlist .post-title,
#post .post-title {
  font-family: var(--heading-font);
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0.25em;
}

.post-date {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 0.75em;
}

.post-body {
  margin-bottom: 2em;
  line-height: 1.5;
}

.taglist {
  font-size: 0.85em;
  color: #888;
  margin-top: 0.5em;
}

#container {
  margin: 3em auto;
  width: 90%;
  max-width: 700px;
  background-color: #f7d1f4;
  color: #151515;
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 0px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}

/* CHATGPT HELP FOR INDEX PAGE ARRANGEMENT */

.recent-post {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 1em;
}

.recent-post .post-title {
  margin: 0;
  font-size: 1em;
  display: inline;
}

.recent-post .post-title a {
  text-decoration: underline;
}

.recent-post .post-date {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.recent-post .taglist {
  margin: 0;
  font-size: 0.9em;
  display: inline;
}

.recent-post .taglist a {
  text-decoration: none;
  margin-right: 5px;
}

/* -------------------------------------------------------- */
/* TAG STYLING */
/* -------------------------------------------------------- */

.taglist {
  margin-top: 1em;
}

.taglist a.tag {
  display: inline-block;
  background: #f7d1f4;
  color: #000;
  padding: 4px 8px;
  margin: 0 5px 5px 0;
  border-radius: 5px;
  font-size: 0.95em;
  text-decoration: none;
}

.taglist a.tag:hover {
  background: #dfb9f9;
  cursor: pointer;
}

/* -------------------------------------------------------- */
/* HEART IMAGE */
/* -------------------------------------------------------- */

.basic11 {
  mask-image: url("../images/heartmask_renata.png");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 150px;
  height: auto;
}




/*Tabs Start*/
#linkity {
  width: 97%;
  text-align: center;
  border-bottom: 1px solid transparent;
  top: -10px;
  left: -51px; 
}

#linkity a, button{
  width: 20%;
  display:inline-block;
  margin-right:-3px;
  background-color: white;
  color:black;
  padding-top: 5px;
  border-top: 2px dashed #f4a1b6;
  border-left: 2px dashed #f4a1b6;
  border-right: 2px dashed #f4a1b6;
  border-bottom: none;
  -moz-border-radius:10px 10px 0px 0px;
  -webkit-border-radius:10px 10px 0px 0px;
  border-radius:10px 10px 0px 0px;
  letter-spacing:2px;
  margin: 0px 0px 0px 3px;
  transition:.4s;
}

#linkity a, button:hover{
  -moz-transition:.4s;
  -webkit-transition:.4s;
  transition:.4s;
    text-shadow: -.25px -.25px 0 rgba(98, 96, 210, 1), 
                  .25px .25px rgba(98, 96, 210, 1);
  color: rgba(98, 96, 210, 1);
}

.tabcontent {  
 padding: 10px;
 transition: 2s;
}

.tabcontent.on {
  -webkit-animation: fadein 0.6s 1 linear alternate;
  -moz-animation: fadein 0.6s 1 linear alternate;
  -ms-animation: fadein 0.6s 1 linear alternate;
  -o-animation: fadein 0.6s 1 linear alternate;
  animation: fadein 0.6s 1 linear alternate;
}

@keyframes fadein {
  0% { opacity: 0%; transform: translate(-7px); 
    }
  30% { opacity: 0%; transform: translate(-7px); 
    }
  100% { opacity: 100%; transform: translate(0px);
    }
}
/*Tabs End*/


.container-bk {
  container-name: sidebar;
  container-type: inline-size;
}