html,body { height:100%; width:10;}

#editor {
/*height: 90%;
width:60%;*/
display:inline-block;
}

#container {
    white-space : nowrap;
/*margin: 30px;
height:70%;
width:50%;
padding-left: 10px;
padding-top: 0px;



margin-left: 170px;
margin-top: -260px;*/
/* overflow : hidden; */
/* position:relative; */
}

#iframe {
/*height:90%;
width:60%;*/
display:inline-block;

border: 3px solid black;

}

/* disable tag matching */
.ace_editor .ace_marker-layer .ace_bracket { display: none }

@media screen and (max-width: 900px) and (min-width: 600px){
	[id="container"]{
		width: 40%;
		height: 20%;
		margin-left: 30%;
		margin-top: -30%;
	}
	[id="iframe"]{
		width: 40%;
		height: 20%;
	}
	[id="editor"]{
		width: 40%;
		height: 20%;
	}
	[id="instruction-card"]{
		background-image: linear-gradient(to right,rgb(250,158,73),rgb(242,86,75));
		font-size: 1rem;
		font-weight: 600;
        border-radius: 10px;
        padding: 5px 5px 5px 10px;
        color: white;
        height: 13rem;
        width: 40rem;
	}
	[id="card-info"]{
		background-color: #232b3b;
		font-size: 1rem;
		font-weight: 600;
        border-radius: 10px;
        padding: 25px 5px 5px 10px;
        height: 13rem;
	}
	[class*="btn"]{
		width: 80px;
		height: 40px;
		margin-top: 10px;
	}
	[id="btn-row"]{
		margin-bottom: 5%;
		margin-left: 5%;
        margin-right: auto;
	}
}




@media screen and (max-width: 1100px) and (min-width: 900px){
	[id="container"]{
		width: 62%;
		height: 60%;
		margin-left: 10%;
		margin-right: auto;
	}
	[id="iframe"]{
		width: 62%;
		height: 60%;	
	}
	[id="editor"]{
		width: 62%;
		height: 60%;
	}
	[id="instruction-card"]{
		background-image: linear-gradient(to right,rgb(250,158,73),rgb(242,86,75));
		font-size: 1rem;
		font-weight: 600;
        border-radius: 10px; 
        padding: 5px 5px 5px 10px;
        color: white;
        width: 50rem;
        height: 12rem;
        margin-left: auto;
        margin-right: auto;
	}
	[id="card-info"]{
		background-color: #232b3b;
		font-size: 1rem;
		font-weight: 600;
        border-radius: 10px;
        padding: 25px 5px 5px 10px;
        width: 50rem;
        height: 13rem;
     	margin-left: auto;
        margin-right: auto;
	}
	[class*="btn"]{
		width: 90px;
		height: 40px;
		margin-top: 10px;
		margin-right: 5px;
	}
	[id="btn-row"]{
		margin-bottom: 5%;
		margin-left: 5%;
        margin-right: auto;
	}
}



@media screen and (max-width: 1600px) and (min-width: 1100px){
	[id="container"]{
		width: 60%;
		height: 75%;
		margin-top: -35%;
		margin-left: 30%;
		
	}
	[id="iframe"]{
		width: 57%;
		height: 85%;
		
	}
	[id="editor"]{
		width: 57%;
		height: 85%;
	}

	[class*="btn"]{
		width: 90px;
		height: 40px;
		margin-top: 10px;
		margin-left: 10px;

	}
	[id="btn-row"]{
		margin-left: 5%;
	}
	[id="instruction-card"]{
		background-image: linear-gradient(to right,rgb(250,158,73),rgb(242,86,75));
		font-size: 1rem;
		font-weight: 600;
		margin-left: 5%;
		width: 24rem;
		padding:5px 10px 5px 10px;
		border-radius: 10px;
            
	}
	[id="card-info"]{
		background-color: #232b3b;
		font-size: 0.9rem;
		font-weight: 600;
		margin-left: 5%;
        padding:5px 10px 0px 10px;
        border-radius: 10px;
	}
}