@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

p > a {
  color: #cece0b;
}

li {
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #000;
  background: #1c1c1c;

  display: flex;
  flex-direction: column;
  align-items: center;
}

  header {
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 65px;
    background: #dfdf04;

    display: unset;
    justify-content: space-around;
    align-items: center;
  }

    header #menu {
      cursor: pointer;
      width: 65px;
      height: 65px;
      margin-left: 10px;

      display: flex;
      align-items: center;
    }

    header h1 {
      display: none;
    }
  
    nav {
      display: none;
      position: absolute;
      width: 60%;
      height: 100vh;
      background: #cece0b;
    }

      nav ul {
        display: flex;
        flex-direction: column;
      }

        .dropdown {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

          .dropdown	img {
            margin-left: 10px;
          }

          .dropdown .main-menu {
            cursor: pointer;
            font-size: 1.26em;
            color: #000;
            border: none;
            padding: 15px;
            background: transparent;
          }

          .dropdown .dropdown-child {
            width: 100%;
            display: none;
            min-width: 120px;
          }

            .dropdown-child a {
              color: #000;
              padding: 15px;
              text-decoration: none;
              display: block;
            }

            .dropdown:hover .dropdown-child {
              display: block;
            }
            
        nav ul .box {
          cursor: pointer;
          width: 100%;
          height: 50px;
  
          display: flex;
          justify-content: start;
          align-items: center;
        }

          nav ul .box img {
            margin-left: 10px;
          }
  
        nav ul li{
          font-size: 1.26em;
          padding: 15px;
        }

      main {
        width: 100%;
        margin-top: 65px;
        background: #232323;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

        main .slide {
          position: relative;
          width: 100%;
          height: 320px;
          background: #000;

          display: flex;
          justify-content: center;
          align-items: flex-end;
        }

          main .slide .next {
            cursor: pointer;
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #fff;
            background: rgba(255, 0, 106, 0.65);
            bottom: 8px;
            right: 10px;
            
            color: #fff;

            display: flex;
            justify-content: center;
            align-items: center;
          }

        h3 {
          width: 100%;
          height: 65px;
          position: absolute;
          color: #fff;
          background: rgba(255, 0, 106, 0.65);

          padding: 5px;
          box-sizing: border-box;
        }

          .slide .content  {
            position: absolute;
            cursor: pointer;
            width: 100%;
            height: 80px;
            background: rgb(24, 24, 24, 0.8);
          }

          .slide .content:hover {
            background: rgb(24, 24, 24, 0.95);
          }

          .slide h1 {
            padding: 10px 0px 0px 10px;
            color: #fff;
          }

          .slide p {
            padding: 5px 0px 0px 10px;
            color: #fff;
          }

        main .box-cards {
          width: 95%;
          height: 390px;
          margin-top: 15px;

          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }

          main .box-cards .card {
            cursor: pointer;
            width: 100%;
            height: 120px;
            border-radius: 5px;
            background-image: radial-gradient(circle at -16.45% 25.82%, #de9c2c 0, #e5922a 8.33%, #ea852b 16.67%, #ee772d 25%, #f16731 33.33%, #f35436 41.67%, #f23c3c 50%, #f01843 58.33%, #ed004c 66.67%, #e90057 75%, #e30064 83.33%, #db0071 91.67%, #d10080 100%);
            
            font-size: 1.28em;
            color: #fff;

            display: flex;
            justify-content: center;
            align-items: center;
          }

        /*regula o layout da página principal(index)*/
        main .box-index {
          width: 95%;
          margin: 15px 0px 10px 0px;
          background: #000;
          color: #fff;

          display: flex;
          justify-content: center;
          align-items: center;
        }

          .box-index .info {
            background: #181818;
            color: #fff;
            padding: 15px;
            list-style: none;
            box-sizing: border-box;
          }
        
        main .box-tools {
          width: 95%;
          margin: 50px 0px 25px 0px;
          background: #000;
          color: #fff;

          display: flex;
          justify-content: center;
          align-items: center;
        }

          .box-tools .box-img {
            display: none;
            width: 300px;
            height: 265px;
          }

            .box-tools .box-img img {
              width: 100%;
              height: 265px;
            }

          .box-tools .info {
            padding: 15px;
            list-style: none;
            box-sizing: border-box;
            background: #181818;
            color: #fff;
          }

        /*regula o layout da página exercícios(exercises)*/
        main .box-exercises {
          display: none;
          width: 95%;
          margin: 50px 0px 50px 0px;
          background: transparent;
          color: #fff;

          display: flex;
          justify-content: center;
          align-items: center;
        }

          .box-exercises .info {
            width: 100%;
            background: #181818;

            list-style: none;
            box-sizing: border-box;
            padding: 15px;
            color: #fff;
          }

            .box-exercises .info .labelFolder {
              height: 25px;
              display: flex;
              align-items: flex-end;
            }

            .box-exercises .info .labelFile {
              height: 25px;
              margin: 5px 0px 10px 10px;
              display: flex;
              align-items: flex-end;
            }

        /*regula o layout da página exemplos(exemplos)*/
        main .box-examples {
          display: none;
          width: 95%;
          margin: 50px 0px 50px 0px;
          background: transparent;
          color: #fff;
    
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        /*regula o layout da página projetos(projects)*/
        main .box-projeto {
          width: 95%;
          margin-top: 50px;

          display: flex;
          justify-content: center;
          align-items: center;
        }

        /*regula o layout da página sobre(about)*/
        main .box-sobre {
          width: 95%;
          margin: 50px 0px 50px 0px;

          display: flex;
          justify-content: center;
          align-items: center;
        }

          .box-img {
            display: none;
            width: 630px;
            height: 500px;
          }

            .box-img img {
              width: 100%;
              height: 500px;
            }

          .box-sobre .info, .box-projeto .info {
            background: #181818;

            list-style: none;
            box-sizing: border-box;
            padding: 15px;
            color: #fff;
          }

            .info .i {
              margin-bottom: 15px;
            }

        /*regula o layout de todas as sub-páginas(ambient)*/
        main .box-page {
          width: 95%;
          margin: 50px 0px 50px 0px;
          color: #fff;
          background: #000;
          
          display: flex;
          justify-content: center;
          align-items: center;
        }

          .box-page .box-img {
            display: none;
            width: 300px;
            height: 265px;
          }

            .box-page img {
              width: 100%;
              height: 80%;
              margin: 10px 0px 10px 0px;
            }

          .box-page .info {
            list-style: none;
            padding: 15px;
            box-sizing: border-box;
            color: #fff;
            background: #181818;

            display: flex;
            flex-direction: column;
          }

            .box-page .info h1 {
              width: 100%;
              padding-top: 10px;
            }

            .box-page .info p, .box-page .info .list {
              width: 100%;
              text-align: left;
              padding: 10px 0px 10px 0px;
            }
          
        main #topics {
          display: none;
          position: fixed;
          width: 260px;
          height: 300px;
          top: 115px;
          right: 25px;
          background: #cece0b;
        }

          #topics li {
            cursor: pointer;
            width: 100%;
            height: 35px;
            padding-left: 10px;
            box-sizing: border-box;
            background: #161616;

            color: #fff;

            display: flex;
            align-items: center;
          }

        /*layout dos ícones de redes sociais*/
        main .social {
          position: fixed;
          width: 50px;
          height: 230px;
          top: 45px;
          left: 5px;
          margin: 50px 0px 50px 0px;
          background: #000;
        
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
        }
        
          main .social img {
            cursor: pointer;
          }

        /*layout do botão de home*/
        #controls {
          display: none;
          position: fixed; 
          width: 50px;
          height: 105px;
          right: 15px;
          bottom: 15px;

          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }

          #controls .icon-top {
            cursor: pointer;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #cece0b;
      
            display: flex;
            justify-content: center;
            align-items: center;
          }

          #controls .icon-home {
            cursor: pointer;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #cece0b;
      
            display: flex;
            justify-content: center;
            align-items: center;
          }

        table  {
          width: 100%;
          font-weight: 900;
          color: #000;
          background: silver;
        }

          table tr {
            background: #f5f5f5;
          }