/* poppins-500 - latin-ext_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/poppins-v20-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
    src: url('./fonts/poppins-v20-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/poppins-v20-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/poppins-v20-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
         url('./fonts/poppins-v20-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/poppins-v20-latin-ext_latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* poppins-700 - latin-ext_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/poppins-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: url('./fonts/poppins-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/poppins-v20-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/poppins-v20-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/poppins-v20-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/poppins-v20-latin-ext_latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* jetbrains-mono-700 - latin-ext_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
         url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/jetbrains-mono-v13-latin-ext_latin-700.svg#JetBrainsMono') format('svg'); /* Legacy iOS */
  }
  

html {
    margin: 0;
    height: 100%;
    font-size: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Poppins', sans-serif;
}

body {
    --bg: #18181B;
    --sec-bg: #27272a;
    --text: #A8A29E;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    display: table;
    width: 100%;
    min-height: 100%;
    font-weight: 500;
}
@media (prefers-color-scheme: light) {
    body {
        --bg: #fff;
        --sec-bg: #D4D4D8;
        --text: #27272A;
    }
}
.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 2rem;
}
.avatar {
    width: 14rem;
    height: 16rem;
    position: relative;
    margin: 0 auto;
}

.circle {
    background: var(--sec-bg);
    border-radius: 15rem;
    width: 100%;
    height: 14rem;
    bottom: 0;
    left: 0;
    position: absolute;
}

.image {
    background: url('avatar.png') no-repeat bottom center / auto 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 15rem;
    border-bottom-right-radius: 15rem;
}

h1 {
    margin: 1.5rem 0 0.3rem 0;
    font-weight: 700;
    font-size: 2rem;
}

h2 {
    color: #cf3c32;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    margin: 0.3rem 0 0.6rem;
    font-size: 1.5rem;
    letter-spacing: -0.1rem;
}

.icons {
    margin: 1rem 0 0;
}

a {
    text-decoration: none;
}

a {
    color: var(--text);
    display: inline-block;
    padding: 1rem;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
}

a:hover {
    color: #cf3c32;
    background: var(--sec-bg);
}