/*MEDIA QUERY GUIDE 
xs = @media (max-width: 749px) { ... }
sm = @media (min-width: 750px) and (max-width: 969px) { ... }
md = @media (min-width: 970px) and (max-width: 1169px) { ... }
lg = @media (min-width: 1170px) { ... }

Magenta - #ca1f7b
*/

@font-face {
    font-family: 'Nexa Rust Sans Book 01';
    src: url('assets/fonts/NexaRust/NexaRustSans-Book01.woff2') format('woff2'),
        url('assets/fonts/NexaRust/NexaRustSans-Book01.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa Rust Sans Black 01';
    src: url('assets/fonts/NexaRust/NexaRustSans-Black01.woff2') format('woff2'),
        url('assets/fonts/NexaRust/NexaRustSans-Black01.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa Rust Sans Black 02';
    src: url('assets/fonts/NexaRust/NexaRustSans-Black02.woff2') format('woff2'),
        url('assets/fonts/NexaRust/NexaRustSans-Black02.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*******************************
OVERALL STYLES
*/
body {
background: #111;
font-family: "Nexa Rust Sans Book 01", Arial, sans-serif;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
}

h1, h2, h3 {color: #a1a2a8; font-size: 2em; text-align: center; font-family: "Nexa Rust Sans Black 01", Arial, sans-serif; font-weight: 300; text-transform: uppercase;}  

a {font-family: "Nexa Rust Sans Black 02", Arial, sans-serif; text-transform: uppercase;}
p {color: #a1a2a8; font-family: "Nexa Rust Sans Black 01", Arial, sans-serif; text-transform: uppercase; text-align: center;}

span.upperletter {font-size: 1.3em;}
span.lowerletter {font-size: 1em;}


.avatar-box {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	align-self: center;
    align-items: center;
	justify-self: center;
    justify-content: center;
    justify-items: center;
}

.avatar {max-width: 300px; text-align: center; }

.buttons {margin-top: 30px; margin-bottom: 30px;}
.btn {margin-bottom: 20px;}
.btn-magenta {color: #fff; background-color: #525566; border-color:#24262f; transition: all 0.9s ease;}
.btn-magenta:hover {color: #fff; background-color: #24262f; border-color:#24262f; -webkit-box-shadow: 0 2px 6px 1px rgba(62, 62, 62, 0.8); box-shadow: 0 2px 6px 1px rgba(62, 62, 62, 0.6);}