:root {
  --a: #101011;
  --b: #ebebd3;
  --c: #da4167;
  --d: rgb(0, 91, 110);
  --e: rgb(0, 147, 177);
  --default-box-shadow: 10px 10px 20px 0px var(--b);
  --default-text-shadow: 10px 10px 20px var(--b);
  --default-border: solid 3px var(--b);
  height: 100%;
}

head {
  display: none;
}

/* https://greggod.medium.com/css-do-not-put-height-100-on-the-body-html-e36bda3551b3 */
body {
  background-color: white;
  font-family: monospace;
  margin: 0;
}

.landing-page {
  height: 100vh;
  align-content: center;
}

/* Header */

.header {
  position: fixed;
  top: 0;
  padding: 3vh 4vw 0 0;
  text-align: right;
}

.header a {
  margin: 0 1vw;
}

.header a:last-child {
  margin-right: 0;
}

/* Title */

.landing-page .title {
  font-size: calc(30px + 7vw);
  padding: 0 1rem;
  text-align: center;
  position: relative;
  line-break: normal;
  top: -4vh;
}

.subtitle {
  font-size: calc(12px + 2.3vw);
  text-align: center;
  position: relative;
  padding: 0 5vw;
}

/* Footer */

.footer {
  text-align: center;
  position: relative;
  top: 8rem;
}

.footer .link {
  font-size: calc(13px + 1.7vw);
  color: var(--a);
  margin: 0 20px;
  position: relative;
}

.icons {
  padding: 17px 0 0 0;
}

.icons i {
  margin: 0 10px;
}

a {
  font-size: clamp(25px, 3.5vw, 4rem);
  text-decoration: none;
}

.github-color {
  color: #2b3137;
}

.linkedin-color {
  color: #0a66c2;
}

.about-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 4.2vw 2vh 0;
}

.about-btn i {
  cursor: pointer;
}

/* About Section */

.about {
  height: 100vh;
  padding: 13vh 10vw;
}

.section-title {
  cursor: default;
  font-size: clamp(30px, 4vw, 4rem);
  margin-bottom: 3vh;
}

.experience {
  display: flex;
  margin-bottom: 7vh;
}

.date {
  font-size: clamp(15px, 1.8vw, 2rem);
  padding-right: 3vw;
  white-space: nowrap;
}

.experience .content .title {
  font-size: clamp(15px, 1.8vw, 2rem);
  font-weight: 700;
  text-decoration: none;
}

.experience .content .title p {
  margin: 0 0.5vw 0 0;
  display: inline;
}

.experience .content .title i {
  transform: rotate(-45deg);
  transition: transform 0.3s;
}

.experience .content .title:hover i {
  transform: rotate(-45deg) translate(0.4vw, 0);
}

.notes {
  font-size: clamp(11px, 1.6vw, 2rem);
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.skills {
  font-size: clamp(11px, 1.6vw, 2rem);
  font-weight: 700;
  color: var(--c);
}

/* Media rules */

@media screen and (max-width: 400px) {
  .title {
    line-break: anywhere !important;
  }
}