:root {
  --default-bg: #333;
  --text-color: #f3f3f3;
}

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-display: swap;
  src: url('source-code-pro.ttf') format('truetype');
}

html { background: var(--default-bg); font-size: 16px; text-transform: lowercase; }
body {
  background: center/ cover no-repeat url(background.jpg);
  font: 500 1rem/1.5 "Source Code Pro", Menlo, monospace;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

h1, h2, h3 { font-weight: 500; font-size: 1rem; margin: 1.5rem 0 0; }
h1 { font-size: 1.1rem; text-transform: uppercase; }
a { color: var(--text-color); text-decoration: underline; }
a:hover { background: var(--text-color); color: #333; text-decoration: none; }
ul { list-style-type: none; margin: 0; padding: 0; }
.me { margin-top: 1.5rem; }
.me li { display: inline-block; }
.me li::after { content: '/'; }

.container {
  background: rgba(55, 55, 55, .6);
  backdrop-filter: blur(1rem);
  border-right: 1px solid #000;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 42%;
  padding: 0 3rem;
  overflow: auto;
}

header { display: flex; }
h1 { background: var(--text-color); color: #333; padding: 0 0.25rem;}

.me { margin-left: 3rem; }
.me li { margin-right: 1rem; }
.cv ul { margin-bottom: 1.5rem; margin-left: 1.5rem; }