/* stylesheet only utilized/imported on the `/links` page (added in frontmatter) */
main .section-content{
  padding-top:100px;
  padding-bottom:100px;
  max-width:800px;
}

/* top logo & social icons */
main .socials-container{
  gap: var(--space-medium);
}
#links-logo{
  margin:10px auto 50px auto;
  background-image:url("/img/anim-logo.gif");
  max-width:450px;
  height:120px;
}

.link-row{
  overflow-x:auto;
  padding:10px;
  background-color: #333333;
}


/* icons and hover states */
/* icons from spritesheet (default states are determined in general-styles) */

/* default row/icons */
.link-row:hover{
  color:#3f75f6;
}
.link-row:hover .pixel-social-icon{
  background-position:-198px -200px;
}

/* instagram */
#instagram-row:hover,
.link-row.instagram:hover{
  color:#f94b89;
}
.link-row:hover #instagram-icon,
.link-row:hover .instagram-icon,
.social-icons-container #instagram-icon:hover{
  background-position:-2px -42px;
}

/* facebook */
#facebook-row:hover,
.link-row.facebook:hover{
  color:#4267b2;
}
.link-row:hover #facebook-icon,
.link-row:hover .facebook-icon,
.social-icons-container #facebook-icon:hover{
  background-position:-198px -42px;
}

/* wdht */
#wdht-row:hover,
.link-row.wdht:hover{
  color:#78dda8;
}
.link-row:hover #wdht-icon,
.link-row:hover .wdht-icon,
.social-icons-container #wdht-icon:hover{
  background-position:-41px -121px;
}

/* twitter */
#twitter-row:hover,
.link-row.twitter:hover{
  /* color:#ffffff */
}
.link-row:hover #twitter-icon,
.link-row:hover .twitter-icon,
.social-icons-container #twitter-icon:hover{
  background-position:-41px -200px;
}

/* tiktok */
#tiktok-row:hover,
.link-row.tiktok:hover{
  /* color:#ffffff */
}
.link-row:hover #tiktok-icon,
.link-row:hover .tiktok-icon,
.social-icons-container #tiktok-icon:hover{
  background-position:-2px -200px;
}

/* etsy */
#etsy-row:hover,
.link-row.etsy:hover{
  color:#f1641e
}
.link-row:hover #etsy-icon,
.link-row:hover .etsy-icon,
.social-icons-container #etsy-icon:hover{
  background-position:-2px -279px;
}

/* discord */
#discord-row:hover,
.link-row.discord:hover{
  color:#4e62ee;
}
/*  */

/* itch.io */
#itch-row:hover,
.link-row.itch:hover{
  color:#fa5c5c;
}
/*  */

/* giphy */
#giphy-row:hover,
.link-row.giphy:hover{
  color:#b377e5;
}
.link-row:hover #giphy-icon,
.link-row:hover .giphy-icon,
.social-icons-container #giphy-icon:hover{
  background-position:-2px -121px;
}

/* tumblr */
#tumblr-row:hover,
.link-row.tumblr:hover{
  color:#41688e;
}
.link-row:hover #tumblr-icon,
.link-row:hover .tumblr-icon{
  background-position:-159px -42px;
}

/* shop */
#shop-row:hover,
.link-row.shop:hover{
  color:#ffd34d;
}
.link-row:hover #shop-icon,
.link-row:hover .shop-icon{
  background-position:-80px -42px;
}

/* website */
#website-row:hover,
.link-row.website:hover{
  color:#388841;
}
.link-row:hover #website-icon,
.link-row:hover .website-icon{
  background-position:-119px -121px;
}

/* newsletter */
#newsletter-row:hover,
.link-row.newsletter:hover{
  color:#f3ddbd;
}
.link-row:hover #newsletter-icon,
.link-row:hover .newsletter-icon{
  background-position:-159px -121px;
}

/* survey */
#survey-row:hover,
.link-row.survey:hover{
  color:#6df77c;
}
.link-row:hover #survey-icon,
.link-row:hover .survey-icon{
  background-position:-198px -121px;
}

/* blog */
#blog-row:hover,
.link-row.blog:hover{
  color:#ff9224;
}
.link-row:hover #blog-icon,
.link-row:hover .blog-icon{
  background-position:-80px -121px;
}

/* terrabyte etc. */
#terrabyte-row:hover,
.link-row.terrabyte:hover{
  color:#0a8c61;
}
.link-row:hover #terrabyte-icon,
.link-row:hover .terrabyte-icon{
  background-position:-119px -200px;
}

/* pinekeepers etc. */
#pinekeepers-row:hover,
.link-row.pinekeepers:hover{
  color:#8ab97f;
}
.link-row:hover #pinekeepers-icon,
.link-row:hover .pinekeepers-icon{
  background-position:-159px -200px;
}


@media only screen and (max-width:615px){
  .header-logo-container > a{
    display:none;
  }
  main .section-content{
    padding:30px;
  }
}