.intro-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  margin-top: 10vh;
}

.cartoon-wrapper {
  position: relative;
  display: inline-block;

  width: 80%;
  min-width: 30vw;
  height: auto;

  border-radius: 20px;

  margin: 5% 10% 0 5%;
}

.cartoon-me {
  width: 100%;

  border-radius: 20px;

  margin: 5% 0 0 10%;
}

.me {
  position: absolute;
  display: none;

  width: 100%;

  border-radius: 20px;

  margin: 5% 0 0 10%;
}

.cartoon-wrapper:hover .me {
  display: block;
}

.instruct {
  position: relative;

  font-family: pixelify sans, Arial;
  font-size: 20px;
  color: white;

  left: 70px;
  bottom: 70px;
}

.text-content {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.subtitle {
  font-family: Pixelify Sans, Arial;
  font-weight: 500;
  font-size: 6vw;
  line-height: 0.5;

  flex-wrap: wrap;
  text-align: left;

  margin-right: 10%;
}

.desc {
  font-family: Tahoma;
  text-align: left;
  font-size: 1.8vw;

  margin: 5% 10% 0 0;
}

.hobby-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10%;
  row-gap: 10%;

  padding: 0;

  margin: 0 5%;
}

.hobbies {
  font-family: Pixelify Sans, Arial;
  text-align: left;
  font-weight: 400;

  margin-bottom: 30px;
}

.hobby-box, .hobby-box2 {
  border: 4px solid rgb(103, 184, 255);
  border-radius: 20px;
  max-width: calc(50vw - 25%);
  max-height: 400px;
  box-sizing: border-box;
  content: fill;

  margin-bottom: 20px; 

  transition: transform 0.3s ease;
}

.hobby-box:hover{
  transform: scale(1.1) rotate(10deg);
}

.hobby-box2:hover{
  transform: scale(1.1) rotate(-10deg);
}

.caption {
  font-family: Tahoma;
  font-size: 2vw;
  line-height: 1;
  text-align: left;

  margin: 0;
}

.experience {
  font-family: Pixelify Sans, Arial;
  background-color: rgb(255, 238, 82);
  padding: 25px;

  margin-top: 3vh;
}

.experience.dark {
  background-color: rgb(32, 56, 30);
}
.experience-title {
  font-weight: 500;
  font-size: 6vw;
  line-height: 0.5;
  text-align: left;

  margin: 3% 0 0 5%;
}

.experience-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  vertical-align: top;
  column-gap: 10vw;

  margin: 0 5%;
}

.job-name, .job-time {
  font-size: 4vw;

  margin: 5vw 0 1vw 0;
}

.job-desc {
  font-family: tahoma;
  font-weight: 500;
  font-size: 2vw;

  margin-bottom: 1vw;
}