:root{

      font-family: avenir-next-lt-pro, sans-serif;
      font-size: 16px;
      line-height: 1.4rem;
      color: var(--main);

      /* fonts */

          --font: avenir-next-lt-pro, sans-serif;
          --font-2: mixta-sharp-alt, serif;
          --font-3: avenir-next-lt-pro-condensed, sans-serif;
          --font-code: logic-monospace, lucida-console-w1g, monospace;

      /* colors */

          --c-text: #3b3b3b;

          --c-bg: #f9f4eb;

          --c-main: #3b3b3b;
          --c-main-accent: #c8b78a;
          --c-light-accent: #ffc099;
          --c-dark-accent: #204147;
          --c-dark-accent2: #7C7A78;

          --c-border: var(--c-main-accent);

      /* images */

          --icon_envelope: url(../img/icons/envelope.png);

    }


@layer reset, defaults, alignments, elements, colors-fonts, main-nav, second-nav, main, mobile;

@import "nav.css" layer(main-nav);
@import "nav2.css" layer(second-nav);
@import "main.css" layer(main);
@import "mobile.css" layer(mobile);

  @layer reset {

          *,
          *::before,
          *::after {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
          }

          body {
            margin: 0;
            line-height: inherit;
          }

          h1, h2, h3, h4, h5, h6, p,
          figure, blockquote, dl, dd {
            margin: 0;
          }

          ul, ol {
            list-style: none;
            margin: 0;
            padding: 0;
          }

          img, svg, video, canvas {
            display: block;
            max-width: 100%;
          }

          input, button, textarea, select {
            font: inherit;
            margin: 0;
            padding: 0;
          }
  }

  @layer defaults{

            html {
              font-size:100%;
              scroll-behavior: smooth;
            }

                @media (prefers-reduced-motion: no-preference) {
                    html {
                    scroll-behavior: smooth;
                    }
                }

            body{
              background-color: var(--c-bg);
              color: var(--c-text);
            }

            p {
              font-size:1rem;
              line-height: 1.5rem;
              margin: 15px 0;
            }

            hr{
              width:50px;
              border:none;
              border-top:1px solid var(--c-main-accent);
              text-align: center;
            }

            main a{
              color: var(--c-main);
            }

               main a:hover{
                  color: var(--c-light-accent);
                }

            <!-- font weights -->

                  .light{
                    font-weight: 100;
                  }

                  .medium{
                    font-weight: 500;
                  }

                  .bold{
                    font-weight:700;
                  }

                  .heavy{
                    font-weight:900;
                  }

          <!-- font-styles -->

                 .uppercase{
                   text-transform: uppercase;
                 }

                 .capitalize{
                   text-transform: capitalize;
                 }

                 .transform-non{
                   text-transform:none;
                 }

  }

  @layer alignments{

            .float-right{
              float:right;
            }

                  .flex-right{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                  }

            .float-left{
              float:left;
            }

                  .flex-left{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                  }

            .center{
              text-align:center;
            }

            .top-50{
              padding-top:50px;
            }
   }


   @layer colors-fonts{

            <!-- fonts -->

                 .font-1{
                   font-family:var(--font);
                 }

                 .font-2{
                   font-family:var(--font-2);
                 }

                 .font-3{
                   font-family:var(--font-3);
                 }

                .code{
                  font-family: var(--font-code);
                }

            <!-- colors -->

                .main-text{
                  color: var(--c-main);
                }

                .main-accent{
                  color: var(--c-main-accent);
                }

                .light-accent{
                  color: var(--c-light-accent);
                }

                .dark-accent-1{
                  color: var(--c-dark-accent);
                }

                .dark-accent-2{
                  color: var(--c-dark-accent2);
                }

  }

  @layer elements{

            .socials_linkedin{
                display: block;
                text-align: center;
                border-radius: 5px;
                width: 25px;
                height: 25px;
                border:1px solid var(--c-main-accent);
                color: var(--c-main);
                font-weight: bold;
                font-size: 1rem;
                text-decoration: none;
            }

                .socials_linkedin:hover{
                    color: var(--c-main-accent);
                }

  }