/* TODO:
 - make accessible on different screen sizes
 */

 body {
     margin: 0;
     padding: 0;
     background-color: hsl(218, 100%, 93%);
     max-width: 100vw;
     overflow-x: hidden;
     font-family: 'IBM Plex Mono', monospace;
 }

 /* Layout */
 main {
     width: 80%;
     margin: 0 auto;
     transition: transform 0.4s ease;
     box-sizing: border-box;
 }

 .off-screen-menu.active~main {
     margin: 0;
     transform: translateX(300px);
     /* slide right to reveal drawer */
 }

 .top {
     margin-top: 33px;
 }

 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 2.5%;
     color: hsl(26 100% 69%);
     font-family: 'Doto', sans-serif;
 }

 header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
     padding: 20px;
 }

 .header-text {
     display: flex;
     gap: 10px;
     flex-direction: column;
     align-items: flex-start;
     margin-top: 20px;
 }

 /* Headings */
 header h1 {
     margin-top: 33px;
     font-family: "Josefin Sans", sans-serif;
     font-size: clamp(2rem, 8vw, 70px);
     margin: 0;
     white-space: nowrap;
     color: hsl(218, 65%, 28%);
 }

 h2 {
     font-family: "Josefin Sans", sans-serif;
     color: hsl(218, 65%, 28%);
     text-decoration: underline;
     text-underline-offset: 8px;
     text-decoration-color: hsl(26 100% 69%);
     transition: text-decoration-color 0.3s ease;
 }

 a:hover h2 {
     text-decoration-color: hsl(0, 0%, 100%);
 }

 h3 {
     font-size: clamp(1rem, 3vw, 30px);
     margin: 0;
 }

 /* Text */
 .text {
     padding: 4%;
     font-size: 24px;
     text-align: left;
     color: hsl(0, 0%, 0%);
 }

 .text strong {
     color: hsl(218, 65%, 28%);
 }

 .contact-link {
     color: hsl(26 100% 69%);
     text-decoration: none;
 }

 .contact-link:hover {
     text-decoration: underline;
 }

 /* Borders */
 .border {
     position: relative;
     margin-top: 13px;
     height: 66px;
 }

 .blueborder {
     top: auto;
     right: 0;
     /* align to right */
     width: 1700px;
     height: 33px;
     margin-left: auto;
     margin-bottom: 33px;
     margin-right: -50vw;
     z-index: 2;
     background-color: hsl(218, 65%, 28%);
     border-radius: 16px 0 0 16px;
 }

 .orangeborder {
     top: auto;
     left: 0;
     /* align to left  */
     width: 1500px;
     height: 33px;
     background-color: hsl(26 100% 69%);
     height: 33px;
     margin-left: -50vw;
     margin-right: auto;
     z-index: 2;
     border-radius: 0 16px 16px 0;
 }

 .whiteborder {
     height: 33px;
     margin-bottom: 33px;
     background-color: white;
     position: relative;
     z-index: 1;
     border-radius: 16px 16px 16px 16px;
 }

 .orange2border {
     height: 33px;
     margin-bottom: 33px;
     background-color: hsl(26 100% 69%);
     position: relative;
     z-index: 1;
     border-radius: 16px 16px 16px 16px;
 }

 .animate-on-scroll {
     opacity: 0;
     transform: translateY(20px);
     transition: transform 0.8s ease, opacity 0.8s ease;
 }

 .blueborder .animate-on-scroll {
     transform: translateX(-100%);
 }

 .orangeborder .animate-on-scroll {
     transform: translateX(100%);
 }

 .animate-on-scroll.visible {
     opacity: 1;
     transform: translateX(0) translateY(0);
 }

 /* Images */
 img.profile-pic {
     float: right;
     margin: 25px 50px 75px 50px;
     width: 40vw;
     height: 40vw;
     max-width: 350px;
     max-height: 350px;
     object-fit: cover;
     border-radius: 50%;
     border: 5px solid hsl(26 100% 69%);
     transition: transform 0.3s ease-in-out;
 }


 img.CTG {
     float: right;
     margin: 25px 50px 75px 50px;
     width: 20vw;
     height: 20vw;
     max-width: 300px;
     max-height: 300px;
     object-fit: cover;
     border-radius: 50%;
     border: 5px solid hsl(26 100% 69%);
     transition: transform 0.3s ease-in-out;
 }

 img.climb-img {
     float: right;
     margin: 25px 50px 75px 50px;
     width: 20vw;
     height: 20vw;
     max-width: 300px;
     max-height: 300px;
     object-fit: cover;
     border-radius: 50%;
     border: 5px solid hsl(26 100% 69%);
     transition: transform 0.3s ease-in-out;
 }

 .pdf {
     margin-top: 150px;
     display: block;
     margin: 0 auto;
 }

 /* Footer */
 footer {
     color: hsl(218, 65%, 28%);
     font-family: 'Doto', sans-serif;
     text-align: center;
     padding: 20px 0;
     margin-bottom: 25px;
     font-size: 18px;
 }

 .contact {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
 }

 .logo-button {
     font-size: 33px;
     color: hsl(218, 65%, 28%);
     text-decoration: none;
     transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
 }

 .logo-button:hover {
     color: hsl(26 100% 69%);
     transform: translateY(-5px) scale(1.1);
 }

 /* Collapsibles */
 .collapsible {
     background-color: hsl(218, 100%, 93%);
     color: hsl(218, 65%, 28%);
     cursor: pointer;
     padding: 18px;
     width: 100%;
     border: none;
     text-align: left;
     outline: none;
     font-family: 'Josefin Sans', sans-serif;
     font-size: 32px;
     transition: background-color 0.3s ease;
 }

 .collapsible:after {
     content: '\002B';
     /* plus */
     font-size: 50px;
     color: hsl(26 100% 69%);
     float: right;
     margin-left: 5px;
 }

 .collapsible.active:after {
     content: "\2212";
     /* minus */
 }

 .content {
     max-height: 0;
     overflow: hidden;
     padding: 0 18px;
     transition: max-height 0.3s ease;
     background-color: hsl(218, 100%, 93%);
 }

 /* Hamburger Menu */
 .off-screen-menu {
     background-color: hsl(218, 65%, 28%);
     height: 100vh;
     width: 100%;
     max-width: 300px;
     position: fixed;
     top: 0;
     left: -300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 2rem;
     transition: 0.4s ease;
     z-index: 1000;
 }

 .off-screen-menu.active {
     left: 0;
 }

 .off-screen-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .off-screen-menu li {
     margin: 20px 0;
 }

 .off-screen-menu a {
     color: white;
     text-decoration: none;
     font-family: "Josefin Sans", sans-serif;
 }

 .off-screen-menu a:hover {
     color: hsl(218, 94%, 87%);
 }

 .ham-menu {
     height: 50px;
     width: 50px;
     position: fixed;
     top: 20px;
     left: 20px;
     background-color: hsl(218, 100%, 93%);
     z-index: 1100;
     cursor: pointer;
     outline: 0px solid hsl(218, 100%, 93%);
     border-radius: 4px;
     outline: none;
     border: none;
     /* remove default border */
 }

 .ham-menu::-moz-focus-inner {
     border: 0;
     /* remove Firefox inner border */
 }

 .ham-menu span {
     height: 5px;
     width: 70%;
     background-color: hsl(218, 65%, 28%);
     border-radius: 25px;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     transition: 0.4s ease;
 }

 .ham-menu span:nth-child(1) {
     top: 25%;
 }

 .ham-menu span:nth-child(2) {
     top: 50%;
 }

 .ham-menu span:nth-child(3) {
     top: 75%;
 }

 .ham-menu.active {
     background-color: hsl(218, 65%, 28%);
     outline: solid hsl(218, 100%, 93%);
 }

 .ham-menu.active span {
     background-color: white;
 }

 .ham-menu.active span:nth-child(1) {
     top: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
 }

 .ham-menu.active span:nth-child(2) {
     opacity: 0;
 }

 .ham-menu.active span:nth-child(3) {
     top: 50%;
     transform: translate(-50%, -50%) rotate(-45deg);
 }