@font-face {
  font-family: 'lehText';
  src: url(./fonts/DroidSans.ttf);
}

@font-face {
  font-family: 'lehCode';
  src: url(./fonts/SourceCodePro-Regular.ttf);
}

:root {
  --background-page: linear-gradient(270deg,rgba(221, 221, 221, 1) 0%, rgba(210, 210, 210, 1) 70%, rgba(180, 180, 180, 1) 100%);

  --color-lehblue: #071169;
  --color-shadow: #777788;

  --border-section: 1px solid var(--color-lehblue);
  --border-skill: 2px solid var(--color-lehblue);
}

* {
  color: var(--color-lehblue);
  font-family: 'lehText';
}

html, body {
  height: 100%;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;

  background: var(--background-page);
}

.header {
  flex-shrink: 0;
  font-size: 2rem;
}

.footer {
  flex-shrink: 0;
}

.header .column50--left {
  background: var(--color-lehblue);
}

.header .column50--left * {
  color: white;
}

.footer .column50--left {
  background: white;
  text-align: right;
}

.header .column50--right {
  background: white;
  text-align: right;
}

.footer .column50--right {
  background: var(--color-lehblue);
}

.footer .column50--right * {
  color: white;
}

.main {
  flex-grow: 1;
  overflow: auto;
  min-height: 2em;

  padding-top: 5vmax;
  padding-bottom: 5vmax;
}

.column50 {
  float: left;
  width: 50%;
}

.padded {
  padding: 1vmin;
}

.card {
  display: grid;
  grid:
  'text text text photo photo photo'
  'tags tags tags tags tags tags';

  width: 70%;

  background: white;

  margin-left: auto;
  margin-right: auto;

  border: 1vmin solid var(--color-lehblue);
  border-radius: 5vmin 0 5vmin 0;

  box-shadow: -20px 20px 10px var(--color-shadow);
}

.impressum {
  width: 70%;

  background: white;

  margin-left: auto;
  margin-right: auto;

  border: 0.5vmin solid var(--color-lehblue);
  border-radius: 5vmin 0 5vmin 0;
}

.text {
  grid-area: text;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 2vmin;
  padding-bottom: 2vmin;
}

.text .content {
  display: inline-block;
  text-align: left;

  font-size: 1.5rem;
  padding: 0;
}

.photo {
  grid-area: photo;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2vmin;
  padding-bottom: 2vmin;
}

.photo .image {
  max-height: 20vmin;
}

.tags {
  grid-area: tags;
  border-top: var(--border-section);

  padding: 2vmin;
}

.tags * {
  font-family: 'lehCode';
}

.skill {
  float: left;
  padding: 1vmin;
  margin: 0.7vmin;
  border: var(--border-skill);
  border-radius: 1vmin;
  font-size: 1.3rem;;
}