*, 
*::before, 
*::after {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;  /* auto | thin | none */
  scrollbar-color: #D89300 #f1f1f1;  /* thumb track */
}

/* barra */
::-webkit-scrollbar-thumb {
  background: #D89300;
  border-radius: 8px;
}


html {
  scroll-behavior: smooth;
  height: auto;

  body {
    font-family: "Poppins", sans-serif;
    background: #EEEEEE;
    margin: 0;
    padding: 0;
    height: auto;

    .container {  
      display: grid; 
      grid-template-columns: 50px 1fr; 
      grid-template-rows: auto auto; 
      gap: 0px 0px; 
      grid-template-areas: 
        "bar top"
        "bar main"; 

      p {
        font-size: 14px;
        color: #000;

        @media screen and (min-width: 1920px) {
          font-size: 18px;
        }
      }

      h3 {
        font-size: 18px;
        color: #D89300;
        margin-top: 0;
        font-weight: 600;

        @media screen and (min-width: 1920px) {
          font-size: 22px;
        }
      }

      h4 {
        font-size: 16px;
        color: #000;
        margin-top: 0;
        font-weight: 400;

        @media screen and (min-width: 1920px) {
          font-size: 18px;
        }
      }

      .bar { 
        grid-area: bar; 
        background: #D89300;
        height: 100%;
      }

      .top {
        display: grid;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 110px auto;
        gap: 0;
        grid-auto-flow: row;
        grid-template-areas:          
          "header"
          "contact";
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        transition: height .3s ease;
        z-index: 1000;

        @media screen and (min-width: 1366px) {
          grid-template-columns: 400px 1fr;
          grid-template-rows: 200px;
          grid-template-areas:          
            "contact header";
        }

        @media screen and (min-width: 1920px) {
          grid-template-columns: 480px 1fr;
          grid-template-rows: 100%;
          height: 400px;          
        }

        .header {
          grid-area: header;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: flex-start;
          background: #EEEEEE;

          @media screen and (min-width: 1366px) {
            justify-content: space-between;
          }

          .menu {
            border: none;
            background-color: transparent;
            color: #000;
            cursor: pointer;
            margin-left: -42px;

            @media screen and (min-width: 1366px) {
              display: none;
            }

            &:hover {
              color: #565656;
            }
          }

          .title {
            background: #EEEEEE;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            margin-left: 20px;

            @media screen and (min-width: 1920px) {
              margin-left: 60px;
            }
            
            h1 {
              text-transform: uppercase;
              color: #000;
              font-size: 37px;
              font-weight: 600;
              letter-spacing: 1px;
              margin: 0;
              transition: font-size .3s ease;

              @media screen and (min-width: 1366px) {
                font-size: 60px;
              }

              @media screen and (min-width: 1920px) {
                font-size: 75px;
              }
            }

            h2 {
              text-transform: uppercase;
              color: #000;
              font-size: 20px;
              font-weight: 500;
              letter-spacing: 1px;
              margin: 0;
              transition: font-size .3s ease;

              @media screen and (min-width: 1366px) {
                font-size: 28px;
              }

              @media screen and (min-width: 1920px) {
                font-size: 38px;
              }
            }
          }

          nav {
            position: fixed;
            background: transparent;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0; 
            transform: translateX(100%);
            transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;

            @media screen and (min-width: 1366px) {
              position: relative;
              transform: none;
            }

            &.open {
              transform: translateX(50px);
              background: rgba(86, 86, 86, .8);
              transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease .3s;
            }

            ul {
              margin: 0;
              padding: 0;
              list-style: none;
              background: #fff;
              width: 80%;
              height: 100%;

              @media screen and (min-width: 768px) {
                width: 40%;
              }

              @media screen and (min-width: 1366px) {
                width: 100%;
                height: auto;
                background: transparent;
              }

              li {
                a {
                  text-decoration: none;
                  cursor: pointer;
                  display: block;
                  text-align: right;
                  text-transform: uppercase;
                  font-size: 14px;
                  font-weight: 500;
                  color: #000;
                  position: relative;
                  padding: 12px 20px 12px 0;
                  margin: 0 0 5px;

                  @media screen and (min-width: 1920px) {
                    font-size: 18px;
                  }

                  &:not(.current) {
                    &:hover {
                      color: #565656;
                    }
                  }                  

                  &:after {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 100%;
                    background: #D89300;
                    position: absolute;
                    right: 0;
                    top: 0;
                  }

                  &.current {
                    &:after {
                      background: #000;
                    }
                  }

                  &:not(.current) {
                    &:hover {
                      &:after {
                        background: #565656;
                      }
                    }
                  }                  
                }

                @media screen and (min-width: 1366px) {
                  &:last-child {
                    display: none;
                  }
                }
              }
            }
          }
        }

        .contact {
          grid-area: contact;
          background: #FFF;
          display: flex;
          flex-flow: column;
          align-items: flex-start;
          justify-content: center;
          padding: 10px 0 30px;

          .items {
            margin-left: -25px;

            p {
              .icon {
                margin-right: 10px;
              }

              a {
                color: #000;

                &:hover {
                  color: #565656;
                }
              }
            }          
          }

          .line {
            display: block;
            background: #000;
            height: 3px;
            width: 90%;
            margin-top: 10px;
            transition: margin-top .3s ease;

            @media screen and (min-width: 1366px) {
              width: 80%;
              margin-top: 30px;
            }
          }
        }

        &.shrink {
          height: 150px;
          transition: height .3s ease;

          .contact { 
            padding: 0;

            p {
              font-size: 14px;
              transition: font-size .3s ease;
            }

            .line {
              margin-top: 5px;
              transition: margin-top .3s ease;
            }
          }

          .header { 
            .title {            
              h1 {
                font-size: 50px;
                transition: font-size .3s ease;
              }

              h2 {
                font-size: 28px;
                transition: font-size .3s ease;
              }
            }

            nav {
              ul {
                li {              
                  a {
                    font-size: 14px;
                    padding: 7px 20px 7px 0;
                    margin: 2px 0;
                    transition: margin .3s ease, padding .3s ease, font-size .3s ease;
                  }
                }
              }
            }
          }

          ~ .main {
            .profile {
              grid-template-rows: minmax(0, 650px);
            }

            .professional {
              .experience {
                &:before {
                  background: #000;
                  transition: background .3s ease;
                }
              }
            }              
          }
        }   
      }

      .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 40px;
        gap: 0;
        grid-auto-flow: row;
        grid-template-areas:
          "profile"
          "professional"
          "education"
          "footer";
        grid-area: main;
        margin: 0;
        padding: 0;   

        .profile {  
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 0;
          grid-auto-flow: row;
          grid-template-areas:
            "photo" 
            "about";
          grid-area: profile;
          margin: 0;

          @media screen and (min-width: 1366px) {
            grid-template-columns: 400px 1fr;
            grid-template-rows: auto;
            grid-template-areas:
              "photo about";
          }

          @media screen and (min-width: 1920px) {            
            grid-template-columns: 480px 1fr;
            grid-template-rows: calc(100vh - 400px);
          }

          .photo { 
            background: #EEEEEE;
            grid-area: photo; 
            overflow: hidden;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: flex-end;

            img {
              height: 100%;
              width: auto;

              @media screen and (min-width: 768px) {
                height: auto;
                width: 100%;
              }
            }
          }

          .about { 
            grid-area: about; 
            background: #FFF;
            padding: 40px 20px;
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            justify-content: center;

            @media screen and (min-width: 1920px) {
              padding: 60px;
            }

            p {
              font-size: 16px;
              line-height: 28px;
              margin: 15px 0;

              @media screen and (min-width: 1920px) {  
                font-size: 20px;
                line-height: 34px;
                margin: 20px 0;
              }
            }
          }
        }  
        
        .professional {  
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 0;
          grid-auto-flow: row;
          grid-template-areas:
            "skills" 
            "experience";
          grid-area: professional;
          margin: 0;

          @media screen and (min-width: 1366px) {
            grid-template-columns: 400px 1fr;
            grid-template-areas:
              "skills experience";
          }

          @media screen and (min-width: 1920px) {
            grid-template-columns: 480px 1fr;
          }

          .skills { 
            grid-area: skills; 
            padding: 40px 20px;

            @media screen and (min-width: 1920px) {
              padding: 60px 40px;
            }

            .competencies {      
              ul {
                margin: 0;
                padding: 0;
                list-style-position: inside;
              }
            }

            .graphic {
              margin-top: 50px;

              ul {
                margin: 0;
                padding: 0;
                list-style: none;

                li {
                  display: flex;
                  flex-flow: column;
                  align-items: flex-start;
                  justify-content: flex-start;

                  p {
                    margin-bottom: 5px;
                    font-weight: 600;
                  }

                  div {
                    > * {
                      color: #D89300;
                    }
                  }
                }
              }
            }
          }

          .experience { 
            grid-area: experience; 
            background: #FFF;
            padding: 40px 20px;
            position: relative;
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            justify-content: flex-start;

            @media screen and (min-width: 1920px) {
              padding: 60px;
            }

            h3 {
              margin-bottom: 40px;              
            }

            &:before {
              content: "";
              display: block;
              height: 3px;
              width: 96%;
              background: transparent;
              position: absolute;
              top: -3px;
              right: 0;  
              transition: background .3s ease;
            }

            .job {
              width: 100%;
              display: flex;
              flex-flow: row wrap;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 40px;

              @media screen and (min-width: 1920px) {
                margin-bottom: 60px;
              }

              h3 {
                color: #000;
              }
              
              h4 {
                font-weight: 600;
                margin: 5px 0 0;
              }

              > div {
                display: flex;
                flex-flow: column;
                align-items: flex-start;
                justify-content: flex-start;

                h3 {
                  margin-bottom: 5px;
                }

                h4 {
                  font-weight: 400;
                  margin: 0;
                }
              }              
            }

            .job-description {
              p {
                font-size: 16px;
                line-height: 28px;
                margin: 15px 0;

                @media screen and (min-width: 1920px) {
                  font-size: 20px;
                  line-height: 34px;
                  margin: 20px 0;
                }
              }              
            }            
          }          
        }

        .education {  
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 0;
          grid-auto-flow: row;
          grid-template-areas:            
            "university"
            "languages";
          grid-area: education;
          margin: 0;

          @media screen and (min-width: 1366px) {
            grid-template-columns: 400px 1fr;
            grid-template-areas:
              "languages university";
          }

          @media screen and (min-width: 1920px) {
            grid-template-columns: 480px 1fr;
          }

          .languages { 
            grid-area: languages; 
            background: #FFF;
            padding: 40px 20px;

            @media screen and (min-width: 1920px) {
              padding: 60px 40px;
            }

            ul {
              margin: 0;
              padding: 0;
              list-style: none;

              li {
                display: flex;
                flex-flow: column;
                align-items: flex-start;
                justify-content: flex-start;
                margin-bottom: 15px;

                p {
                  margin-bottom: 5px;
                  font-weight: 600;
                  display: flex;
                  flex-flow: row nowrap;
                  align-items: center;
                  justify-content: flex-start;

                  img {
                    margin-right: 8px;
                  }
                }

                div {
                  > * {
                    color: #D89300;
                  }
                }
              }
            }
          }

          .university { 
            grid-area: university; 
            padding: 40px 20px;
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            justify-content: flex-start;
            position: relative;

            @media screen and (min-width: 1920px) {
              padding: 60px;
            }

            h2 {
              font-size: 30px;
              font-weight: 600;
              margin-bottom: 5px;

              @media screen and (min-width: 1920px) {
                font-size: 35px;
              }
            }

            h4 {
              font-size: 20px;

              @media screen and (min-width: 1920px) {
                font-size: 22px;
              }
            }

            p {
              font-size: 16px;
              line-height: 28px;
              margin: 15px 0;

              @media screen and (min-width: 1920px) {
                font-size: 20px;
                line-height: 34px;
                margin: 20px 0;
              }
            }
          }
        }  

        .footer { 
          grid-area: footer; 
          text-align: center;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;

          a {
            cursor: pointer;
            color: #D89300;

            &:hover {
              color: #565656;
            }
          }
        }
      }

      .scrollToTop {
        position: fixed;
        bottom: 5px;
        right: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        color: #D89300;
        opacity: 0;
        transition: opacity .3s ease, color .3s ease;

        @media screen and (min-width: 1920px) {
          bottom: 30px;
          right: 30px;
        }

        &:hover {
          color: #565656;
          transition: opacity .3s ease, color .3s ease;
        }
      }
    }
  }
}