@charset "utf-8";
@import url('https://itproger.com/css/main-font.css');

* {
  padding: 0;
  margin: 0;
  outline: none;
}

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

body {
	background: #2F3129;
	font-family:Montserrat,sans-serif;
	font-weight:300;
	font-size:1rem;
	color: #232323;
	overflow-anchor:auto;
	scroll-behavior:smooth;
	font-size-adjust:100%;
	-webkit-font-size-adjust:100%;
	-ms-font-size-adjust:100%;
	-webkit-text-size-adjust:none;
}

p {line-height: 170%}

.container {
    width: 100%;
    float: left;
}

#container {
	min-height: 100%;
	display: flex;
}

@media(min-width: 561px) {#editor, #frame_panel {width: 50%}}
@media(max-width: 560px) {
	#container {flex-wrap: wrap} 
	#editor, #frame_panel {width: 100%}
}

#editor {border: 2px solid #212121; font-size: 14px;}
#editor ::-webkit-scrollbar {width: 5px}
#editor ::-webkit-scrollbar-thumb {
    background: #E06149; 
    -webkit-box-shadow: inset 0 0 6px #E06149; 
}

#frame_panel {
	position: relative;
	background: #f2f2f2;
	border: 2px solid #212121;
}

#iframe {width: 100%}

#url_link {
	background: #fbfbfb;
	width: 100%;
	float: left;
	border-bottom: 1px solid silver;
}

#url_link button {
	float: left;
	padding: 15px 20px;
	border: 0;
	font-size: 17px;
	font-weight: 700;
	background: #dadada;
	color: #666666;
	cursor: pointer;
	width: 70px;
}

#url_link button:first-of-type i {transform: scale(1.5)}
#url_link button:hover {background: #d4d4d4}

#url_link div.url {
	float: left;
	margin-left: 15px;
	color: #7e7e7e;
	font-weight: 500;
	font-size: 17px;
	padding-top: 15px;
}

@media(max-width: 450px) {
	#url_link button {
		font-size: 14px;
		padding: 5px 12px;
	}
	
	#url_link div.url {
		font-size: 14px;
		padding-top: 5px;
	}
	#url_link {margin-bottom: 15px;}
}