/* Style Settings */

* {
    margin: 0; 
    padding: 0;
    user-select: none;
}

:root {
    --bgColor: #474747;
    --accentColor: #b8b8b8;
    --font: sans-serif;
}

body{
    background-color: var(--bgColor);
}

canvas {
    display: block;
}

@font-face {
	font-family: 'barlow'; /*a name to be used later*/
    src: url('barlow-bold.woff2'); /*URL to font*/
}

#profilepic{
    display: block;
    width: 150px;
    height: 150px;
    margin: 35px auto 20px;
}

#icon{
    width: 1rem;
    height: 1rem;
    filter: invert(25%) sepia(99%) saturate(953%) hue-rotate(193deg) brightness(92%) contrast(83%);
}

.iconpos{
    padding-top: 50px;
    z-index: 10;
}

.links{
  position: relative; 
  text-align: center; 
  margin-top: 40px;
}

.links img { 
 display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 10em;
  filter: invert(25%) sepia(99%) saturate(953%) hue-rotate(193deg) brightness(92%) contrast(83%);
} 

.links a { 
  width: 450px;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

.link{
    display: block;
    background-color: black;
    color: #2c5aa0;
    font-family: barlow;
    text-align: center;
    margin-bottom: 20px;
    padding: 12px;
    text-decoration: none;
    font-size: 1rem;
    transition: all .5s cubic-bezier(.08,.59,.29,.99);
    border: solid #2c5aa0 2px;
}
.link:hover{
    background-color: #051e43;
}

h1 {
    color: #b8b8b8;
    font-family: sans-serif;
    text-align:center;
}