* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'local';
  src: url('Geometria-Light.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'local';
  src: url('Geometria.otf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'local';
  src: url('Geometria-Bold.otf');
  font-weight: 900;
  font-style: normal;
}

b {
  color: #111;
}

.ti {
  font-family: 'Kokonor', initial;
  font-weight: normal;
  line-height: 1.6;
}

html {
  min-height: 100%;
  background-image: linear-gradient(
    to top,
    #3f51b1 0%,
    #5a55ae 13%,
    #7b5fac 25%,
    #8f6aae 38%,
    #a86aa4 50%,
    #cc6b8e 62%,
    #f18271 75%,
    #f3a469 87%,
    #f7c978 100%
  );
}
body {
  min-height: 100%;
  margin: 0;
  font-family: 'local';
}
.back {
  left: 10px;
  top: -5px;
  position: absolute;
  transition: transform .3s;
  fill: white;
  filter: drop-shadow(2px 2px 2px rgba(42, 43, 43, 0.5));
}
.back:hover {
  transform: scale(1.2);
  text-shadow: none;
}
header {
  padding: 0 0 40px;
  text-align: center;
}
header h1 {
  font-size: 30px;
  padding: 30px 0;
  margin: 0;
  font-weight: 900;
  line-height: 1.4;
  color: white;
  text-shadow: 1px 1px 5px rgba(36, 37, 38, 0.7);
}
img {
  max-height: 100%;
  max-width: 100%;
}
.card3d {
  margin: 0 10px 30px;
}
.card3d img {
  will-change: tranform;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  transition: transform 50ms;
}
header aside {
  text-align: left;
  vertical-align: top;
  color: white;
  opacity: 0.95;
  font-size: 17px;
  text-shadow: 1px 1px 5px rgba(36, 37, 38, 0.7);
  padding: 10px;
}
header a {
  color: inherit;
  text-decoration: none;
  display: block;
}
header a:hover {
  text-shadow: 1px 1px 10px rgba(3, 169, 244, 0.84);
}
header p {
  margin: 10px 0;
}
header h2 {
  margin: 30px 0 10px;
  font-size: 28px;
  padding: 0;
}
footer h2 {
  margin: 30px 0px 120px 20px;
  font-size: 22px;
  color: white;
  text-shadow: 1px 1px 5px rgba(36, 37, 38, 0.7);
  padding: 0;
}
main {
  padding: 5px 10px;
  text-align: center;
}
main section {
  padding: 10px;
  text-align: left;
  width: 100%;
  display: inline-block;
  margin: 5px 0;
  border-radius: 4px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
}
main h2 {
  text-align: center;
  font-size: 24px;
  padding: 0 0 20px;
  margin: 0;
  color: #444;
}
main a {
  display: block;
  text-decoration: none;
  color: #555;
  font-size: 16px;
  transition: 0.1s;
}
main a:hover {
  color: #4151b1;
}
main b:hover {
  color: #4151b1;
}
@media (min-width: 600px) {
  header:after {
    display: table;
    clear: both;
    content: '';
  }
  .card3d {
    transform-style: preserve-3d;
    perspective: 800px;
    margin: 10px;
    float: left;
    position: relative;
    top: 10px;
  }
  .card3d-image {
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: transform 50ms;
  }
  .card3d img {
    position: relative;
    border-radius: 5px;
    height: 430px;
  }
  .card3d-glare {
    display: block;
    background-image: radial-gradient(
      ellipse closest-side,
      hsla(0, 0%, 100%, .25),
      hsla(0, 0%, 100%, 0)
    );
    /* background: red; */
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  header {
    padding-bottom: 100px;
  }
  header h1 {
    font-size: 60px;
  }
  main {
    columns: 2;
    column-gap: 10px;
    padding: 5px 10px 30px;
  }
}
@media (min-width: 950px) {
  .back {
    left: 100px;
    top: 50px;
  }
  .card3d {
    float: none;
    display: inline-block;
    margin-right: 4%;
    top: 0;
  }
  .card3d img {
    height: 530px;
  }
  header aside {
    max-width: 500px;
    display: inline-block;
    font-size: 20px;
  }
  main {
    columns: 3;
    column-gap: 20px;
    padding: 10px 20px 50px;
  }
  main section {
    margin: 10px 0;
  }
}