/* userbyte.xyz main.css */

/* ub color palette:
           bg:   #262626
    dark gray:   #404040
   light gray:   #808080
*/

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('anim.css');

:root {
  --ub-bg: #262626;
  --ub-dark-gray: #404040;
  --ub-light-gray: #808080;
  --discord-blurple: #5865f2;
  --spotify-green: #23cd5e;
  --card-drop-height: 12px;
}

body {
  font-family: 'Source Code Pro';
  background-color: var(--ub-bg); /* <-- fallback bg color */
  background: linear-gradient(0deg, #202020 0%, var(--ub-dark-gray) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 990px; /* attempt to match width of profile card */
}
footer p {
  text-align: center;
  line-height: 1ch;
  color: #505050;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

footer a {
  color: #9c9c9c;
}

.footer-icon-div {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}
.footer-icon-div p {
  font-size: 40px;
  display: inline;
}
.footer-icon-div a:hover {
  border-radius: 8px;
  animation: glow .85s;
  animation-fill-mode: forwards;
}

footer hr {
  width: 220px;
}

h1 {
  font-weight: bold;
  color: white;
}
h2 {
  font-weight: bold;
  color: white;
}

.main-content-container {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  padding-bottom:40px;
}

.profile-card-top {
  position: relative;
  /* background: transparent url("../img/banner-1280-384.png") repeat scroll center center; */
  background-color: var(--ub-dark-gray); /* <-- fallback bg color */
  background-size: cover;
  background-image: url(../img/banner-1280-384.png);
  width: 965px;
  height: 250px;
  padding: 12px;
  border-color: #b4b4b4;
  border-width: 1px;
  border-style: solid;
  transition: background-position-x 6s;
  transition-timing-function: ease;
  background-position-x: 0px;
}

.profile-card-top p {
  color: white;
}

.profile-card-top:hover {
  animation: glow .65s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  z-index: 5;
}

.main-content-container h1:hover, .main-content-container p:hover, .main-content-container a:hover {
  animation: glow-text .85s;
  /* animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse; */
  animation-fill-mode: forwards;
}

.profile-card-links, .profile-card-discordrpc, .profile-card-spotify {
  /* transition: margin-top .85s; */
  position: relative;
  /* clip-path: polygon(0% -20%, 100% -20%, 100% 100%, 0% 100%); */
}

.profile-card-links:hover, .profile-card-discordrpc:hover, .profile-card-spotify:hover {
  animation-timing-function: ease-in-out;
  /* margin-top: var(--card-drop-height); */
  z-index: 5;
}

.profile-card-links:hover {
  animation: glow-top-links .65s forwards;
  border-color: #8e8e8e;
}
.profile-card-discordrpc:hover, .profile-card-discordrpc:hover img {
  animation: glow-top-discord .65s forwards;
  border-color: #5865f2;
}
.profile-card-spotify:hover {
  animation: glow-top-spotify .65s forwards;
  border-color: var(--spotify-green);
}

.profile-card-top-text {
  margin-left: 275px;
  font-size: 20px;
}

.profile-card-top-image {
  float: left;
}
.profile-card-top-image img {
  width: 250px;
  height: 250px;
  border-color: #b4b4b4;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
}

.profile-card-links {
  /* background: url(../img/bg-1440p.png) no-repeat center center fixed; */
  float: left;
  background-color: var(--ub-bg);
  border-color: #b4b4b4;
  border-width: 1px;
  border-style: solid;
  border-top: none;
  padding: 12px;
  width: fit-content;
  max-width: 966px;
  font-size: 22px;
}
.profile-card-links i {
  margin-left: 10px; 
  margin-top: 18px; 
  margin-bottom: 18px; 
  color: #bfbfbf;
}
.profile-card-links a {
  /* float: right; */
  margin-left: 10px; 
  color: #f6f6f6;
}
.profile-card-links a:hover {color: #c6c6c6;}

.profile-card-discordrpc {
  float: left;
  background-color: var(--ub-bg);
  border-color: #b4b4b4;
  border-width: 1px;
  border-style: solid;
  border-top: none;
  padding: 12px;
  padding-top: 0px;
  width: 294px;
  height: 311px;
  font-size: 22px;
}

#lanyard-discord {
  max-width: 100%;
  /* margin-top: 10px; */
}

.profile-card-discordrpc p {
  color: var(--discord-blurple);
  font-size: 16px;
}

.profile-card-spotify {
  float: left;
  background-color: var(--ub-bg);
  border-color: #b4b4b4;
  border-width: 1px;
  border-style: solid;
  border-top: none;
  padding: 9px;
  padding-top: 0px;
  padding-right: 15px;
  width: 294px;
  height: 314px;
  font-size: 16px;
  color: white;
  max-width: 294px;
}

.profile-card-top:hover {
  background-position-x: 990px;
}

#spotify-albumArt {
  float: left;
  width: 75px;
  height: 75px;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #b4b4b4;
  margin-top: -5px;
}

.spotify-info-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 85px;
  margin-top: -6px;
}

.spotify-progbar-outer {
	border: 2px solid #1f5130 !important;
  /* border: none; */
  border-radius: 15px;
  background-color: #1f3125;
  margin-top: -5px;
  margin-bottom: 12px;
  height: 10px;
}
#spotify-progbar-bar {
  height: inherit;
	background-color: var(--spotify-green);
  border-radius: 15px;
}

/* -- responsive styling [START] -- */

@media only screen 
and (max-width: 1920px) {
  .profile-card-discordrpc {
    width: 294px;
  }
  .profile-card-spotify {
    max-width: none;
    width: 293px;
  }
}
/* any small-width screen */
@media only screen 
and (max-width: 1000px) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}

/* 1792x828px at 326ppi | iPhone 11 / iPhone XR */
@media only screen 
and (device-width: 414px) 
and (device-height: 896px) 
and (-webkit-device-pixel-ratio: 2) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}
/* 2436x1125px at 458ppi | iPhone XS */
@media only screen 
and (device-width: 375px) 
and (device-height: 812px) 
and (-webkit-device-pixel-ratio: 3) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}
/* 2688x1242px at 458ppi | iPhone XS Max
 + 2688x1242px at 458ppi | iPhone 11 Pro Max */
@media only screen 
and (device-width: 414px) 
and (device-height: 896px) 
and (-webkit-device-pixel-ratio: 3) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}
/* 2436x1125px at 458ppi | iPhone 11 Pro
 + 2340x1080 pixels at 476ppi | iPhone 12/13 Mini */
@media only screen 
and (device-width: 375px) 
and (device-height: 812px) 
and (-webkit-device-pixel-ratio: 3) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}
/* 2532x1170 pixels at 460ppi | iPhone 13 Pro */
@media only screen 
and (device-width: 390px) 
and (device-height: 844px) 
and (-webkit-device-pixel-ratio: 3) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}
/* 2778x1284 pixels at 458ppi | iPhone 13 Pro Max */
@media only screen 
and (device-width: 428px) 
and (device-height: 926px) 
and (-webkit-device-pixel-ratio: 3) {
  .main-content-container {
    top: 4%;
  }
  .profile-card-top-image {
    float: none;
  }
  .profile-card-top-text {
    margin-left: 0px;
    font-size: 16px;
  }
  .profile-card-top {
    width: 326px;
    height: fit-content;
    padding: 9px;
  }
  .profile-card-links {
    width: 326px;
    padding: 9px;
  }
  .profile-card-discordrpc {
    width: 320px;
    height: fit-content;
  }
  #lanyard-discord {
    height: fit-content;
  }
  .profile-card-spotify {
    max-width: none;
    width: 320px;
    height: fit-content;
  }
}

/* -- responsive styling [END] -- */