:root {
  --text-light-color: rgba(245,245,245,.8);
  --text-dark-color: #333;
  --font-accent: "OpenSans", sans-serif;
  --font-base: "Montserrat", sans-serif;
  --font-title: "EB Garamond", serif;
  --screen-medium: 30rem;
  --screen-large: 64rem;

  --content-col-width: 40rem;
}

* {
  box-sizing: border-box;
  font-size: 100%;
}

html {
  text-size-adjust: none;
}

body {
  background-image: url('/s/net/developher/G.https/static/profile.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right 0 top 0;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;
}
header {
  display: block;
  width: var(--content-col-width);
  padding: 0;
  text-align: right;
  margin-left: 1rem;
  font-size: 2em;
}
h1, h2, h3 {
  color: var(--text-dark-color);
  letter-spacing: .075em;
  margin: 0;
  font-family: var(--font-accent);
  font-optical-sizing: auto;
  font-weight: 600;
  text-transform: lowercase;
}

h1 {
  color: var(--text-light-color);
  font-family: var(--font-title);
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-right: -.035em;
}
h1 .qualifier {
  font-family: var(--font-accent);
  font-size: .4em;
  font-weight: 200;
  letter-spacing: .075em;
  opacity: .5;
}
h1 .qualifier::after {
  color: var(--text-dark-color);
  content: ")";
  font-weight: 200;
}
h1 .qualifier::before {
  color: var(--text-dark-color);
  content: "(";
  font-weight: 200;
}

h2 {
  font-size: 2rem;
  margin: -0.6em 0 .25em 0;
  opacity: .8;
}
h3 {
  margin: 2em 0 0 0;
  font-size: 2rem;
}
h3::before {
  content: ".";
  margin-left: -0.4em;
}

main {
  display: block;
  font-family: var(--font-base);
  width: var(--content-col-width);
  padding: 1.1rem;
  background-color: var(--text-light-color);
  border-radius: .55em;
  color: var(--text-dark-color);
  font-weight: 100;
  letter-spacing: .05em;
  text-transform: lowercase;
  margin-left: 1rem;
  font-size: 2.5rem;
}

main h3:nth-child(1) {
  margin-top: 0;
}

p {
  margin-block-start: 0;
}
.name {
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .15em;
}

.profiles {
  list-style-type: none;
  margin-top: 0;
  padding-left: 0;
}

a {
  font-weight: 400;
  text-decoration: none;
}
a::before {
  content: "[";
 }
a::after {
  content: "]";
}

a,
a:visited {
  color: var(--text-dark-color);
}
a:hover,
a:focus,
a:active {
  opacity: .6;
}

footer .copyright {
  position: absolute;
  bottom: .5em;
  right: .5em;
  text-transform: lowercase;
  font-size: small;
  font-family: var(--font-base);
  opacity: .65;
}

/* 480px */
@media screen and (min-device-width: 480px) {
  :root {
    --content-col-width: 20rem;
  }

  main {
    font-size: 1rem;
  }

  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 1rem;
  }
  h3 {
    font-size: 1rem;
  }
}
/* 1024px */
@media screen and (min-device-width: 1024px) {

}