@import url('https://fonts.googleapis.com/css?family=Bebas+Neue:regular');
body {
  font-size: 18px;
  background-color: #fcfbe4;
  background-repeat: no-repeat;
  background-size: cover;
}
.main-content {
  margin: 5em;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  text-transform: uppercase;
  padding: 15px;
}
.moleskine-wrapper {
  max-width: calc(100% / 4);
  min-width: 10em;
}
.moleskine-notebook {
  height: 250px;
  width: 175px;
  position: relative;
  transition: 0.4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 30px;
  perspective: 800px;
}
.moleskine-notebook:hover {
  transform: rotateZ(-10deg);
}
.moleskine-notebook:hover .notebook-cover {
  transform: rotateY(-50deg);
  z-index: 999;
  box-shadow: 20px 10px 50px rgba(0, 0, 0, 0.2);
}
.notebook-cover {
  background: #dfd0f8;
  height: 250px;
  width: 175px;
  position: absolute;
  border-radius: 5px 15px 15px 5px;
  z-index: 10;
  transition: 0.5s linear;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
}
.notebook-cover:before {
  content: "";
  position: absolute;
  width: 10px;
  height: calc(100% + 2px);
  top: -1px;
  z-index: 100;
  border-radius: 2px;
  right: 25px;
  transition: 2s ease;
  background: linear-gradient(to right, #7659a5 0%, #dac3ff 12%, #7659a5 25%, #dac3ff 37%, #7659a5 50%, #dac3ff 62%, #7659a5 75%, #dac3ff 87%, #7659a5 100%);
}
.notebook-cover.blue {
  background: #b4f3fe;
}
.notebook-cover.blue:before {
  background: linear-gradient(to right, #1e606e 0%, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%);
}
.notebook-cover.green {
  background: #aaffcf;
}
.notebook-cover.green:before {
  background: linear-gradient(to right, #7ea38e 0%, #abc3b5 12%, #7ea38e 25%, #abc3b5 37%, #7ea38e 50%, #abc3b5 62%, #7ea38e 75%, #abc3b5 87%, #7ea38e 100%);
}
.notebook-cover.yellow {
  background: #ffeba8;
}
.notebook-cover.yellow:before {
  background: linear-gradient(to right, #ebb501 0%, #fed754 12%, #ebb501 25%, #fed754 37%, #ebb501 50%, #fed754 62%, #ebb501 75%, #fed754 87%, #ebb501 100%);
}
.notebook-skin {
  height: 50px;
  background: #e8e8e0;
  margin-top: 80px;
  padding: 15px;
  font-size: 18px;
  position: relative;
  z-index: 10;
  color: #222;
  text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  font-family: Bebas Neue;
}
.notebook-skin:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 15px;
  left: 0;
  bottom: 0;
  background: #f2bc86;
}
.notebook-page {
  height: 100%;
  width: 175px;
  position: absolute;
  background-color: #fbfae8;
  z-index: 0;
  border-radius: 5px 16px 16px 5px;
  overflow: hidden;
}
.notebook-page.krkonose {
  background-image: url(../weby/img/krkonose.png);
}
.notebook-page.akademie {
  background-image: url(../weby/img/akademie.png);
}
.notebook-page.portfolio {
  background-image: url(../weby/img/portfolio.png);
}
.notebook-page.layout {
  background-image: url(../weby/img/layout.png);
}
.notebook-page.pinkgin {
  background-image: url(../weby/img/pink\ gin.png);
}
.notebook-page-projekt {
  background-image: url(../weby/img/poklady.png);
}

.notebook-page-prace {
  background-image: url(../microsite.png);
}

@media screen and (max-width:480px)  {
  .main-contain{
    justify-content: center;
  }
}

.nav{
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    z-index: 100;
  }
.brand{
  font-size: 1.5rem;
  color: #d11c6d;
  text-decoration: none;
  font-family: Bebas Neue;
  letter-spacing: 1px;
}

.footer{
width: 100%;
justify-content: center;
text-align: center !important;
font-family: Bebas Neue;
letter-spacing: 2px;
font-size: 0.9rem;
color: #d11c6d;
}