@import url("reset.css");

/* Global Reset */


/* Elements */

@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-regular.eot");
  src: url("fonts/roboto-regular.eot?#iefix") format('embedded-opentype'),
       url("fonts/roboto-regular.woff2") format('woff2'),
       url("fonts/roboto-regular.woff") format('woff'),
       url("fonts/roboto-regular.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

body {  
  font-family: 'Roboto', 'Source Sans Pro', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #333333;  
  background: white;
}

@media (prefers-color-scheme: dark) {
  body {
      background: black;
      color: #E6E6E6;
  }
}

/* HTML elements */

h1, h2, h3, h4, h5 {
  font-family: 'Roboto', 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height: 1.1;
  color: inherit;
}

h1 {
  font-size: 36px;

}

h2 {
  color: #999999;
  font-size: 20px;
  margin: 10px 0px 0px 0px;
}

a {
  transition: color 0.3s linear;
}

/* Main containers */

.top-bar, .container {
  min-width: 320px;
}

.top-bar {
  position: relative;
  min-height: 50px;
  width: 100%;
  margin-bottom: 21px;  
  background-color: #222222;
  
}

.top-bar .wrapper {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.container {
  max-width: 970px;
  
  margin: 0 auto;
}

/* Header */

header {
  margin-top: 50px;
  text-align: center;
  margin-bottom: 20px  
}

header figure {
  margin: 0 auto;
}

header figure img {
  width: 120px;
  border-radius: 50%;  
  transition-duration: 0.8s;
  transition-property: transform;  
}

header figure img:hover { 
  opacity: 0.8; 
}

.profile-links {
  margin: 30px 0;
}

.profile-links a {
  font-size: 24px;
  padding: 0 10px;
  color: #BEBEBE;
}

.profile-links a:hover {
  color: #2eb4da;
}

/* Main content */

.content {
  text-align: center;
}