:root{
  --color_orange_main: #eac18a;
  --color_orange_main_opacity: rgba(234, 193, 138, 0.75);
  --color_blue_main: #3a3a65;
  --color_background: #fffdeb;
  --color_blue_button: #6f6f9d;
  --color_blue_minor: #555590;
}

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

body{
  overflow-y: scroll;
  font-family: system-ui;
  background: var(--color_background);
  overflow-x: hidden;
  display: flex;
    flex-direction: column;
  height: 100vh;

  &.overflow-hide{
    overflow: hidden;
  }
}

button{
  display: inline-block;
  padding: 0 13px;
  border: 1.5px solid #c7c7c7;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: white;
  background-color: var(--color_blue_button);
  cursor: pointer;
  transition: 0.3s;

  &:hover{
    background-color: #4b4b88;
  }
}

footer{
  width: 95vw;
  display: flex;
    justify-content: center;
  z-index: -1;
}

input,
textarea{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: var(--color_background);
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  resize: vertical;
}

#popup-container{
  position: fixed;
  margin: auto;
  width: 30vw;
  z-index: 101;
  justify-self: anchor-center;
  top: 50px;
  display: none;

  @media (max-width: 1000px) {
    width: 90vw;
  }

  &.visible{
    display: block;
  }

  &>.popup-container__block{
    padding: 10px;
    box-shadow: 0px 2px 6px 3px #848484;
    border-radius: 10px;
    background: #eac18a;
    display: flex;
    flex-direction: column;
    transition: 0.5s;
    visibility: hidden;

    &.animate{
      visibility: visible;
      transform: translateY(10px);
    }

    &>.popup-container__block__text{
      padding: 10px;
      font-size: 1.2rem;
      text-align: center;
    }

    &>button{
      width: 60px;
      align-self: center;
      font-size: 1.3rem;
    }
  }

}

#feedback-fields-block{
  margin: 15px 0;

  &>.input-block__field-row{
    margin-bottom: 10px;
  }
}

#encryptText,
#decryptText{
  height: 100px;
}

#page-background{
  width: 100%;
  height: 100%;
  background: rgb(109 106 147 / 75%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0.8;
  display: none;

  &.visible{
    display: block;
  }
}

.private-data__result{
  display: none;
  word-break: break-all;

  &.visible{
    display: block;
  }

  &>.private-data__result__text{
    padding: 5px;
    border-radius: 5px;
    margin: 15px 0px;
    background: #5f5f9a;
    box-shadow: 0px 0px 3px 1px #8a8a8a inset;
  }
}

#footer-content{
  display: flex;
    justify-content: space-between;
  transition: 0.3s;
  opacity: 0.5;
  color: grey;
  width: 95%;

  &:hover{
    opacity: 1;
    color: black;
  }

  &>svg{
    color: orange;

    @media (max-width: 1000px) {
      font-size: 2rem;
    }
  }

  &>#footer-content__notification{
    text-align: center;
    align-self: center;
  }  
}

.attention_text{
  color: #e6d4bb;
  font-weight: 500;        
}

#page-title{
  display: flex;
    justify-content: center;
    gap: 30px;
  margin: 50px 0;

  @media (max-width: 1000px) {
    flex-direction: column;
  }

  &>#app_description{
    display: flex;
      justify-content: center;
      align-items: center;
    opacity: 0;
    width: 550px;
    font-size: 1.7rem;
    transition: 0.3s;
    transform: translateX(10px);

    @media (max-width: 1000px) {
      width: auto;
      font-size: 1.2rem;
    }

    @media (max-width: 800px) {
      width: auto;
      font-size: 1rem;
    }

    &.shift{
      opacity: 1;
      transform: translateX(0);
    }

    &>span{
      color: #3a3a65;
      font-weight: 500;

      &.shine{
        color: orange;
        min-width: 15px;
        animation-name: shineSymb;
        animation-iteration-count: infinite;
        animation-duration: 0.3s;
        animation-direction: alternate;
      }
    }
  }

  &>#app-name{
    transition: 0.3s;
    display: flex;
    opacity: 0;
    transform: translateX(-10px);
    font-size: 4rem;
    font-family: math;

    @media (max-width: 1000px) {
      font-size: 2.8rem;
      justify-content: center;
    }

    &.shift{
      opacity: 1;
      transform: translateX(0);
    }
  }

  & #app-name--cipher{
    color: orange;

    &>span:last-child{
      width: 1.5em;
    }
  }

  & #app-name--cipphire{
    color: var(--color_blue_main);
    gap: 3px;

    &>span:first-child{
      width: 1.5em;
      z-index: 1;
    }
  }

  & .page-title__app-name{
    display: flex;

    &>span{
      overflow: hidden;
      transition: 0.3s;

      &.hide{
        width: 0!important;
      }
    }
  }
}

#page__navigation{
  display: flex;
    justify-content: space-around;
  width: 1000px;
  margin: auto;
  z-index: 100;
  position: relative;

  @media (max-width: 1000px) {
    width: auto;
    flex-wrap: wrap;
    gap: 10px;
  }

  &>.navigation__block{
    flex: 1;

    @media (max-width: 1000px) {
      flex-basis: 45%;
    }

    &.visible{
      opacity: 1;

      &>.navigation__block__title{
        opacity: 1;
        box-shadow: none;
      }
    }

    &:hover{
      opacity: 1;
    }

    &:not(:first-of-type){
      border-left: 2px solid grey;
    }

    @media (max-width: 1000px) {
      border: none!important;
    }

    &>.navigation__block__title{
      height: 100px;
      transition: 0.3s;
      cursor: pointer;
      padding: 5px;
      font-size: 1.5rem;
      align-content: center;
      text-align: center;
      opacity: 0.6;

      @media (max-width: 1000px) {
        background: #eeeefe;
        border-radius: 10px;
        font-size: 1rem;
        height: 50px;
        box-shadow: 0px 0px 10px 0px #d0d0d0 inset;
      }

      &:hover{
        opacity: 1;
      }

      &+.navigation__block__content{
        transform: translateY(0px);
        border-radius: 5px;
        background: var(--color_blue_main);
        color: white;
        margin-top: 10px;
        padding: 10px;
        position: absolute;
        width: 100%;
        visibility: hidden;
        left: 0;
        max-height: 500px;
        overflow-y: scroll;
        z-index: 1;

        & .navigation__content__section__description{
          text-align: justify;
        }

        &#navigation__block__content__general-info{

          & a{
            color: #b2b2ff !important;
          }
        }

        &#navigation__block__content__how-to-use{

          &>.navigation__content__section{
            display: grid;
              gap: 10px;
              grid-template-columns: 1fr 50fr;

            & .section-private-data{
              margin: 15px 0;
            }

            &>.navigation__content__section__step-num{
              display: flex;
                justify-content: center;
                align-items: center;
              background: var(--color_orange_main);
              font-size: 2rem;
              padding: 5px 20px;
              border-radius: 50%;
              font-weight: 600;
              height: 50px;
              width: 50px;
            }

            &>.navigation__content__section__step-description{
              margin-bottom: 30px;

              &>.how-to-use__description__slider-block{
                border-left: 5px solid var(--color_orange_main);
                margin: 10px 0;
                opacity: 0.3;
                transition: 0.3s;

                &:hover{
                  opacity: 1;
                }

                &>.slider-arrow{
                  cursor: pointer;
                  margin-bottom: 10px;
                  padding-left: 10px;
                  
                  &>svg{
                    transform: translateY(2px);

                    &+span{
                      margin-left: 10px;
                    }
                  }
                }

                &>.slider-content{
                  margin-bottom: 15px;
                  display: none;
                  padding: 5px;
                  background: #f6e7d0;
                  color: black;

                  & .attention_text{
                    color: white;
                  }
                }

                &.visible{
                  opacity: 1;

                  & svg{
                    transform: translateY(3px) rotate(180deg);
                  }

                  &>.slider-content{
                    display: block;
                  }
                }
              }
            }
          }
        }
      }
    }

    &.visible>.navigation__block__content{
      transform: translateY(-5px);
      visibility: visible;
      transition: 0.3s;

      @media (max-width: 1000px) {
        height: 90vh;
      }

    }
    &.visible>.navigation__block__title{
      transform: translateY(5px);
      color: white;
      background: var(--color_blue_main);
      border-radius: 10px 10px 0 0;
      border-bottom: 5px solid var(--color_orange_main);
    }
  }
}


#cipher-content{
  margin: 60px 0;


    & .result-text-block{
      transition: 0.3s;
      opacity: 1;
      animation-name: showResults;
      animation-duration: 1s;
      animation-fill-mode: forwards;

      &.hide{
        animation-name: hideResults;
      }

      &>.content__block__result__text{
        word-break: break-word;
        background: var(--color_orange_main);
        padding: 5px;
        border-radius: 5px;
      }
    }

    

    &>#cipher-content__input-block{
      background: white;
      display: flex;
      position: relative;
      /* position: sticky;
        top: 0; */
      z-index: 2;
      background: transparent;

      @media (max-width: 1000px) {
        flex-direction: column;
        gap: 40px;
      }

      & #decrypt-result-text{
        background: var(--color_blue_minor);
        color: white;
      }

      &>.cipher-content__block{
        width: 50%;
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        box-shadow: 0 0 5px 3px grey;
        background: #fffdeb;
        position: relative;

        @media (max-width: 1000px) {
          width: 100%;
        }
        
        &:before{
          z-index: -1;
          position: absolute;
          top: -45px;
          left: 30px;
          font-size: 1.2rem;
          color: black;
          padding: 10px;
          border-radius: 5px;
        }

        @media (max-width: 1000px) {
          &:last-child {

            &:before{
              left: auto;
              right: 30px;
            }
          }
        }

        &>form{
          height: 100%;
          display: flex;
            flex-direction: column;
            align-content: space-between;
            justify-content: flex-start;

          &>.content__input-block{
            padding: 10px;
            position: relative;

            &.visible{

              &>.input-block__field-row{
                height: auto!important;
                padding-top: 20px;

                &>.input-block__icon-block{
                  display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;

                  &>.input-block__icon-block__icon{
                    cursor: pointer;
                  }
                }
              }

              & .content__input-block__block-slide{

                &:hover{

                  /* &>.input-block__block-slide__icon-arrow{
                    transform: translateY(-3px) rotate(180deg);
                  } */
                }

                &>.input-block__block-slide__icon-arrow{
                  transform: rotate(180deg);
                  /* padding-left: 10px;
                  padding-right: 0px; */
                }
              }

            }
          }
        }

        

        & .content-block__btn-block{
          /* position: absolute;
          bottom: 10px; */
          position: relative;
          margin-top: auto;

          &>.content__encrypt-block__encrypt-clear{
            background: #fffdeb;
            color: black;
            border: 2px solid #555590;
            transition: 0.3;
            opacity: 0.6;

            &:hover{
              opacity: 1;
              background: #fff1de;
            }
          }
        }

        & .content__input-block{
          border-radius: 10px;
          box-shadow: 0px 4px 6px 1px #3e3e70;

           &.input-block--minor{
              border-radius: 0px 0px 10px 10px;

              &>.input-block__field-row{
                height: 0;
                overflow: hidden;
                transition: 0.3s;
              } 

              &>.content__input-block__block-slide{
                cursor: pointer;
                opacity: 0.3;
                transition: 0.2s;

                &>.input-block__block-slide__icon-arrow{
                  transition: 0.3s;
                  transform: translateY(3px);
                }
              }

              &>.input-block__field-row{
                grid-template-columns: 5fr 0.3fr;

                &>.cipher-salt-input{
                  height: 80px;
                }

                &>.fa-refresh{
                  padding-top: 15px;
                  cursor: pointer;
                }
              }

              & textarea {
                height: 50px;
                resize: vertical;

                &.input-value-diff{
                  box-shadow: inset 0px 0px 4px 4px #c37272;
                }
              }

              &.visible{

                &>.content__input-block__block-slide{
                  opacity: 1;
                }
              }
           }  

          &>.input-block__field-row{
            margin-bottom: 10px;
            display: grid;
              grid-template-columns: 1fr 5fr;
              gap: 5px;

            @media (max-width: 1000px) {
              grid-template-columns: 1fr 2fr;
            }

            &.field-row--two-fields{
              grid-template-columns: repeat(2, 1fr 2fr);

              @media (max-width: 1000px) {
                grid-template-columns: 1fr 2fr;
              }
            } 

            &>textarea{
              transition: 0.5s;

              &.shake{
                animation-name: shakeTextarea;
                animation-duration: 0.5s;
                animation-iteration-count: 1;
                animation-timing-function: ease-in-out;
              }
            }
          }  
        }

        &>.content__input-block__submit-btn{
            width: 150px;
            /* margin: auto; */
            /* display: block;
            position: absolute;
            bottom: 20px; */
          }

      }

      &>#cipher-content__encrypt-block{
          color: white;
          position: relative;

          &:before{
            content: "Шифрование";
            background: #eeeefe;
          } 

          &>#content__encrypt-block__result{
            overflow-y: scroll;
            height: 70%;
          }

          & .content__input-block{
            padding: 10px;
            position: relative;

            &.visible{

              &>.input-block__field-row{
                height: auto!important;
                padding-top: 20px;
              }

              & .content__input-block__block-slide{

                &>.input-block__block-slide__icon-arrow{
                  transform: translateY(3px) rotate(180deg);
                }
              }

            }
          }

          & #content__encrypt-block__encrypt{
            z-index: 10;
            background: var(--color_blue_minor);
          }
          & #content__encrypt-block__salt{
            z-index: 9;
            background: var(--color_blue_minor);
            background: #7474ab;
            transform: translateY(-10px);
          }
          & #content__encrypt-block__key{
            z-index: 8;
            background: #a9a9d5;
            transform: translateY(-20px);
          }
      }

      & #cipher-content__decrypt-block{

        &:before{
          content: "Дешифрование";
          background: #fff1de;
        }

        & .content__input-block{
          box-shadow: 0px 4px 6px 1px #564022;
        }

        & #content__decrypt-block__result{
          min-height: 35px;
          /*border-radius: 10px; */
          margin: 30px 0;
          /* border: 1px solid grey;
          background: #7474ab; */
        }

      }

      & #content__decrypt-block__input{
        z-index: 10;
        background: var(--color_orange_main);
      }

      & #content__decrypt-block__decrypt{
        background: #fdddb3;
        z-index: 9;
        transform: translateY(-10px);
      }

      & #content__decrypt-block__key{
        background: #fff1de;
        z-index: 8;
        transform: translateY(-15px);
      }

    }

    
  &>#content__encrypt-block__result{
    padding: 10px;

    &>.content__encrypt-block__result__parent{
      display: flex;
        gap: 15px;
        align-items: center;
      margin: 10px 0;

      @media (max-width: 1000px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 30px;
      }

      &>button{
        background: #fff6ea;
        color: black;
        border: 1px solid #eac18a;
      }
    }
  }
}


.private-data__timer-block{
  position: relative;

  &>.private-data__timer-block__text{
    position: relative;
    z-index: 2;
    color: white;

    &>span{
      pad: 0 5px;
      /* color: white; */
      font-size: 1.2rem;
    }
  }

  &>.private-data__timer-block__timer{
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--color_orange_main);
    position: absolute;
    transition: 0.3s;

    &.saltCounterStart{
      animation-name: cipherSaltCounter;
      animation-duration: 7s;
      animation-timing-function: linear;
      padding: 10px;

      &+.private-data__timer-block__text{
        padding: 5px;
        text-shadow: 1px 1px grey;
      }
    }
  }
}

  @keyframes cipherSaltCounter{
        from {
          width: 100%;
        }
        to {
          width: 0;
        }
      }

  @keyframes shakeTextarea{
    0% {
      transform: translateX(0);
    }
    15% {
      transform: translateX(10px);
    }
    30% {
      transform: translateX(-10px);
    }
    45% {
      transform: translateX(10px);
    }
    60% {
      transform: translateX(-10px);
    }
    75% {
      transform: translateX(5px);
    }
    90% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(0);
    }
  }

   @keyframes shineSymb{
        from {
          opacity: 1;
        }
        to {
          opacity: 0.1;
        }
      }

@keyframes showResults{
        from {
          transform: translateX(-25px);
          opacity: 0;
        }
        to {
          transform: translateX(0px);
          opacity: 1;
        }
      }

      @keyframes hideResults{
        from {
          /* transform: translateX(-20px);
          opacity: 0; */
        }
        to {
          transform: translateX(25px);
          opacity: 0;
        }
      }


#api_description{

  & .endpoint__container__uri{
    font-size: 1.3rem;
    width: 100%;
    position: sticky;
    top: -10px;
    margin: 10px 0;
    display: inline-block;
    border-radius: 5px;
    padding: 5px 10px;
    background: #505095;
    box-shadow: inset 0px 0px 9px 1px #7e7ed2;
  }
  
  & .endpoint__container__param-block{
    display: flex;
      gap: 5px;
    margin: 10px 0;

    &>.endpoint__container__param__title{
      flex-basis: 20%;
      border-right: 2px solid var(--color_orange_main);
      color: #bcbcbc;
      font-size: 1.1rem;

      @media (max-width: 1000px) {
        font-size: 0.9rem;
        flex-basis: 50%;
      }
    }
    &>.endpoint__container__param__description{
      flex-basis: 80%;
      word-break: break-all;
      align-self: center;

      &>span{
        font-size: 1.5rem;
        font-weight: 600;

        &.endpoint__container__param__method--GET{
          color: #3ecf33;
        }
        &.endpoint__container__param__method--POST{
          color: #de6b6b;
        }
      }
      
    }

    &>div{
      padding: 3px 5px;
    }
  }
}

.endpoint__container__param__description__param-table {
	width: 100%;
	border: none;
	margin-bottom: 20px;
  border-collapse: collapse;

  @media (max-width: 1000px) {
    width: 150vw;
  }

  & th{
    font-weight: bold;
    text-align: left;
    border: none;
    padding: 10px 15px;
    background: #f1c180;
    /* font-size: 14px; */
    text-shadow: 0 0 3px #5c5c5c;
  }

  & td{
    text-align: left;
    border: none;
    padding: 10px 15px;
    /* font-size: 14px; */
    vertical-align: top;
  }

  & tr th:first-child {
    border-radius: 8px 0 0 8px;
  }

  & tr th:last-child {
    border-radius: 0 8px 8px 0;
  }

  & tr th {
    border-left: 2px solid var(--color_blue_main);

    &:last-child{
      width: 200px;
    }
  }
  & tr{
    &>td:not(:first-child){
      border-left: 2px solid var(--color_orange_main);
    }
    &>td{
      border-bottom: 2px solid var(--color_orange_main);
    }
  }
}