html,body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}


/** Horizontal */
/*720p*/
@media (width:1280px) and (height:720px) {
    #scene-1{
        background-image: url('../assets/fundo.png');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0
  
      }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.5%;
       
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 55px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 68.5%;
        left: 0;
        width: 27%;
        height: 10%;
      
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 40%;
        left: 5%;
        width: 84%;
        height: 40%;
        z-index: 1;
        /* border: 1px solid red; */
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }

    #title {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 81%;
        height: 25%;
        padding-left: 15px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5em;
        font-weight: 700;
        /* border: 1px solid red; */
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5em
    }
}

/*1080p*/
@media (width:1920px) and (height:1080px) {
    #scene-1{
      background-image: url('../assets/fundo.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0

    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.5%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 85px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 68.5%;
        left: 0;
        width: 25%;
        height: 10%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 40%;
        left: 5%;
        width: 84%;
        height: 48%;
        z-index: 1;
        /* border: 1px solid red; */
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }
    #title {
        /* border: 1px solid red; */
        position: absolute;
        top: 20%;
        left: 5%;
        width: 81%;
        height: 20%;
        padding-left: 35px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em;
        font-weight: 700;
    }
    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 35px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em
    }
}


@media (width:1920px) and (height:1010px) {
    #scene-1{
      background-image: url('../assets/fundo.png');
        background-size: cover;
        background-position: initial;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0

    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.5%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 85px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 68.5%;
        left: 0;
        width: 25%;
        height: 10%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 40%;
        left: 5%;
        width: 84%;
        height: 48%;
        z-index: 1;
        /* border: 1px solid red; */
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }
    #title {
        /* border: 1px solid red; */
        position: absolute;
        top: 20%;
        left: 8%;
        width: 75%;
        height: 20%;
        padding-left: 35px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em;
        font-weight: 700;
    }
    #description {
        position: absolute;
        left: 4%;
        width: 75%;
        height: 100%;
        padding-left: 35px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em
    }
}

/** Vertical */
/*1080p*/
@media (width:1080px) and (height:1920px) {
    #scene-1{
        background-image: url('../assets/fundo-2.png');
          background-size: cover;
        
          background-repeat: no-repeat;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0
  
      }
  
      #topbar {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 9.5%;
          background-color: rgba(15, 15, 15, .9);
          z-index: 1
      }
  
      #topbar>img {
          position: absolute;
          top: 7.5%;
          left: 1.5%;
          height: 85px;
          z-index: 1
      }
  
      #titlebar {
          position: absolute;
          top: 68.5%;
          left: 0;
          width: 25%;
          height: 10%;
          background-color: rgba(15, 15, 15, .9);
          z-index: 2
      }
  
      #bar {
          position: absolute;
          top: 40%;
          left: 5%;
          width: 84%;
          height: 37%;
          z-index: 1;
          /* border: 1px solid red; */
      }
  
      #content {
          position: absolute;
          top: 5%;
          left: 0;
          width: 90%;
          height: 100%;
          z-index: 2;
          overflow: visible
      }
      #title {
          /* border: 1px solid red; */
          position: absolute;
          top: 20%;
          left: 5%;
          width: 81%;
          height: 20%;
          padding-left: 35px;
          color: #35b76d;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 3.5em;
          font-weight: 700;
      }
      #description {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          padding-left: 35px;
          color: #35b76d;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 3.5em
      }
  }

/*720p*/
@media (width:720px) and (height:1280px) {
    #scene-1{
        background-image: url('../assets/fundo-2.png');
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0
  
      }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8%;
       
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 80px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 83%;
        left: 0;
        width: 37%;
        height: 5%;
      
        z-index: 2
    }
    #bar {
        position: absolute;
        top: 40%;
        left: 7%;
        width: 92%;
        height: 55%;
        z-index: 1;
        /* border: 1px solid red; */
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }
    #title {
        position: absolute;
        top: 20%;
        left: 7%;
        width: 92%;
        height: 17%;
        padding-left: 15px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5em;
        font-weight: 700;
        /* border: 1px solid red; */
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        color: #35b76d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2em
    }
}