@font-face {
 font-family: 'WorkSans';
 src: url('./fonts/WorkSans-VariableFont_wght.ttf') format('ttf');
}

body {
  font-family: 'WorkSans';
  color: #795c2f;
  font-weight: 500;
    position: relative;
  .wrapper {
    min-height: 100vh;
    &#media {
      .publication, .date {
        color: #393939;
        font-size: 0.9em;
        padding-left: 5px;
      }
      .title {
        margin-bottom: 10px;
      }
    }
    .nav-menu {
      position: absolute;
      top: 10px;
      right: 10px;
      /*width: 30px;*/
      .menu {
        background-image: url('../src/images/menu.svg');
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        &:hover, &.open {
          .links {
            opacity: 1;
            position: absolute;
            display: flex;
            flex-direction: column;
          }
        }
        .links {
          color: #373737;
          position: absolute;
          opacity: 0;
          top: 0px;
          right: 0px;
          background-color: #fff;
          padding: 40px;
          display: none;
          box-shadow: #9d9d9d 5px 5px 30px;
          border-radius: 10px;
          border: 1px solid #fff7ed;
          a {
            padding: 10px;
            white-space: nowrap;
            &:hover {
              text-decoration: underline;
              text-underline-offset: 5px;
              text-decoration-color: #d6c2b0;
              text-decoration-thickness: 2px;
            }
          }
        }
      }
    }
    header {
      .logo-container {
        /*width: 40%;*/
        .logo {
          background-image: url('../src/images/logo-black.svg');
          background-repeat: no-repeat;
          background-size: contain;
          height: 100%;
          margin: 0 auto;
        }
      }
    }
    main {
      .description {
        header {
          h1 {
            text-underline-offset: 9px;
          }
        }
      }
      ul {
        padding-left: 16px;
        &.faq, &.media {
          padding-left: 0px;
          li {
            list-style: none;
            margin: 30px 0px;
            padding: 0px 10px;
            .title {
              color: #000;
              font-size: 1.1em;
              a {
                color: #0c4e76;
                text-decoration: underline;
                text-underline-offset: 5px;
                font-weight: 300;
              }
            }
            .content {
              padding: 10px 5px;
              a {
                text-decoration: underline;
                text-underline-offset: 6px;
                text-decoration-color: #3a9bd8;
                text-decoration-thickness: 2px;
              }
            }
          }
        }
        li {
          list-style: disc;
          padding: 5px 0px;

        }
      }
      .email-info {
        p {
          a {
            text-decoration: underline;
            text-underline-offset: 6px;
            text-decoration-color: #a48970;
            text-decoration-thickness: 2px;
          }
        }
      }
      form {
        #reporter-name, #reporter-preferred-contact {
          display: none;
        }
        #ts {
          iframe {
            width: 100% !important;
            margin: 20px 0px !important;
          }
        }
        input[type="submit"] {
          background-color: #c49f80;
          padding: 10px 40px;
          border: 1px solid black;
          color: #fff;
          cursor: pointer;
        }
        input[type="text"], input[type="tel"], input[type="email"], textarea, select {
          border: 1px solid #ecd9cb;
          border-radius: 5px;
          padding: 5px;
          color: #000;
        }
        .groups {
          .group {
            margin: 5px 0px;
            textarea {
              margin: 10px 0px;
            }
          }
        }
      }
      .video {
        .embed-video {
          height: 300px;
          width: 100%;
          background-color: #000;
        }
        .footer {
          header {

          }
          ul {
            &.links {
              li {
                list-style: none;
                a {
                  text-decoration: underline;
                  text-underline-offset: 6px;
                  text-decoration-color: #d28d4e;
                  text-decoration-thickness: 2px;
                }
              }
            }
          }
        }
      }
    }
    footer {
      #twitter, #instagram, #youtube {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
      }
      #twitter {
        background-image: url('../src/images/twitter.svg');
      }
      #instagram {
        background-image: url('../src/images/instagram.svg');
      }
      #youtube {
        background-image: url('../src/images/youtube.svg');
      }
    }
  }
}