@charset "utf-8";

/*** Fonts Face CSS ***/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,600&display=swap');


/**** CSS Variables ****/
:root {
    /* --- color variables --- */
    --primary-color: #191919;
    --secondary-color: #fff;
    --border-color: #f6ff00;
    --text-primary-color: #fff;
    --text-secondary-color: rgba(255,255,255,0.7);
    --text-selection-color: rgba(255,255,255,0.7);
    --text-selection-primary: #191919;
    --opacity-lighten: 0.6;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::-moz-selection {
    background: var(--text-selection-color);
    text-shadow: none;
}

::selection {
    background: var(--text-selection-color);
    text-shadow: none;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html,
body {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--primary-color);
    color: var(--text-primary-color);
    font-family: 'IBM Plex Sans', sans-serif;
    height: 100%;
}

img {
    border: 0px !important;
    outline: none;
    width: 100%;
    max-width: 100%;
    display: block;
}

ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li {
    margin-bottom: 2px;
}
li::before {
    content: "–"; /* Insert content that looks like bullets */
    padding-right: 8px;
}


a {
    text-decoration: none;
    cursor: pointer;
    color: currentColor;
}
.border-link {
    border-bottom: 1px dotted var(--secondary-color);
    display: inline-block;
    margin-left:2px;
    opacity: 0.8;
}
.border-link:hover {
    opacity: 1;
}
body, h1, h2, h3, h4, p {
  margin: 0;
}

h1,
.h1 {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h2,
.h2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

main {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.text-wrap {
    max-width: 680px;
}
.callout {
    display: inline-block;
    bottom: 8px;
    position: relative;
    opacity: var(--opacity-lighten);
}
.callout:before {
    content: '↩';
    margin-right: 4px;
    top: 3px;
    position: relative;
}
.social {
    margin-top: 72px;
}
.social__link {
    opacity: 0.8;
    display: inline-block;
    width: 24px;
    height: 24px;
}
.social__link:hover {
    opacity: 1;
}
.social__link + .social__link {
    margin-left: 12px;
}

.m1 {
    margin-bottom: 8px;
}
.m2 {
    margin-bottom: 36px;
}
.text-lighten {
    opacity: var(--opacity-lighten);
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion) {
    
}

/****** Responsive CSS Start ******/

@media only screen and (min-width: 780px) {
    h1,
    .h1 {
        font-size: 44px;
    }
}