body{
    background-color:black;
}

#box{
    display: grid;
    grid-template-rows:.03fr 2fr;

}

#container{
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
    justify-content: center;
    border:2px solid black;
    

}
.main{
    display:block;
    align-items: center;
}

.b1{
    background-color: rgb(199, 211, 221);
    border:2px solid black;
    margin: 10px;
    text-align: center;
    border-radius: 5%;
    
}

h3{
text-decoration:bold;
font-size:1.3rem;
}

#area1{
    width:100%;
    height: 40vh;
    background-color:#1d1e22;
    font-size: 15px;
}
#area2{
    width:100%;
    height: 40vh;
    background-color:#1d1e22;
    font-size: 15px;
}
#area3{
    width:100%;
    height: 40vh;
    background-color:#1d1e22;
    font-size: 15px;
}

#iframe {
    width: 100%;                   
    height: 100%;                   
    border: none;                   
              
    overflow: hidden;               
    margin: 20px 0;                 
    background-color: #f9f9f9;       
    
}

@media (max-width:500px) {
    .container{
        display:flex;
        width:100%;
        height:200vh;
        background-color: aquamarine;
     flex-direction: column;   
     
    
    }

    .b1{
        background-color: rgb(199, 211, 221);
        border:2px solid black;
        margin: 10px;
        text-align: center;
        border-radius: 5%;
        width: 90%;
        height:100%;
        
    }
    
    .outerbox{
        display: flex;
        flex-direction: column;
        height: 300vh;

    }

    textarea{
        font-size: 18px;
        
    }

    .ifram{
        height:100vh;
    }
    
}

.nav{
    display: flex;
    width:100%;
    height:50px;
    background-color:black;
    margin-bottom: 20px;
    border-radius: 5%;
    justify-content: end;
    gap: 10px;
    border-bottom: 2px solid grey;

}

.b2{
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10%;
    background-color:#454856;
    color:white;
    font-size: 16px;
}
.bsign{
    background-color: #47cf73;
}

#btn {
 
    padding: 10px;
    background-color: #08b419e6;
}

.lbtn{
  height:80%;
}

.layout{
    display:inline-block;
    position: relative;
}


.layout_content{
    display: none;
    flex-direction: column;
    position:absolute;
    left:30px;

}

.a11{
    text-align: center;
    width:60px;
    font-size: 18px;
    
    height: 30px;
    background-color: #ffffff;
    border: 1px solid black;
}

.layout:hover .layout_content{
        display:flex;
    }

 
    .main_html .main_css  .main_js{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 1fr;
   
    }

    .html{
        display:flex;
    }
    #html1{
        display: inline;
        background-color: #1d1e22;
        width: 96px;
        height: 38px;
        text-align: center;
        font-size: 18px;
        color:#AAAEBC;
    }

    .css{
        display:flex;
    }
    #css1{
        display: inline;
        background-color: #1d1e22;
        width: 96px;
        height: 38px;
        text-align: center;
        font-size: 18px;
        color:#AAAEBC;
    }

    
    .js{
        display:flex;
    }
    #js1{
        display: inline;
        background-color: #1d1e22;
        width: 96px;
        height: 38px;
        text-align: center;
        font-size: 18px;
        color:#AAAEBC;
    }


    #area1{
        color:lime;
        border:2px solid lime;
    }
#area2{
    color:aqua;
    border:2px solid aqua;
}

#area3{
   
    color: yellow;
    border:2px solid yellow;
}

#area1:focus {
   border:3px solid aquamarine;
}
#area2:focus {
    border:3px solid aquamarine;
 }
 #area3:focus {
    border:3px solid aquamarine;
 }

 /* .box
 .container
 .ifram */