/* generic resize */
div {
  width: 100%;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

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

/* general style */
body {
  background-color: #43346c;
  font-family: 'Noto Serif';
  color: white;
  text-align: center;
  margin: 0;
  margin-left: 10px;
  margin-right: 10px;
}

a {
  color: #46ff13;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a, a:active, a:visited, a:focus {
  text-decoration: none;
}

/* header */
header {
  background-color: #1f1832;
  width: auto;
  height: 56px;
  margin-bottom: 20px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
  /* box-shadow: h-shadow v-shadow blur spread color inset; */
  box-shadow: 0 7px 7px 7px rgba(0, 0, 0, 0.20);
  border-bottom: 1px solid #4e4764;
}

header > a > img {
  content: url("https://skyhorizonart.neocities.org/images/logo_light.png");
}

/* avatar */
#avatar {
  width: 125px;
  height: 125px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid white;
}

/* about me subject */
#about-me {
  font-size: 18px;
}

/* about me description */
#about-me-description {
  width: 600px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) { #about-me-description {width: auto; } }

/* my art subject */
#my-art {
  font-size: 18px;
  margin-top: 20px;
}

/* my art links */
#bluesky {
  margin-top: 5px;
}

#tumblr {
  margin-top: 10px;
}

/* my art images */
#art1 {
  margin-top: 20px;
}

@media (max-width: 600px) { #art1 > img {width: 300px; height: 400px; } }

#art2 {
  margin-top: 10px;
}

@media (max-width: 600px) { #art2 > img {width: 300px; height: 400px; } }

#art3 {
  margin-top: 10px;
}

@media (max-width: 600px) { #art3 > img {width: 300px; height: 400px; } }

/* my music subject */
#my-music {
  font-size: 18px;
  margin-top: 20px;
}

/* my music links */
#youtube {
  margin-top: 5px;
}

#soundcloud {
  margin-top: 10px;
}

#bandcamp {
  margin-top: 10px;
}

/* my youtube videos */
#youtube-video1 {
  height: 339px;
  margin-top: 20px;
}

@media (max-width: 600px) { #youtube-video1 {height: 169px; } }

@media (max-width: 600px) { #youtube-video1 > iframe {width: 300px; height: 169px; } }

#youtube-video2 {
  height: 339px;
  margin-top: 10px;
}

@media (max-width: 600px) { #youtube-video2 {height: 169px; } }

@media (max-width: 600px) { #youtube-video2 > iframe {width: 300px; height: 169px; } }

#youtube-video3 {
  height: 339px;
  margin-top: 10px;
}

@media (max-width: 600px) { #youtube-video3 {height: 169px; } }

@media (max-width: 600px) { #youtube-video3 > iframe {width: 300px; height: 169px; } }

/* my neocities links*/
#top-of-page {
  margin-top: 20px;  
}

#neocities-profile {
  margin-top: 10px;  
}

/* footer */
footer {
  background-color: #aba1c8;
  height: 51px;
  margin-top: 20px;
  margin-left: -10px;
  margin-right: -10px;
  border-top: 1px solid #1f1832;
}

footer > a {
  height: 51px;
}

footer > a > img {
  margin-top: 10px;
}