html{
    scroll-behavior: smooth;
  }

body{
    background-color: paleturquoise;    
    margin: 0;
    padding:0;
    display: grid;
}

.main{
    position: relative;
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

header{
    text-align: center;
    color: white;
}

header p {
    text-decoration: none;
}

header h1{
    margin-top:0;
}

/*Container do Switch*/
.container-switch{
    width: 50em;
    height: auto;
    position: absolute;
}

.switch-row{
    width: 100%;
    margin:0;
    padding:0;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

.switch-row{
    align-self: stretch;
}

#joycon-blue{
    width:15%;
    height: 16em;
    border-radius: 40% 10% 10% 40%;
    background-color: #00c3e3;
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#joycon-red{
    width:15%;
    height: 16em;
    border-radius: 10% 40% 40% 10%;
    background-color: #ff4554;
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#tela{
    width:80%;
    display: flex;
    align-items: center;
    height: 16em;
    padding: 1%;
    border-radius: 2%;
    background-color:  #414548;
}

iframe{
    width: 100%;
    height: 14em;    
}

#right{    
    border-style: solid;
    border-radius: 0 5% 5% 0;
}
#left{
    border-style: solid;
    border-radius: 5% 0 0 5%;
  }

.botoes-esquerda{
    width: 4em;
}

.botoes-direita{
    width: 4em;
}

#analogico{
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background-color: #393939;
    border-color: #0b0e0e;
    display: flex;
    align-items: center;
    justify-content: center;
}

#digital{
    width: 5em;
    height: 5em;
    border-radius: 50%;
    display: grid;
}

#desliga-output{
    color:black;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    border-color: #6d6d6d;
    background-color: #4f4f4f;
    outline: none;
    font-size: 1.1em;
    text-align: center;
}

#desliga-output-red{
    color:black;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    border-color: #6d6d6d;
    background-color: #4f4f4f;
    outline: none;
    font-size: 1.1em;
    text-align: center;
}

.digital-row1{
    display: flex;
    align-items: center;
    justify-content: center;
}

.digital-row2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.digital-row3{
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.digital-item{
    border-style: solid 1px;
    border-color:#6d6d6d;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
}

.But{
    align-items: center;
}

#avanca-output{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#recua{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#gira-direita-output{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#gira-esquerda-output{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;    
    border-color: #6d6d6d;
}

#avanca-output-red{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#recua-red{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#gira-direita-output-red{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;
    border-color: #6d6d6d;
}

#gira-esquerda-output-red{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: none;
    background-color:  #414548;
    margin:0;
    padding:0;    
    border-color: #6d6d6d;
}

.But{
    text-align: center;
}

#superior{
    display: flex;
}
.superior-esquerda{
    width: 4em;
    height: 0.7em;
    background-color: #414548;
    border-radius: 30%;
    margin-left: 60%;
}

.inferior-esquerda{
    width: 1em;
    height: 1em;
    background-color: #414548;
    margin-left: 65%;
}

.superior-direita{
    width: 1.6em;
    height: 0.5em;
    background-color: #414548;
    margin-right: 50%;
    margin-top:12%;
    position: relative;
}

.inferior-direita{
    width: 1.4em;
    height: 1.4em;
    background-color:#414548;
    border-radius: 50%;
    margin-right: 80%;
}

.superior-direita2{
    width: 0.5em;
    height: 1.4em;
    background-color: #414548;
    margin-left: 1.16%;
    position: absolute;
}

/*Container das instruções*/

.instrucoes{
    left: 0;
    right: 0;      
    margin:0 auto;
    width:450px;
    height: 450px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: 	#93E5AB;
    padding: 60px;
}

.instrucoes2{     
    margin:0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: 		#65B891;
    padding: 60px;
    position: absolute;
    left: 60%;
    bottom: 25%;
}

.secondary{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1{
    font-size: 30px;
}

#access{
    font-size: 60px;
    color:	#4E878C;
}

#definicao{
    color:white;
    text-align: justify;
    width: 65%;
    margin: 0 50% 0 0;
    font-family: 'Roboto', sans-serif;
    border-bottom-left-radius:50%;
}

#mqtt{
    color:white;
    width: 300px;
    margin: 0 0 0 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

a{
    text-decoration:none; 
    color:white;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
}

.instrucoes2 p{
        color:white;
}

#botao-jogar {
        display: inline-block;
        padding: 15px 25px;
        cursor: pointer;
        text-align: center;	
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #65B891;
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px #65B891;
        cursor: default;
}

#botao-jogar:hover{
    background-color: #65B891;
}

#botao-jogar:active{
    transform: translateY(4px);  
}

#botao-jogar a{
    cursor: default;
}

#connect-button{
    display: inline-block;
    padding: 5% 5%;
    cursor: pointer;
    text-align: center;	
    text-decoration: none;
    font-size: medium;
    outline: none;
    color: #fff;
    background-color: #65B891;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px #4E878C;;
    width: 40%;
}

#connect-button:hover {
    background-color: #3e8e41}

#connect-button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #4E878C;
    transform: translateY(4px);
}

#disconnect-button{
    display: inline-block;
    padding: 5% 5%;
    cursor: pointer;
    text-align: center;	
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #65B891;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px #4E878C;
    width: 40%;
    margin-left:4px;
    font-size: medium;
}

#disconnect-button:hover {
    background-color: #3e8e41
}

#disconnect-button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #4E878C;
    transform: translateY(4px);
}

.form-row2{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.form-row{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    color:white;
}

.form-row p{
    width: 80%;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color:  #65B891;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px 10px 10px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: medium;
}

.form-row input{
    width: 80%;
    margin-left: 10px;
}

.form-row input{
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
    padding: 5px;
    background-color: #65B891;
    border-radius: 10px 10px 10px 10px;
    color:#666;
}

#pub-topic-text{
    margin-left: 25px;
}

h2{
    margin-top: 10px;
    margin-bottom:0;
    color:white;
    font-family: 'Roboto', sans-serif;
    font-size: medium;
}

.form-row input:focus, .form-row input:focus, select:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
} 

svg{
    position: absolute;
    bottom:0;
    margin:0;
    padding:0;
    width: 100%;
    z-index: -1;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .instrucoes{
        display: none;
    }

    .container-switch{
        width: auto;
        margin:0 auto;
    }

    #tela{
        visibility: hidden;
        width: 5px;
    }

    #joycon-red{
        width: 50%;
        height: 30em;
        padding:15%;
 }

    #joycon-blue{
        width:50%;
        height: 30em;
        padding:15%;
    }

    #analogico{
        width: 7em;
        height: 7em;
    }

    #desliga-output{
        width: 96%;
        height: 96%;
        font-size: 20px;
    }

    #desliga-output-red{
        width: 96%;
        height: 96%;
        font-size: 20px;
    }

    #digital{
        width: 7em;
        height: 7em;
    }

    .digital-item{
        width: 2em;
        height: 2em;
    }

    #avanca-output{
        font-size: 20px;
    }

    #recua{
        font-size: 20px;
    }

    #gira-direita-output{
        font-size: 20px;
    }

    #gira-esquerda-output{
        font-size: 20px;
    }

    #avanca-output-red{
        font-size: 20px;
    }

    #recua-red{
        font-size: 20px;
    }

    #gira-direita-output-red{
        font-size: 20px;
    }

    #gira-esquerda-output-red{
        font-size: 20px;
    }

    .botoes-esquerda{
        width: 100%;
    }

    .botoes-direita{
        width: 100%;
    }
    .superior-esquerda{
        width: 3em;
        height: 1.3em;
    }
    
    .inferior-esquerda{
        width: 2em;
        height: 2em;
    }

    .superior-direita{
        width: 3em;
        height: 1.3em;
        margin-top:4%;
    }
    
    .inferior-direita{
        width: 2.5em;
        height: 2.5em;
    }

    .superior-direita2{
        width: 1.3em;
        height: 3em;
        margin-left: 5.5%;
        top:9%;
    }

    .secondary{
        display:none;        
    }

    svg{
        display: none;
    }
}