/*!
* LICENSE - style only: CC BY-NC-SA
* @link https://creativecommons.org/licenses/by-nc-sa/3.0/
* Graphics copyright of Evan Thome
* 
* Title: Boysenberry
* Author: Evan Thome
* Website: N/A
* Twitter: @N/A
*
* View on Style Stage:
* @link https://stylestage.dev/styles/boysenberry/
*/

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

:root {
  --clr-theme-100: #ea7bf4;
  --clr-theme-300: #b33d8d;
  --clr-theme-500: #6200b3;
  --clr-theme-700: #390085;
  --clr-theme-900: #280627;

  --font-accent: 'Fira Code', monospace;
  --font-primary: 'Cairo', sans-serif;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* + * {
  margin-top: 1.6rem;
}

body {
  font-size: 1.2rem;
  font-family: var(--font-primary);
  background: var(--clr-theme-900);
  color: white;
}

body a {
  color: white;
  transition: opacity 300ms linear;
}

body a:hover,
body a:focus {
  opacity: 0.8;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-accent);
  line-height: 1;
}

.container,
nav {
  width: min(80ch, 100% - 2rem);
  margin-right: auto;
  margin-left: auto;
}

svg {
  width: 1.5rem;
  margin-right: 0.5rem;
  display: flex;
  fill: #fbff00;
}

.skip-link {
  text-transform: uppercase;
  text-align: right;
  padding: 0.5rem 0.5rem;
  height: 3rem;
  display: block;
  background-color: var(--clr-theme-700);
  font-weight: 700;
}

.skip-link:hover,
.skip-link:focus {
  opacity: 1;
}

header * + * {
  margin-top: 1.6rem;
}

header {
  min-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(var(--clr-theme-700), var(--clr-theme-900));
  margin: 0;
}

header .container {
  text-align: center;
  margin-top: -4rem;
  width: min(80ch, 100% - 5rem);
}

@media (min-width: 39.7em) {
  header .container {
    margin-top: 0;
  }
}

header h1 {
  text-transform: uppercase;
  font-size: clamp(3.2rem, 5vw + 1rem, 4rem);
  line-height: 1;
  display: inline-block;
  border-bottom: 3px var(--clr-theme-100) solid;
}

header h2 {
  font-size: clamp(2rem, 5vw + 1rem, 3.6rem);
  line-height: 1.1;
  color: var(--clr-theme-100);
  /* margin: 1.6rem 0; */
}

header p {
  font-size: 1.2rem;
}

header p a:first-child {
  color: var(--clr-theme-100);
}

header p a:first-child:hover {
  opacity: 1;
  color: hsl(295, 85%, 85%);
}

header p a {
  transition: opacity 200ms linear;
}

header a:hover,
header a:focus {
  opacity: 0.8;
}

.link-github {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.2rem;
  background: linear-gradient(45deg, #ea7bf4, #cb27e0);
  background-size: 100%;
  /* background-position: center; */
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: background-size 250ms ease-in-out, transform 250ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.link-github:hover,
.link-github:focus {
  opacity: 1;
  background-size: 200%;
  transform: scale(1.02);
}

nav {
  position: sticky;
  top: 0;
  background: var(--clr-theme-900);
  padding: 0.125rem;
  z-index: 100;
  width: 100%;
  height: 5.5rem;
  margin: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  line-height: 1;
  font-size: 1.6rem;
  padding: 0;
}

nav li {
  margin: 0;
}

nav a {
  color: var(--clr-theme-100);
  transition: color 100ms ease-in-out;
}

nav a:hover,
nav a:focus {
  opacity: 1;
  color: hsl(295, 85%, 85%);
}

:target::before {
  display: block;
  content: '';
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
}

@media (min-width: 39.7em) {
  nav {
    height: 3rem;
  }
  :target::before {
    height: 3rem;
    margin-top: -3rem;
  }
}

main * + * {
  margin-top: 1.2rem;
}
section {
  display: flex;
  flex-direction: column;
}

section .link-guidelines {
  padding: 0.5rem 1.2rem;
  background: linear-gradient(45deg, #ea7bf4, #cb27e0);
  background-size: 100%;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: background-size 250ms ease-in-out, transform 250ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.link-guidelines:hover,
.link-guidelines:focus {
  opacity: 1;
  background-size: 200%;
  transform: scale(1.02);
}

section h2,
section h3 {
  border-bottom: 4px var(--clr-theme-100) solid;
  padding: 0.25em 0;
  align-self: center;
}

section h3 {
  font-size: 1.4rem;
}

section ul {
  padding: 0;
}

@media (min-width: 33em) {
  section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

section li {
  outline: 1px var(--clr-theme-100) solid;
  padding: 0.25em 1em;
  margin-top: 0.5rem;
  text-align: center;
}

section ol {
  counter-reset: counter;
  font-size: 1rem;
}

section ol li {
  position: relative;
}

section ol li::before {
  counter-increment: counter;
  content: counter(counter);
  position: absolute;
  left: -3.6rem;
  padding: 0.5em 1em;
  background: var(--clr-theme-300);
  font-weight: 700;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

section ol li::after {
  content: '';
  position: absolute;
  left: -3rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5em 1em;
  top: 0.75rem;
  z-index: -1;
  background: var(--clr-theme-100);
}

main footer {
  text-align: center;
}

main footer h3 {
  font-size: 1.4rem;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 4px var(--clr-theme-100) solid;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

main footer a {
  font-size: 1.4rem;
  color: var(--clr-theme-100);
  padding: 0.5rem;
  white-space: nowrap;
}

main footer a:hover,
main footer a:focus {
  opacity: 1;
  color: hsl(295, 85%, 85%);
}

.profile {
  text-align: center;
}

.profile h4 {
  margin-top: 1rem;
  font-size: 1.6rem;
}

.profile .container {
  background-color: var(--clr-theme-500);
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.6rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.profile ul {
  padding: 0;
}

.profile li {
  margin: 0;
}

.profile span:first-of-type {
  font-weight: 700;
  font-size: 1.4rem;
}

.profile .container a:nth-child(3) {
  font-size: 1.4rem;
}

#styles .container {
  text-align: center;
  background-color: var(--clr-theme-500);
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.6rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#styles ul {
  padding: 0;
}

#styles .container a:nth-child(3) {
  font-size: 1.4rem;
}

@media (min-width: 39.7em) {
  .profile .container {
    width: 40%;
  }
  #styles .container {
    width: 40%;
  }
}

.page-footer {
  background: linear-gradient(var(--clr-theme-900), var(--clr-theme-700));
  text-align: center;
}

.page-footer p a:first-child {
  color: var(--clr-theme-100);
}

.page-footer p a:hover,
.page-footer p a:focus {
  opacity: 1;
  color: hsl(295, 85%, 85%);
}

.page-footer .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-footer .container ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0.25rem;
}

.page-footer .link-github {
  padding: 0.3rem 1rem;
}

.link-twittercontact {
  padding: 0.3rem 1rem;
  display: inline-block;
  background: linear-gradient(45deg, #ea7bf4, #cb27e0);
  background-size: 100%;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: background-size 250ms ease-in-out, transform 250ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.link-twittercontact:hover,
.link-twittercontact:focus {
  opacity: 1;
  background-size: 200%;
  transform: scale(1.02);
}

.link-rss {
  padding: 0.3rem 1rem;
  display: inline-block;
  background: linear-gradient(45deg, #ea7bf4, #cb27e0);
  background-size: 100%;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: background-size 250ms ease-in-out, transform 250ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.link-rss:hover,
.link-rss:focus {
  opacity: 1;
  background-size: 200%;
  transform: scale(1.02);
}

.link-support {
  padding: 0.3rem 1rem;
  display: inline-block;
  background: linear-gradient(45deg, #ea7bf4, #cb27e0);
  background-size: 100%;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  transition: background-size 250ms ease-in-out, transform 250ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.link-support:hover,
.link-support:focus {
  opacity: 1;
  background-size: 200%;
  transform: scale(1.02);
}

@media (min-width: 54.9375em) {
  .page-footer .container ul {
    flex-direction: row;
    gap: 1.4rem;
  }
  .page-footer .container ul li {
    margin-top: 0;
  }
}
