main {
  & #dangerArithmetic {
    padding: 1rem;
    margin: auto;

    & p {
      font: 600 1.7rem "Inter",sans-serif;
      background-color: rgb(46, 9, 114);
      padding: 0.5rem;
      border-radius: 1rem;
    }

    & >ol{
      display: grid;
      gap: 1rem;
      & >ol {
        margin-bottom: 0.7rem;
      }
    }

    &>:nth-child(4) {
      width: fit-content;
    }


    & img {
      width: 150px;
      border-radius: 0.5rem;
      border: 3px solid rgb(66, 0, 128);
    }


  }

  & #atribuiçãoSimples {

    & h3 {
      padding: 1rem;
      text-align: center;
      background-color: rgb(46, 9, 114);
      border-radius: 1rem 1rem 0 0;
    }
    & ol {
      padding-top: 1rem;
      display: grid;
      gap: 1rem;
      & li {
        & span {
          color: rgb(255, 238, 0);
        }

        & small {
          color:rgb(196, 170, 201) ;
          font: 400 1.3rem "Inter",sans-serif;
        }

        & strong {
          border: 2px dashed rgb(166, 139, 184);
          padding: 3px;
          border-radius: 5px;
        }
      }
      & ul {
        &>li {
          list-style-type: none;
          margin-left: -30px;
          margin-bottom: 1rem;
        }
      }
    }
  }

  & #autoAtribuições {
    padding-bottom: 1rem;
     & h3 {
      padding: 1rem;
      text-align: center;
      background-color: rgb(46, 9, 114);
      border-radius: 1rem 1rem 0 0;
    }

    & ol {
      list-style-type: none;
      & ul {
        margin-bottom: 2.5rem;
        & >li {
          color: rgba(126, 82, 228, 0.473);
          list-style-type: none;
          margin-left: -30px;
        }
      }

      & li:first-child {
        padding-bottom: 2.5rem;
      }
    }

    & img {
      width:100%;
    }

  }
}


.box-js {
  outline: 3px solid rgb(118, 30, 233);
  background-color: rgb(75, 22, 134);
  box-shadow: rgba(0, 0, 0, 0.342) 4px 4px 10px;
  border-radius: 1rem;
  width: 600px;

  & img {
    border: 4px solid rgb(56, 9, 109);
  }
}