@import url("https://fonts.googleapis.com/css?family=Indie+Flower|Abel");

#langselect {
  position: absolute;
  bottom: 1vmin;
  width: 100%;
  text-align: center;
  z-index: 1001;
}

#langselect select {
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
}

#langselect select option {
  color: #000;
}

body,
select {
  font-family: "Abel", "Roboto", sans-serif;
  font-size: 4vmin;
  font-weight: 300;
}

.light {
  font-weight: 300;
}

b {
  font-weight: bold;
}

strong {
  font-weight: 700;
}

body {
  background: linear-gradient(#3d363d, #f6dec2);
  color: #fff;
  font-size: 3vmin;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1 {
  font-size: 300%;
}

h2 {
  font-size: 250%;
}

h3 {
  font-size: 200%;
}

h4 {
  font-size: 150%;
  margin-top: 2vmin;
}

h5 {
  font-size: 90%;
  margin: -1vmin 0 0 1vmin;
}

h6 {
  font-size: 125%;
}

@keyframes moving {
  0% {
    transform: rotateX(-3deg);
  }
  50% {
    transform: rotateX(3deg);
  }
  100% {
    transform: rotateX(-3deg);
  }
}

ul {
  text-align: left;
  margin: 1vmin 0;
  padding: 0;
  list-style-type: none;
}

ul > li {
  margin-bottom: 1vmin;
}

/*
section.slide:not(.skip) {
	opacity: 0;
}
*/

section.slide.focus {
  opacity: 1;
}

section.slide {
  padding: 0vmin;
  transform-style: preserve-3d;
}

div.polaroid {
  background: #fff;
  padding: 3vmin;
  height: 100%;
  box-sizing: border-box;
  transform-origin: top;
  transform: rotateX(0deg);
  transform-style: inherit;
}

div.polaroid > label {
  font-family: "Indie Flower", cursive;
  color: #261c25;
  font-size: 150%;
  line-height: 250%;
  display: block;
  text-transform: lowercase;
}

section.slide:not(.focus) > div.polaroid {
  animation-name: moving;
  animation-duration: 5s;
  animation-delay: -1.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

div.polaroid > div {
  background: #111f29;
  padding: 2vmin;
  height: 85%;
}

svg {
  transform-origin: 0 !important;
}

#vignette {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url("vignette.png");
  background-size: 100% 100%;
  opacity: 0.4;
  display: inline-block;
  z-index: 1000;
}

img.circle {
  border-radius: 50%;
  border: 1vmin solid #fff;
}

.silent {
  opacity: 0.8;
}

dl {
  text-align: left;
}

dd {
  margin-left: 5vmin;
}

hr {
  padding: 0;
  margin: 0;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  border: 0;
  min-height: 1px;
  height: 0.2vmin;
}

a.contact {
  margin: 3vmin;
  display: inline-block;
  transition: all 300ms;
}

a.contact img {
  width: 9vmin;
}

a.contact:hover {
  transform: translateY(-1vmin) scale(1.1);
}

div.shadow {
  width: 100%;
  height: 100%;
  background-image: url("shadow.png");
  background-size: cover;
}

div.polaroid > div.sticky {
  position: absolute;
  background: url(sticky.png);
  background-size: cover;
  width: 20vmin;
  height: 4vmin;
}

div.polaroid > div.ring {
  position: absolute;
  background: url(ring.png);
  background-size: cover;
  width: 3vmin;
  height: 3vmin;
}

.sticky.topleft {
  transform: rotate(-35deg);
  left: -11vmin;
  top: -3vmin;
}

.ring.topleft {
  transform: rotateY(90deg);
  top: 0vmin;
  left: 0vmin;
}

li:before {
  content: "- ";
}

a,
a:visited {
  color: #fff;
}

span.skill_cloud::after {
  content: " ";
  font-size: 2vmin;
}