/*****************************
* RESUMÉ
*****************************/

/* Fade in content */
.fade-in-up-section {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

.fade-in-up-section.visible {
     opacity: 1;
     transform: translateY(0);
}

.fade-in-up-content {
     padding: 20px;
     border-radius: 5px;
     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

/* Career meta-information */
.meta-icons {
     font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
     font-family: var(--secondary-font);
     font-weight: 900;
     color: var(--tertiary-colour);
     text-align: left;
     display: flex;
     justify-content: left;
     gap: 25px;
     width: fit-content;
     margin: 0;

     & .md-typeset .twemoji {
          height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
     }

     & svg {
          margin-right: 3px;
     }

     a:hover {
          color: var(--secondary-colour);
     }
}

/* Career timeline */
.tabbed-labels {
     font-family: var(--number-font);
     font-weight: 900;
     margin-bottom: 0;

     a:hover {
          color: var(--secondary-colour);
     }

     label {
          font-size: max(calc(var(--text-variable-size) + 9px), calc(var(--text-min-size) + 3px)) !important;
     }

     >label:nth-child(1) {
          margin-left: 4vw;
     }

     >label:nth-child(2) {
          margin-left: 12vw;
     }

     >label:nth-child(3) {
          margin-left: 24vw;
     }

     >label:nth-child(4) {
          margin-left: 12vw;
     }

     >label:nth-child(5) {
          margin-left: 10vw;
     }
}

.tabbed-content {
     background-color: var(--quarternary-colour);
     margin-top: 0;
}

div.tabbed-block {
     padding: 1em 2.5em;
}

/* Timeline content */
.logo-and-title {
     display: inline-block;
     margin: 0;

     img {
          height: max(15px, 0.5vh);
          margin-right: 10px;
     }

     h6 {
          display: inline-block;
          margin-right: 5px;
     }
}

div.tags {
     font-family: var(--primary-font);
     font-size: max(var(--text-variable-size), var(--text-min-size));
     font-style: italic;
     color: var(--tertiary-colour);
     margin: 0;
     padding: 0;
}

.three-column {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     max-width: 1500px;
     padding: 0;
     width: 100%;

     .column {
          justify-self: center;
          padding: 20px;
          text-align: left;

          &:nth-child(1) {
               padding-left: 0;
          }

          &:nth-child(2) {
               border-left: 1px solid var(--secondary-colour);
               border-right: 1px solid var(--secondary-colour);
          }

          .content {
               h6 {
                    font-size: max(calc(var(--text-variable-size) + 7px), calc(var(--text-min-size) + 2px));
                    font-family: var(--secondary-font);
                    margin-bottom: 8px;
               }
          }
     }
}

p.blurb {
     font-family: var(--primary-font);
     font-size: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
     margin-top: 25px;
}

/* Portfolio */
.grid.cards {

     li {
          background-color: var(--quarternary-colour);
          border: none !important;
          border-radius: 5px !important;
          box-shadow: none !important;
          padding: 2em !important;
          margin: 2em !important;


          h6 {
               span {
                    margin-right: 3px;
               }
          }

          &:hover {
               box-shadow: none !important;
               border: none !important;
               transition: none !important;
          }
     }
}

.writing {
     padding: 4em;

     h6 {
          margin-bottom: 8px;
     }
}

.two-column {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     max-width: 1500px;
     padding: 20px 20px 20px 0;
     width: 100%;
     margin: 10px auto;

     .column {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 20px;
          text-align: left;

          .content {
               display: flex;
               flex-direction: column;
               justify-content: center;
               height: 100%;
          }
     }
}

/* Contact */

div.contact-me {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;

     div.button {
          font-size: 1.8em;
          color: var(--tertiary-colour);
          border: none;

          &:hover {
               color: var(--secondary-colour);
          }
     }
}