body {
  background-image: url("../img/undefined/starry-stars.gif"); 
color:#fff;
}

h1, h2, h3, h4, h5 {
  text-emphasis: none; }

header {
  border-bottom: 0.1em solid #00ff22; }
#h-1 a{
  color: #fff;
}
a {
  color: #00ff22; }
#content{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1280px;
  width: 100%;
  box-sizing: border-box;
}
section{
  min-width: 240px;
  max-width: 100%;
  margin: 36px 0;
}
#center-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    INTRODUCTION SECTION
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */
#introduction{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#title{
  font-size: 12vw;
  text-align: center;
  padding: 12vh 0;
}
#description{
  font-size: 20px;
  max-width: 1000px;
  margin: 6vh 6vh 18vh 6vh;
  text-align: center;
}
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    Microblog
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
#microblog{
  width: 240px;
  padding: 10px;
  .title{
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
  }
}
.bsky-post{
  border: solid 0.1em #ffff00;
  padding: 10px;
  margin: 10px 0;
  time{
    font-size: 0.9em;
    color:#ffff00;
  }
  .content{
    margin-top: 4px;
    overflow-wrap: break-word;
  }
}

/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    NOTEBOOK
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
#notebook{
  padding: 10px;
  width: 720px;
  img{
    width: 200px;
  }
  .title{
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
  }
}
.notebook-page{
  display:flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  .notebook-title{
    font-size: 1.8em;
    margin-bottom: 12px;
  }
}
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    SPOTIFY WIDGET
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
#spotify-widget{
  padding: 10px;
  width: 320px;
  .title {
    text-align: center;
    padding: 10px 0;
    span {
      display: inline-block;
      will-change: transform;
      font-size: 21px;
      color:aqua;
}}}
#now-playing{ 
  .track{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }
  img{width:220px}
  .meta{
    font-size: 1.2em;
    padding: 5px 0;
  }
  .song{
    color:#ffff00;
    font-size: 1.3em;
  }
  .playing{
    padding-bottom: 10px;
    font-size: 2em;
    text-align: center;}  
}
#recently-played{ 
  list-style: none;
  img{width:40px}
  .track{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    .song{
      font-size: 1.4em;
      color:#ffff00;
    }
  }
  .playing{
    padding: 4px 0 1px 0;} 
}
#recently-played-title{
  font-size: 2em;
  text-align: center;
}
.track{
  color:#fff;
}


/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    PHOTO ALBUM
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */
#photo-albums {
  display: flex;
    max-width: 1280px;
    padding: 10px; 
  .title {
      padding-left: 1em;
      font-size: 2em;
      writing-mode: vertical-rl;
      text-align: right;
      -webkit-transform: rotate(180deg); }
  .bookcase {
    display: flex;
    flex-wrap: nowrap;
    gap: 2em; 
    overflow-x: scroll;
    overflow-y: hidden;

    img {
      max-height: 20em; }
    }
  }
/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    GUESTBOOK
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */
#guestbook{
  padding: 10px;
  width: 320px;
  .title{
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
  }
  span{
    color:red;
  }
  input{
    width: 100%;
    margin: 6px 0;
    padding: 4px;
    border: solid 1px #0f2;
    background-color: #000;
    color: #fff;
  }
  textarea{
    width: 100%;
    margin: 6px 0;
    padding: 2px;
    border: solid 1px #0f2;
    background-color: #000;
    color: #fff;
    resize: none;
  }
  button{
    background-color: #0f2;
    border: solid 1px #0f2;
    color: #000;
    padding: 6px 12px;
    cursor: pointer;
  }
  button:hover{
    background-color: #000;
    color: #00ff22;
    border-color:#00ff22
}}
#pagination-controls{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    LINKS SECTION
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

#links{
  padding: 10px;
  width: 400px;
  .title{
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
  }
  .description{
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 10px;
  }
  .link-item{
    padding: 6px 0;
  }
  .link-header{
    margin-bottom: 4px;
  }
  .link-title{
    font-size: 1.2em;
    vertical-align: middle;
  }
  .tag{
    margin-left: 4px;
    padding: 0 4px 1px;
    border: 1px solid aqua;
    color: aqua;
    border-radius: 4px;
  }}
  .neon-flicker {
  color: #fff;
  text-shadow:
    0 0 5px #0f2,
    0 0 10px #0f2,
    0 0 20px #0f2,
    0 0 40px #0f2;

  animation: flicker 2s infinite alternate;
}

@keyframes flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.8; }
  25%  { opacity: 1; }
  30%  { opacity: 0.9; }
  70%  { opacity: 1; }
  72%  { opacity: 0.85; }
  75%  { opacity: 1; }
  100% { opacity: 0.95; }
}
/* 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    FOOTER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

footer{
  border-top: solid 0.1em #00ff22;
}
#social-title-hover {
  color: #00ff22; }
#f-4 {
  align-items: flex-end;
  align-self: center; }
  
@media (max-width: 640px) {
  #f-2, #f-3, #f-4 {
    border-top: dotted 0.1em #00ff22; } }
@media (min-width: 640px) and (max-width: 960px) {
  #f-1, #f-3 {
    border-right: dotted 0.1em #00ff22; }

  #f-3 {
    border-top: solid 0.1em #00ff22; } }
@media (min-width: 960px) and (max-width: 1280px) {
  #f-1, #f-2 {
    border-right: dotted 0.1em #00ff22; }

  #f-4 {
    border-top: solid 0.1em #00ff22; } }
@media (min-width: 1280px) {
  #f-1, #f-2, #f-3 {
    border-right: dotted 0.1em #00ff22; } }
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    CONTACT FORM POPUP BOX
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
#contact-form-box {
  border: solid 0.1em #000;
  background-color: #000;
  color: #00ff22;
  caret-color: #00ff22; }

#contact-form-title {
  background-color: #fff;
  color: #000;
  border-bottom: solid 0.1em #fff; }

#contact-form-x:after, #contact-form-x:before {
  border-left: solid 0.1em #000; }

#contact-form-body input, #contact-form-body textarea {
  border-color: #00ff22; }

#contact-form-body button {
  background-color: #00ff22;
  border-color: #00ff22;
  color: #fff; }

#contact-form-body button:hover {
  color: #00ff22;
  background-color: #fff; }