*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins' , sans-serif; }
nav2{width: 100%; height: 40px; background-color: #009688; position: fixed; display: flex; align-items: center; justify-content: space-between; }
nav2 ul{display: flex; }
nav2 ul li {margin: 12px 6px; list-style: none; }
nav2 ul li a{color: #fff; font-weight: 600; text-decoration: none; }
nav2 ul li a:hover{color: red; font-weight: 600; text-decoration: none; }
nav2 ul li a:active{color: yellow; font-weight: 600; text-decoration: none; }

.w3-sidebar a:hover{background-color: #9099a2; border-radius:2px; }
.w3-sidebar .active{background-color: #009688; color: rgb(226, 242, 3); font-weight: 600; border-radius:2px; }

.htmlcode{background:#a0a8bb!important;  border:0!important; border-radius:5px; height:auto;}
.htmlresult{background:#d8b0b0!important; border:0!important; padding:8px; border-radius:5px; height:100%; box-shadow: 0 4px 8px 0 rgb(251, 250, 250);}
.paragraph{margin:0 0 20px 0; padding:0; }
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

.w3-sidebar{height:100%; width:210px; background-color:#d1e0e0 ;position:fixed!important; z-index:1; overflow:auto; margin-top:3rem;}

.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left;}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%; display:block; padding:3.5px 14px; text-align:left; border:none; white-space:normal; float:none; outline:0}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}
.w3-teal,.w3-hover-teal:hover{
    color:#fff!important;
    background-color:#009688!important;
    font-size:1.4rem;
}

.w3-button{border:none; display:inline-block; padding:3.5px 16px; vertical-align:middle; overflow:hidden; text-decoration:none; color:inherit; background-color:inherit; text-align:center;cursor:pointer;white-space:nowrap}


@media (max-width:992px) and (min-width:601px){
    .w3-hide-medium{display:none!important; }
    
}
@media (min-width:993px){
    .w3-modal-content{width:900px; }
    .w3-hide-large{display:none!important; z-index:2;}
    .w3-sidebar.w3-collapse{display:block!important; }
    /* Big Screen */
    .flex{display:flex; font-size:20px;}
    .flex .box1{margin:1.5px; width:75%; height:100%; padding:0 18px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color: #fff; border-radius:5px; transition: 0.6s; }
    .flex .box2{margin:1.5px; width:24.5%;  height:100%; padding:0 18px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color: #fff; border-radius:5px; transition: 0.6s; }
    
}
@media (max-width:992px){
    .w3-sidebar.w3-collapse{display:none; }
    .w3-main{margin-left:0!important; margin-right:0!important;}
    .w3-auto{max-width:100%; }
    /* Small Screen */
    .flex{display:block; font-size:20px;}
    .flex .box1{margin:1.5px; width:99.5%; height:100%; padding:0 18px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color: #fff; border-radius:5px; transition: 0.6s; }
    .flex .box2{margin:1.5px; width:99.5%;  height:100%; padding:0 18px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color: #fff; border-radius:5px; transition: 0.6s; }
    
}