@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
:root {
  --kj-yellow: #e7b041;
  --kj-violet: #7f1f7d;
  --kj-cyan: #78babd;
  --kj-graphite: #322446;
  --kj-blue: #2189f7;
  --kj-purple: #b70f50 ;
}

body {
  font-family: "Source Sans 3", Tahoma, Geneva, Verdana, sans-serif;
  font-style: normal;
  font-size: 14pt;
}

#main-content-wrapper {
  margin-top: 3rem;
}

#base-info {
  margin: 5rem 0;
}
#base-info h2 {
  margin-bottom: 1.3rem;
}
#base-info address {
  font-style: normal;
}
#base-info address p {
  background-repeat: no-repeat;
  padding-left: 48px;
}
#base-info address .email {
  background-image: url("../images/mail.png");
}
#base-info address .telefon {
  background-image: url("../images/call.png");
}
#base-info address .adres {
  background-image: url("../images/pin.png");
}
#base-info h2 {
  border-bottom: 1px solid lightgray;
}
#base-info ul {
  padding-left: 0.3rem;
  line-height: 1.6em;
}
#base-info ul li {
  list-style-type: none;
}
#base-info ul li span {
  display: inline-block;
  margin-left: 0.8em;
  text-align: right;
}

#decor img {
  width: 100%;
  height: auto;
}

#identification h1 {
  font-family: Montserrat, sans-serif;
  font-size: 26pt;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.8em;
  padding: 0.1em 0 0 0.4em;
  letter-spacing: 0.3em;
  border-left: 2px solid #322446;
  color: #322446;
}
#identification h1 .name-minor {
  font-size: 16pt;
  font-weight: 200;
}

.motto {
  margin: 1.6em 0.6em;
}
.motto blockquote {
  font-style: italic;
  font-weight: 200;
  font-size: 20pt;
  text-align: center;
}
.motto figcaption {
  text-align: center;
}

.skill {
  text-align: center;
  color: #fff;
}
.skill img {
  display: block;
  margin: 0 auto;
  padding-bottom: 1.6em;
}
.skill p {
  padding: 2rem;
  margin: 0;
  width: 100%;
  height: 100%;
}

.skill-1 p {
  background-color: var(--kj-yellow);
}

.skill-2 p {
  background-color: var(--kj-violet);
}

.skill-3 p {
  background-color: var(--kj-cyan);
}

.skill-4 p {
  background-color: var(--kj-graphite);
}

.skill-5 p {
  background-color: var(--kj-blue);
}

.skill-6 p {
  background-color: var(--kj-purple);
}

footer {
  height: 4rem;
  margin-top: 3rem;
  background-color: #fff;
}

@media screen and (min-width: 576px) {
  #identification h1 {
    font-size: 36pt;
    margin-top: 0.2em;
    margin-left: 0.4em;
  }
  #identification h1 .name-minor {
    font-size: 19pt;
  }
}
@media screen and (min-width: 768px) {
  #identification h1 {
    font-size: 50pt;
    margin-top: 0.2em;
    margin-left: 0.4em;
  }
  #identification h1 .name-minor {
    font-size: 30pt;
  }
}
@media screen and (min-width: 992px) {
  #identification h1 {
    font-size: 56pt;
    margin-top: 0.4em;
    margin-left: 0.4em;
  }
  #identification h1 .name-minor {
    font-size: 36pt;
  }
}
@media screen and (min-width: 1200px) {
  #identification h1 {
    font-size: 66pt;
    margin-top: 0.8em;
    margin-left: 0.4em;
  }
  #identification h1 .name-minor {
    font-size: 36pt;
  }
}

/*# sourceMappingURL=main.css.map */