* { transition: color 0.5s ease-in-out; }

body {
  margin: 0;
  background-color: var(--background);
  background-image: var(--backgroundimg);
  color: var(--color);
  font-family:Fredoka, sans-serif;
  font-size: 1em;
  line-height: 110%;
  }

a { color: var(--link); text-decoration: none; font-weight: bold;}

a:hover, a:focus { color: var(--linkhover); font-style: italic; cursor: pointer; }

details > summary { list-style-type: none; }

details[open] > summary { list-style-type: none; }

summary { color: var(--link); font-weight: bold; padding-bottom: 10px;}

summary:hover { color: var(--linkhover); font-style: italic; cursor: pointer; }

summary:before { content: "♥ ";}

details a {
  border: none;
  border-radius: 10%;
  padding: 5px;
  background-color: var(--buttonbg);
  color: var(--buttonlink);
  text-decoration: none;
  transition: color, background-color 0.5s ease-in-out;
}

details a:hover, details a:focus {
  background-color: var(--buttonbghover);
  color: var(--buttonlinkhover);
  cursor: pointer;
}

::selection { color: var(--selection); background-color: var(--selectionbg); }

/*Everything goes inside here.*/
.wrapper { width: 900px; margin: 0 auto; }

header, nav, footer { text-align: center; }

header h1 { letter-spacing: 0.1em; transition: all 1s ease-in-out; }

header h1:hover, h1:focus { letter-spacing: 0.5em; }

/*Navigation links.*/
nav { font-weight: bold; }

nav ul { list-style-type: none; padding: 0; margin: 0; }

nav li { display: inline-block; }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
nav li:before { content:"⟦"; padding: 5px; }

nav li:after { content: " ⟧"; }

nav .last:after { content: "⟧"; }

nav li:before, nav li:after { letter-spacing: 5px; }

/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner { margin-top: 20px; padding: 10px; background-color: var(--innercolor); overflow: auto;}

/*Prevent image overflow.*/
section img, aside img { max-width: 100%; height: auto; }

/*Wrapper for the sidebar.*/
aside { width: 215px; float: left; text-align: center;}

aside p { white-space: nowrap; }

aside a { color: var(--link); }

aside a:hover, a:focus { color: var(--linkhover); }

/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img { display: block; width: 100%; }

/*This is where the title, navbar, and main content all go.*/
.main-wrapper { margin-left: 235px; position: relative; }

main { columns: 1; position: relative; }

main p { text-align: justify; }

/* masonry effect, put this in style */
.masonry { column-count: 2; column-gap: 10px; }

.masonry img { width: 100%; display: block; margin-bottom:10px; }

#links ul { list-style: none; margin-left: 0; padding-left: 0; }

#links li { padding-left: 1em; text-indent: -1em; }

#links li:before { content: "♥"; padding-right: 5px; }

#profile { columns: 2; column-gap: 10px;}

#about table { padding-top: 20px; }

#about th, td { text-align: left; vertical-align: top; padding: 5px; }

#about th { background-color: var(--linkhover); }

#interests { columns: 2; column-gap: 10px; }

#lyrics p { white-space: wrap; }

footer { margin-bottom: 25px; }

#top:target { scroll-margin: 25px; }


@media(max-width:915px) {
  .wrapper {
    width: 95%;
    }

  .main-wrapper {
    width: calc(100% - 225px);
    }

  }

@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }

  .main-wrapper, aside {
    margin: 0 auto;
    width: 90%;
    }

  aside {
    float: none;
    display: block;
    }

  #profile {
    columns: 1;
  }
  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  aside .sidebar-image img {
    width: 100%;
    }

  footer {
    margin-bottom: 25px;
    }

  }