* {
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  border: 0; }

body {
  background: url("../content/images/background.jpg") fixed;
  background-size: cover;
  color: #e8e8e8;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  body .colored {
    color: #3b73b4; }
  body .flag-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 0;
    border-radius: 50%;
    background-color: white;
    padding: 2px; }
    body .flag-btn .flag-img {
      border-radius: 50%; }

header {
  position: fixed;
  z-index: 2;
  width: 240px;
  height: calc(100vh);
  background: rgba(0, 0, 0, 0.9);
  color: #e8e8e8;
  overflow: hidden;
  padding: 20px; }
  header .portrait {
    width: 200px;
    background: #3b73b4;
    padding: 3px;
    border-radius: 50%; }
  header .link-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    white-space: nowrap; }
    header .link-container a {
      margin: 1px 0; }
      header .link-container a svg {
        width: 28px;
        height: 28px;
        margin-right: 5px; }

main {
  z-index: 1;
  min-height: calc(100vh - 40px);
  background: rgba(0, 0, 0, 0.8);
  color: #e8e8e8;
  overflow: hidden;
  margin-left: 240px;
  padding: 1rem; }
  main .container, main .box-container {
    margin: 1rem auto;
    overflow: hidden; }
  main .container {
    width: 95%; }
  main .box-container {
    width: 90%;
    background: rgba(0, 0, 0, 0.5);
    color: #e8e8e8;
    padding: 1rem 2rem;
    border-left: #3b73b4 2px solid; }
  main .grid-container {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(2, 1fr); }
  main .lg-heading {
    font-size: 4.5rem;
    margin-bottom: 1rem; }
  main .sm-heading {
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5); }

footer {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 40px;
  text-align: center;
  padding: 1rem;
  background: #000;
  color: #3b73b4;
  line-height: 1; }

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 2; }

h4 {
  padding-top: 1rem; }

p {
  padding-top: 0.5rem; }

a {
  color: white;
  fill: white;
  text-decoration: none;
  outline: none; }
  a:hover .colorize {
    color: #3b73b4;
    transition: all 0.2s ease-out; }
  a:hover .capitalize {
    text-transform: uppercase;
    transition: all 0.2s ease-out; }
  a:hover path {
    fill: #3b73b4;
    transition: all 0.2s ease-out; }
  a:focus {
    color: #3b73b4;
    transition: all 0.2s ease-out; }
    a:focus path {
      fill: #3b73b4;
      transition: all 0.2s ease-out; }

button {
  background: #e8e8e8;
  outline: none; }
  button:hover {
    background-color: #3b73b4;
    transition: all 0.2s ease-out; }
  button:focus {
    transition: all 0.2s ease-out;
    background-color: #3b73b4; }

ul {
  list-style: none; }

@media screen and (min-width: 1171px) {
  main .grid-container {
    grid-template-columns: repeat(3, 1fr); } }

@media screen and (max-width: 768px) {
  header {
    height: 170px;
    width: 100%;
    position: static;
    padding: 10px; }
    header .portrait {
      width: 150px;
      float: left; }
    header .link-container {
      margin-left: 170px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around; }
      header .link-container a svg {
        width: 24px;
        height: 24px; }
  main {
    min-height: calc(100vh - 40px - 240px);
    margin-left: 0;
    padding: 0;
    align-items: center;
    text-align: center; }
    main .grid-container {
      grid-template-columns: repeat(2, 1fr); }
    main .lg-heading {
      line-height: 1;
      margin-bottom: 1rem; } }

@media screen and (max-width: 500px) {
  main .lg-heading {
    font-size: 3rem; }
  main .grid-container {
    grid-template-columns: 1fr; } }