@font-face {
    font-family: 'arvobold';
    src: url('fonts/arvo-bold-webfont.woff2') format('woff2'),
         url('fonts/arvo-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'arvobold_italic';
    src: url('fonts/arvo-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/arvo-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'arvoitalic';
    src: url('fonts/arvo-italic-webfont.woff2') format('woff2'),
         url('fonts/arvo-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'arvoregular';
    src: url('fonts/arvo-regular-webfont.woff2') format('woff2'),
         url('fonts/arvo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/******** Main page styling ********/

html
{
background: #554;
background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, rgba(0,0,0,1) 90%);
background-size: 5px 5px;
padding: 0;
margin: 0;
}

body
{
width: min(80ch, 100vw);
height: 100vh;
margin: 0 auto;
padding: 0;
background: rgba(32,32,32,0.95);
color: rgba(255,255,255,1);
font-family: "arvoregular", "helvetica";
}

header
{
background: rgba(69,69,69,1);
}

nav a
{
border-radius: 0;
margin:0;
padding: 0 1em;
font-variant-caps: all-small-caps;
text-decoration: none;
font-size: 1.5em;
background-color: inherit;
transition: all 0.5s ease-in;
white-space: nowrap;
}

nav a:hover
{
padding-left: 1.5em;
padding-right: 0.5em;
}

nav a::before
{
content: "‣";
visibility: hidden;
}

nav a:hover::before
{
visibility: visible;
}

h1, h2, h3
{
font-family: "arvobold", "helvetica";
font-weight: bold;
text-align: center;
}

a
{
padding: 0.4em;
margin: 0.5em 0.1em;
background-color: rgba(0,0,0,0.5);
border-radius: 8%;
transition: background 0.2s;
color: #fff;
}

a:visited
{
color: #ccc;
}

a:hover
{
background: rgba(160, 160, 160, 1);
color: rgba(0,0,0,1);
}

a:active
{
text-decoration: none;
background: orange;
color: #000;
}

/******* About section ********/

#about
{
margin: 0;
padding: 2em 0 0 0;
}

#about p
{
text-align: center;
}

#about ul
{
border-left: 3px solid orange;
}

#about ul > li
{
list-style: none;
line-height: 1.3;
}

#me
{
width: min(1000px, 30%);
clip-path: circle(50%);
display: block;
margin: 0 auto;
}

#about a img
{
width: 1em;
position: relative;
top: 0.2em;
margin-right: 0.2em;
}

/******* Contact info ********/

#about em
{
margin-right: 1em;
}

.at::before
{
content: "@";
}

/******* Link section ********/


#links
{
clear: both;
margin: auto 0;
text-align: center;
}

#links a i
{
margin-right: 0.3em;
}

.fa-linkedin
{
color: #0072b1;
}

.fa-github
{
color: #fff;
}

.fa-youtube
{
color: #e52d27;
}

.fa-twitch
{
color: #6441A4;
}