/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3. 	Layout Base
	4. 	Card Header
	5. 	Card Content
	6. 	Animation

-------------------------------------------------------------- */

/* 0. CSS Reset ---------------------------------------------- */

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul, menu {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	-webkit-tap-highlight-color: transparent !important;
}
button,
input,
textarea {
	-webkit-appearance: none;
}

/* 1. Variables ---------------------------------------------- */

:root {
	--card--color--primary: #000000;
	--card--color--secondary: #6d6e71;
	--card--color--background: #eeeeee;
	--card--margin: 1.25rem;
    --card--radius: 0.625rem;
}

/* 2. Typography --------------------------------------------- */

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow/Barlow-Regular.woff2') format('woff2'),
         url('../fonts/barlow/Barlow-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow/Barlow-Italic.woff2') format('woff2'),
         url('../fonts/barlow/Barlow-Italic.woff') format('woff');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow/Barlow-Medium.woff2') format('woff2'),
         url('../fonts/barlow/Barlow-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
body {
    background-color: var(--card--color--background);
    color: var(--card--color--primary);
    font-family: sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.fonts--loaded body {
    font-family: 'Barlow', sans-serif;
}
i, em {
    font-style: italic;
}
b, strong,
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}
::selection {
	color: var(--card--color--primary);
	background-color: var(--card--color--tertiary);
}

/* 3. Layout Base -------------------------------------------- */

html,
body {
    height: 100%;
}
main {
    display: flex;
    flex-direction: column;
    min-height: 100%;
	margin-block: 0;
    margin-inline: auto;
    padding-block-start: calc(var(--card--margin) * 2.5);
    padding-block-end: var(--card--margin);
	padding-inline: var(--card--margin);
	max-width: 26.25em;
}

/* 4. Card Header -------------------------------------------- */

.card {
    flex: 1;
}
.card-portrait {
    height: 6.25rem;
    margin-block-start: 0;
    margin-block-end: var(--card--margin);
    margin-inline: auto;
    width: 6.25rem;
}
.card-portrait--img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.card-title {
    line-height: 1.5em;
    text-align: center;
}
.card-subtitle {
    color: var(--card--color--secondary);
    font-style: italic;
    line-height: 1.5em;
    text-align: center;
}
.card-social {
    display: flex;
    gap: 0 var(--card--margin);
    justify-content: center;
    margin-block-start: calc(var(--card--margin) * 1.25);
    margin-block-end: calc(var(--card--margin) * 2);
}
.card-social .card-social--link {
    height: 2rem;
    width: 2rem;
}
.card-social .card-social--link .icon {
    display: block;
    height: 100%;
    width: 100%;
}
.card-social .card-social--link .icon .fill {
    fill: var(--card--color--primary);
    transition: all 300ms ease;
}
.card-social .card-social--link:hover .icon .fill {
    fill: var(--card--color--secondary);
}

/* 5. Card Content ------------------------------------------- */

.card-link--btn {
    background-color: var(--card--color--primary);
    border-radius: var(--card--radius);
    color: var(--card--color--background);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 3.125rem;
    margin-block-end: var(--card--margin);
    margin-inline: auto;
    text-align: center;
    text-decoration: none;
    transition: all 300ms ease;
    width: 100%;
}
.card-link--btn:hover {
    background-color: var(--card--color--secondary);
}
.card-link--btn:last-child {
    margin-block-end: calc(var(--card--margin) * 2);
}
.card-copyright {
    color: var(--card--color--secondary);
    font-size: 0.875rem;
    text-align: center;
}
.card-copyright a {
    color: var(--card--color--secondary);
    transition: color 300ms ease;
}
.card-copyright a:hover {
    color: var(--card--color--primary);
}

/* 6. Animation ---------------------------------------------- */

body:before {
    background-image: var(--card--static);
    content: "";
    height: calc(100% + 20rem);
    opacity: var(--card--static-opacity);
    position: fixed;
        top: -10rem;
        left: -10rem;
    pointer-events: none;
    width: calc(100% + 20rem);
    z-index: 9999;
    -webkit-animation: noise 1s steps(2) infinite;
            animation: noise 1s steps(2) infinite;
}
@-webkit-keyframes noise {
    to  { transform:translate3d(-7rem, 0, 0) }
}
@keyframes noise {
    0%  { transform:translate3d(0, 9rem, 0) }
    10% { transform:translate3d(-1rem, -4rem, 0) }
    20% { transform:translate3d(-8rem, 2rem, 0) }
    30% { transform:translate3d(9rem, -9rem, 0) }
    40% { transform:translate3d(-2rem, 7rem, 0) }
    50% { transform:translate3d(-9rem, -4rem, 0) }
    60% { transform:translate3d(2rem, 6rem, 0) }
    70% { transform:translate3d(7rem, -8rem, 0) }
    80% { transform:translate3d(-9rem, 1rem, 0) }
    90% { transform:translate3d(6rem, -5rem, 0) }
    to  { transform:translate3d(-7rem, 0, 0) }
}
body {
    opacity: 0;
    transition: opacity 300ms ease;
}
body.loaded {
    opacity: 1;
}