/* Style Settings */

@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Mozilla+Text:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@200..700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap'); */

:root {
  --font: "Mozilla Text", Calibri, sans-serif;
  --bg: #21202c;
  --text: #eeefff;
  --title-color: #eeff;
  --highlight-color: #ee72f1;
  --muted: #888;
  --avatar-border: #ccc;
  --link: var(--text);
  --link-hover: var(--highlight-color);
  --hr: #333;
  --colorblock-bg: var(--highlight-color);
  --logo-bg: var(--highlight-color);
  --logo-color: #21202c;
  --pre-border: #ddd;
  --pre-shadow: #eee;
  --code-bg: #ee72f155;
  --code-color: #ddd;
  --img-border: #ccc;
  --blockquote-border: #ccc;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
}

.page {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Top banner */

.top-banner-wrap {
  width: 100%;
  margin: 0 0 12px 0;
  background: var(--code-bg);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.top-banner {
  display: block;
  width: 100%;
  max-width: 853px;
  height: auto;
}

#userPhoto {
  width: 96px;
  height: 96px;
  display: block;
  margin: 3em auto 1.5em;
  -webkit-box-shadow: 0px 6px 0px 0px var(--code-bg);
  -moz-box-shadow: 0px 6px 0px 0px var(--code-bg);
  box-shadow: 0px 6px 0px 0px var(--code-bg);
  transition: all 0.15s;
}

#userPhoto:hover {
  box-shadow: 0px 8px var(--code-bg);
  transform: translateY(-2px);
}

#userPhoto:active {
  box-shadow: 0px 0px var(--code-bg);
  transform: translateY(6px);
}

#userName {
  color: var(--title-color);
  font-size: 2em;
  font-weight: 600;
  line-height: 1.25;
  display: block;
  font-family: "Mozilla Headline";
  width: 100%;
  text-align: center;
  text-decoration: none;
}

#links {
  max-width: 400px;
  width: 100%;
  display: block;
  margin: 27px auto;
}

.link {
  display: block;
  background-color: var(--logo-bg);
  color: #fff;
  font-family: var(--font);
  text-align: center;
  margin-bottom: 20px;
  padding: 17px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.15s;
  box-shadow: 0px 6px var(--code-bg);
}

.link:hover {
  box-shadow: 0px 8px var(--code-bg);
  transform: translateY(-2px);
}

.link:active {
  transform: translateY(6px);
  box-shadow: 0px 0px var(--code-bg);
}

.footer {
  text-align: center;
  font-size: 1.3rem;
}

.footer a {
  text-decoration: none;
}

.media {
  background: #DD5A79;
  width: 38px;
  height: 38px;
  text-align: center;
  color: white;
  margin-bottom: 40px;
  box-shadow: 0px 6px #9E4355;
  transition: all 0.15s;
}

.media:hover {
  box-shadow: 0px 8px #9E4355;
  transform: translateY(-2px);
}

.media:active {
  transform: translateY(6px);
  box-shadow: 0px 0px #9E4355;
}

/* smol screen adjustments */

@media only screen and (max-width: 700px) {
  .page {
    padding: 0 12px;
  }

  #links {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 400px;
  }

  .link {
    width: 100%;
  }

  #userPhoto {
    width: 84px;
    height: 84px;
    margin: 2em auto 1.5em;
  }
}