/* CSS reset */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

/* End of CSS reset */

/* Fonts */

@font-face {
  font-family: 'Noto Serif';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-serif-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif'), local('NotoSerif'),
    url('./fonts/noto-serif-v6-latin-regular.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/noto-serif-v6-latin-regular.woff2')
      format('woff2'),
    /* Super Modern Browsers */ url('./fonts/noto-serif-v6-latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/noto-serif-v6-latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/noto-serif-v6-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('./fonts/open-sans-v15-latin-regular.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v15-latin-regular.woff2')
      format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v15-latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v15-latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Shared styles */

:root {
  --link-color: #604c8d;
  --custom-color: #ce0925;
}

html {
  margin: 0 auto;
  font-family: 'Noto Serif', serif;
  font-size: 14px;
  background-color: #f7f7f7;
}

body {
  margin: 0 auto;
  line-height: 1.5;
  max-width: 640px;
  display: flex;
  flex-direction: column;
}

body > * {
  margin-left: 20px;
  margin-right: 20px;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  margin-top: 30px;
  margin-bottom: 16px;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  margin-top: 24px;
  margin-bottom: 10px;
}

a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px dotted #484848;
  display: inline-block;
}

a:hover {
  color: var(--custom-color);
}

#intro {
  display: flex;
  margin-top: 16px;
  margin-bottom: 10px;
}

img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

#intro > p {
  flex: 1 1 auto;
  margin-left: 13px;
}

.project > * {
  margin-right: 8px;
}

.project-name {
  font-weight: bold;
  letter-spacing: 1.1px;
}

@media (max-width: 480px) {
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}