html {
  scroll-behavior: smooth;
  font-size: 100%;
}

a.target {
  position: absolute;
  left: 0;
  top: -100px;
}

.btn {
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  max-width: 200px;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border: 2px solid #007599;
  color: #007599;
}

a {
  text-decoration: none;
  color: inherit;
}

.workContent {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  width: 100%;
}
.workContent span {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
  color: #333;
  font-weight: 300;
}
.workContent span:first-of-type {
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
  font-weight: 400;
}
.workContent span:last-of-type {
  font-size: 0.9rem;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  padding-top: 1px;
  color: #000033;
}
body * {
  box-sizing: border-box;
}

.header {
  background: #00a393;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
}
.header #titleImg {
  width: calc(2rem + 100%);
  height: 100%;
  position: absolute;
  left: -2rem;
  background: linear-gradient(45deg, #007599 0%, #009687 100%);
  opacity: 0.45;
  z-index: 0;
  animation: showHeaderImage 3s;
}
.header#fullScreenHeader {
  height: 100vh;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  top: 0;
  background-image: url("./assets/img/titleImg.png");
  background-size: cover;
  background-position: center;
}
.header#fullScreenHeader #iam {
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 5rem;
  animation: appear 2s forwards;
  line-height: 1.2;
  color: #ffffff;
  width: 100%;
  max-width: 1400px;
  margin: 2rem auto 1rem;
  transform-origin: 0%;
}
.header#fullScreenHeader .chip-text {
  display: flex;
  position: relative;
  transition: opacity 0.2s;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  opacity: 0;
  flex-wrap: wrap;
}
.header#fullScreenHeader .chip-text.fadeOut {
  animation: fadeOut 0.2s forwards;
}
.header#fullScreenHeader .chip-text:not(.fadeOut) {
  opacity: 1;
  animation: appear 0.5s forwards;
}
.header#fullScreenHeader .chip-text span {
  margin: 0 0.3rem 0.5rem 0;
  opacity: 0.7;
  background: #ffffff;
  color: #000033;
  font-weight: 800;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: background-color 1s 0.5s;
}
.header#smallHeader {
  padding: 1.5rem 2rem 1rem;
  color: #ffffff;
  display: none;
  animation: fadeIn 0.7s;
  background: linear-gradient(45deg, #007599 0%, #009687 100%);
}
.header#smallHeader .naviWrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
}
.header#smallHeader #titleImg {
  height: calc(100% + 2rem);
}
.header#smallHeader span,
.header#smallHeader .navi {
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  align-items: flex-end;
  z-index: 1;
}
.header#smallHeader span a,
.header#smallHeader .navi a {
  margin: 0 1rem 0 0;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}
.header#smallHeader span a.active, .header#smallHeader span a:hover,
.header#smallHeader .navi a.active,
.header#smallHeader .navi a:hover {
  border-bottom-color: #ffffff;
}
.header#smallHeader .logo {
  font-size: 2rem;
  font-weight: 400;
  padding-bottom: 0.2rem;
  margin-right: 2rem;
}

h1 {
  font-size: 3rem;
  margin: 3rem 0 2rem;
  color: #000033;
  font-weight: 400;
  width: 100%;
}

h2 {
  font-size: 2rem;
  font-weight: 400;
  background: linear-gradient(45deg, #007599 0%, #009687 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 1rem;
}
h2 .h2line {
  width: 40px;
  height: 5px;
  background: #007599;
  position: absolute;
  margin-left: -45px;
  margin-top: 1rem;
}

.content {
  width: 100%;
  max-width: 1400px;
  padding: 0 2rem;
  margin: 6rem auto 0;
}
.content .contentBox {
  width: 100%;
  position: relative;
}
.content #personalBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.content #personalBox > img {
  margin-right: 2rem;
  border-radius: 50%;
  border: 7px solid #007599;
  object-fit: cover;
  width: 200px;
  height: 200px;
}
.content #personalBox span {
  font-size: 1.3rem;
  font-weight: 300;
}
.content #personalBox .socialBox {
  margin: 1rem 0;
  width: 100%;
  display: flex;
}
.content #personalBox .socialBox img {
  max-height: 30px;
  margin: 0 1rem 0 0;
}
.content #contactBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}
.content #contactBox .contactWrapper {
  margin: 0 3rem 2rem 0;
}
.content #contactBox .contactWrapper a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content #contactBox .contactWrapper img {
  max-height: 65px;
  margin-bottom: 1rem;
}
.content .workGrid {
  display: grid;
  grid-template-columns: 53px 1fr;
  font-family: "Roboto";
}
.content .workGrid #line {
  width: 5px;
  height: 100%;
  background: linear-gradient(344deg, rgba(74, 193, 166, 0) 0%, #4ac1a6 10%, #0012ff 90%, rgba(0, 18, 255, 0) 100%);
  margin-left: 50px;
}
.content .workGrid .workWrapper {
  width: 100%;
  margin: 1rem 0;
}
.content .workGrid .workWrapper .workBox {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  position: relative;
  left: -50px;
}
.content .workGrid .workWrapper .workBox .bubble {
  width: 100px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: purple;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  stroke: white;
}
.content .workGrid .workWrapper .workBox .bubble.small {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  margin-right: calc(10px + 2rem);
}
.content .workGrid .workWrapper .workBox .bubble.work {
  background: linear-gradient(#217ec2, #1468cc);
}
.content .workGrid .workWrapper .workBox .bubble.study {
  background: linear-gradient(#4ac1a2, #3eadac);
}
.content .workGrid .workWrapper .workBox .bubble.eng {
  background: linear-gradient(344deg, #4ac1a6 0%, #00fffc 100%);
}
.content .workGrid .workWrapper .workBox .bubble img {
  width: 100%;
  max-width: 55px;
}
.content .workExamples {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-row: 1fr;
  grid-gap: 2rem;
  flex-wrap: wrap;
  font-family: "Roboto";
  color: #333;
}
.content .workExamples .projectBox {
  border-radius: 5px;
  width: 100%;
  border: 1px solid lightgray;
  transition: all 0.3s;
  cursor: pointer;
}
.content .workExamples .projectBox:hover {
  transform: scale(1.01);
}
.content .workExamples .projectBox .imgWrapper {
  width: 100%;
  height: 10rem;
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid darkcyan;
  background-repeat: no-repeat;
}
.content .workExamples .projectBox .exampleContent {
  margin: 1rem;
}
.content .workExamples .projectBox .exampleContent .exampleTitle {
  font-size: 1.3rem;
  font-weight: 500;
}
.content .workExamples .projectBox .exampleContent .smallText {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 0.9rem;
  margin-top: 0.5rem;
  width: 100%;
  display: block;
}
.content .workExamples .projectBox .exampleContent .exampleChips {
  display: flex;
  flex-wrap: wrap;
}
.content .workExamples .projectBox .exampleContent .exampleChips span {
  margin-left: 0;
}
.content .exampleChips {
  margin: 1rem 0 0 0;
  display: flex;
  align-items: center;
}
.content .exampleChips span {
  font-size: 1rem;
  padding: 0.3rem;
  margin: 0.2rem 0.4rem;
  background: #c8e6e6;
  border-radius: 5px;
}
.content .qualiWrapper {
  display: grid;
  grid-column-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}
.content .qualiWrapper .scaleBox {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}
.content .qualiWrapper .scaleBox .title {
  font-family: "Roboto";
  margin-left: 1rem;
}
.content .qualiWrapper .scaleBox .title.infoTitle {
  color: darkgrey;
  font-size: 1rem;
}
.content .qualiWrapper .scaleBox .title:not(.infoTitle) {
  font-size: 1.4rem;
  color: #000034;
}
.content .qualiWrapper .scaleBox .title.bold {
  font-weight: 500;
}
.content .qualiWrapper .scaleBox .title:not(.bold) {
  font-weight: 300;
}
.content .qualiWrapper .scaleBox .scale {
  display: flex;
}
.content .qualiWrapper .scaleBox .scale span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 2px;
  box-sizing: border-box;
}
.content .qualiWrapper .scaleBox .scale span.info {
  background: lightgray;
}
.content .qualiWrapper .scaleBox .scale span.colored {
  background: #4ac1a2;
}
.content .qualiWrapper .scaleBox .scale span.colored:nth-of-type(4) {
  background: linear-gradient(#4ac1a2, #3eadac);
}
.content .qualiWrapper .scaleBox .scale span.colored:nth-of-type(3) {
  background: linear-gradient(#3eadac, #2f95b7);
}
.content .qualiWrapper .scaleBox .scale span.colored:nth-of-type(2) {
  background: linear-gradient(#2f95b7, #217ec2);
}
.content .qualiWrapper .scaleBox .scale span.colored:nth-of-type(1) {
  background: linear-gradient(#217ec2, #1468cc);
}
.content .qualiWrapper .scaleBox .scale span:not(.colored) {
  border: 2px solid lightgray;
}
.content .qualiWrapper .scaleBox span {
  font-size: 2rem;
  color: #000033;
  font-weight: bold;
}

@keyframes appear {
  0% {
    opacity: 0;
    top: 40px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showHeaderImage {
  0% {
    opacity: 1;
  }
}
#footer {
  background: #00a393;
  background: linear-gradient(45deg, #007599 0%, #009687 100%);
  /* background: -moz-linear-gradient(45deg, #00A393 0%, #007DA4 22%, #5C00C5 100%);
   background: -webkit-linear-gradient(45deg, #00A393 0%, #007DA4 22%, #5C00C5 100%);
  */
  width: 100%;
  padding: 2rem 0;
  color: #ffffff;
  margin: 1rem 0 0;
}
#footer .content {
  margin-top: 0;
}
#footer .content a {
  margin-right: 2rem;
}
#footer .content span {
  float: right;
}

@media (max-width: 750px) {
  html {
    font-size: 100%;
  }

  .content #personalBox {
    flex-direction: column;
    margin-right: 0;
  }
  .content #personalBox img {
    margin-bottom: 2rem;
  }

  .header#smallHeader .logo {
    display: none;
  }
}
.angularLogo {
  width: 100%;
  max-width: 1040px;
  padding: 0 2rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #eaeaea;
  padding-bottom: 4rem;
}
.angularLogo .exampleWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-row: 1fr;
  grid-gap: 2rem;
}
.angularLogo .exampleWrapper img {
  max-width: 300px;
}
.angularLogo img {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: 500px) {
  .header#fullScreenHeader #iam {
    font-size: 4rem;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 16px;
  }
}

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