@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
        * {
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
            text-decoration: none;
            list-style: none;
        }
        
        body {
            min-height: 100vh;
            width: 100vw;
            background-color: rgb(30, 30, 20);

            display: grid;
            
            align-content: start;
            justify-items: center;
            overflow-y: auto;
            
        }
        
        h1{
            color: gray;
            margin-bottom: 10px;
        }
        
        .date{
            font-size: 1.5em !important;
            text-align: center;
            color: white;
            margin-top: 50px;
        }
        
        .relogio {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            width: 400px;
            background-color: transparent;
            padding: 20px;


        }
        .relogio div {
            height: 60px;
            width: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: transparent;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, .7);
            border-radius: 7px;
            letter-spacing: 3px;
        }
        
        .pontinhos{
            font-size: 3em;
            color: white;
            width: 25px;
            text-align: center;
        }
        .relogio h1 {
            color: gray;
        }
        .relogio span {
            font-weight: bolder;
            font-size: 50px;
        }
        
        .relogio span.tempo {
            font-size: 10px;
            visibility: hidden;
            
        }
        
        
       
      
        

        .flutuante {
            display: grid;
            align-items: start;
            justify-content: start;
            width: 290px;
            /* height: 400px; */
            /* background-color: rgb(0, 20, 0); */
            /* background-color: rgb(66, 66, 53); */
            background-color: transparent;
            
            border-radius: 3px;
            box-shadow: 8px 8px 15px black;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 30px;
            font-size: 12px;
            margin-bottom: 50px;
        }
        .flutuante li{
            list-style-type: none;
            /* display: block; */
            width: 300px;
        }
        .flutuante a{
            text-decoration: none;
            color: darkolivegreen;
            /* display: block; */
            padding: 10px 5px;
            transition: .9s;
            font-weight: bold;
            font-family: verdana;
        }
        .flutuante a:hover{
            color: white;
            background: darkgreen;
            cursor: pointer;
        }
        .listaAulas{
            display: flex;
            gap: 10px;
        }
        .listaAulas li{
            list-style-type: none;
            display: block;
            width: 130px;
        }
        .listaAulas a{
            text-decoration: none;
            color: darkolivegreen;
            display: block;
            padding: 10px 10px;
            transition: 1.2s;
            font-weight: bold;
            font-family: verdana;
            border-radius: 30px;
        }
        .listaAulas a:hover{
            color: white;
            background: green;
            cursor: pointer;
        }
        .link>ul>li{
            text-decoration: none;
            list-style: none;
            color: gray;
            
        }
        .link>ul>li>a{
            text-decoration: none;
            color: darkolivegreen;
            display: block;
            padding: 10px 10px;
            transition: 1.2s;
            font-weight: bold;
            font-family: verdana;
            border-radius: 30px;
            
        }
        
        

        .codigo{
            
            display: grid;
            justify-content: center;
            align-content: start;
            gap: 5px;
            
            background-color: transparent;
            border-radius: 30px;
            box-shadow: 8px 8px 15px black;
            color: white;
            font-family: tahoma;

            width: 400px;
            /* min-height: 30vh; */
            margin-bottom: 50px;
            
        }
        .codigo > h2{
            color: rgb(227, 227, 150);
            padding: 5px 50px;
        }
        .codigo > pre{
            margin-left: 20px;
            min-height: 300px;
            display: grid;
            justify-content: start;
            align-items: center;
            padding: 20px;
            /* background-color: rgb(5, 47, 72); */
            background-color: black;
            border-radius: 30px;
            border-style: 1px groove;
            box-shadow:inset 2px 2px 5px black;
            /* box-shadow: 4px 4px 8px gray; */
            
            font-family: tahoma;
            font-size: .9em;
            
            width: 320px;
            /* min-height: 30vh; */
            margin-bottom: 20px;
            
            overflow-x: auto;
        }
        .codigo > p{
            color: yellow;
            
            padding: 5px 20px;
            margin-bottom: 20px;
        }


        #codigo_php{
            display: block;
            color: white;
        }
        #codigo_py{
            display: none;
            color: SkyBlue;
        }
        #codigo_js{
            display: none;
            color: rgb(218, 171, 171);
        }
        #codigo_rb{
            display: none;
            color: rgb(218, 171, 171);
        }
        #codigo_c{
            display: none;
            color: lightpink;
        }
        #codigo_cpp{
            display: none;
            color: lightpink;
        }

        #codigo_java{
            display: none;
            color: yellow;
        }
        #codigo_csharp{
            display: none;
            color: yellow;
        }
        #codigo_go{
            display: none;
            color: yellow;
        }
        #codigo_ko{
            display: none;
            color: yellow;
        }
 
        #codigo_ru{
            display: none;
            color: yellow;
        }
        #codigo_da{
            display: none;
            color: yellow;
        }
 

        
.resultado-titulo{
    display: grid;
    justify-content: start;
    align-items: center;
    width: 350px;
    /* min-height: 80px; */
    /* padding: 0px 20px; */
    background-color: transparent;
    /* border-radius: 30px; */
    /* box-shadow: 4px 4px 8px gray; */
    color: rgb(227, 227, 150);
    font-family: tahoma;
}
.resultado-titulo > h2{
    
    color: rgb(227, 227, 150);
    padding: 2px 10px;
}
.resultado{
    margin-top: 10px;
    display: grid;
    justify-content: start;
    align-content: center;
    width: 400px;
    min-height: 100px;
    /* padding: 20px; */
    background-color: indigo;
    border-radius: 30px;
            box-shadow: 8px 8px 15px black;
    color: white;
    font-family: tahoma;
    font-size: 1.2em;
    margin-bottom: 20px;
}



#root_php{
    padding: 30px;
    padding-left: 50px;
    display: block;
}
/* #root_js{
    padding: 30px;
    padding-left: 50px;
    display: none;
}
#root_cod{
    padding: 30px;
    padding-left: 50px;
    display: none;
} */




        b{
            font-family: verdana;
            color: blue;
        }
        strong{
            font-family: verdana;
            color: red;
        }
        span{
            font-family: verdana;
            font-weight: bolder;
            font-size: 1.5em;
        }



        
        .botoes1{
            display: flex;
            justify-content: end;
            gap: 2px;
            /* padding: 5px 20px; */
            
        }

        .bt_py{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            font-weight: bold;
            background-color: darkblue;
            color: white;
            transition: .3s;
        }
        .bt_py:hover{
            background-color: lightblue;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        
        .bt_ru{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            font-weight: bold;
            background-color: sienna;
            color: white;
            transition: .3s;
        }
        .bt_ru:hover{
            background-color: peru;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        
        .bt_cpp{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: lightpink;
            color: black;
            transition: .3s;
            font-weight: bold;
        }
        .bt_cpp:hover{
            background-color: red;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        .bt_csharp{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: DarkKhaki;
            color: black;
            transition: .3s;
            font-weight: bold;
        }
        .bt_csharp:hover{
            background-color: yellow;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        .bt_ko{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: orange;
            color: black;
            transition: .3s;
            font-weight: bold;
        }
        .bt_ko:hover{
            background-color: yellow;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }



        /* ---------------------------------------------------- */
        .botoes2{
            display: flex;
            justify-content: end;
            gap: 2px;
            /* padding: 5px 20px; */
            
        }
        
        .bt_php{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            font-weight: bold;
            background-color: MediumPurple;
            color: black;
            transition: .3s;
        }
        .bt_php:hover{
            background-color: indigo;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        
        .bt_js{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            font-weight: bold;
            background-color: lightgreen;
            color: black;
            transition: .3s;
        }
        .bt_js:hover{
            background-color: darkgreen;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        
        .bt_c{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: lightblue;
            color: black;
            transition: .3s;
            font-weight: bold;
        }
        .bt_c:hover{
            background-color: blue;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        .bt_java{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: yellow;
            color: black;
            transition: .3s;
            font-weight: bold;
        }
        .bt_java:hover{
            background-color: orangered;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }

        .bt_go{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: darkgreen;
            color: white;
            transition: .3s;
            font-weight: bold;
        }
        .bt_go:hover{
            background-color: lightgreen;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }

        .bt_rb{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: red;
            color: white;
            transition: .3s;
            font-weight: bold;
        }
        .bt_rb:hover{
            background-color: yellow;
            color: black;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }
        
        .bt_da{
            padding: 5px;
            width: 42px;
            border-radius: 10px;
            background-color: DodgerBlue;
            color: white;
            transition: .3s;
            font-weight: bold;
        }
        .bt_da:hover{
            background-color: DarkBlue;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }

       
        


        
        .header{
            position: fixed;
            top: 0;
            margin: 0 auto;
            width: 100vw;
            /* background: gray; */
        }
        .header > div{
            display: flex;
            justify-content: start;
            /* margin-left: 20px; */
            padding: 5px 0px;
        }


        .bt-voltar{
            width: 60px;
            border-radius: 10px;
            font-weight: bold;
            background-color: lightgreen;
            transition: .3s;
        }
        .bt-voltar>a{
            color: black;
            display: block;
            padding: 2px 5px;
        }
        .bt-voltar>a:hover{
            color: white;
        }
        .bt-voltar:hover{
            color: white;
            background-color: darkgreen;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }

        .bt-inicio{
            width: 100px;
            border-radius: 10px;
            font-weight: bold;
            font-size: .6em;
            background-color: white;
            transition: .3s;
            
        }
        .bt-inicio>a{
            color: black;
            display: block;
            padding: 2px 5px;
        }
        .bt-inicio>a:hover{
            color: white;
            
        }
        .bt-inicio:hover{
            color: white;
            background-color: darkgreen;
            font-weight: bold;
            cursor: pointer;
            transform: translate(-2px, -5px);
            box-shadow: 4px 4px 6px black;
        }

        .voltar_home{
            display: flex;
            gap: 4px;
            align-items: start;
            justify-content: end;
            width: 329px;
            /* height: 400px; */
            /* background-color: rgb(0, 20, 0); */
            /* background-color: rgb(66, 66, 53); */
            background-color: transparent;
            
            border-radius: 3px;
            /* box-shadow: 8px 8px 15px black; */
            /* padding: 20px; */
            margin-bottom: 20px;
            /* border-radius: 30px; */
        }



        @media only screen and (min-width: 800px) {

            .codigo{
                width: 900px;
            }
    
            .codigo > pre{
                width: 820px;
            }
        }