@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

html{
	scroll-behavior: smooth;
    font-family: 'Roboto', cursive;
}


p{
	font-family: 'Roboto', cursive;
	font-size: 40px;
    font-weight: 700px;
    box-shadow: 5px 5px 0px;
    border-radius: 3px;
    background-color: #fff;
    margin: auto;
    margin-bottom: 50px;
    margin-block-start: 1em;
    width: 500px;
}

img{
    size: 28px;
}

body{
    background: url(/images/onda.svg) no-repeat, url(/images/olha_a_onda.svg) no-repeat, linear-gradient(to bottom,#464646, #000, #5b5f62);
    background-size: cover;
}

code{
	background-color: rgb(164, 166, 168);
	width: 100%;
	padding: 4px 12px 4px 12px;
	border-radius: 3px;
}

.tarea{
	line-height: 20px;
}
.tool{
    color: black;
    text-decoration: none;
    background: linear-gradient(to right, #8c5ccb, #4099ff);
    padding: 3px 5px 3px 3px;
    margin: 1.5px;
    border-radius: 3px;
    font-family: 'Roboto', cursive;
    font-weight: 700;
    font-size: 19px;
    transition: 0.5s;
}
.tool:hover{
	background-color: pink;
}
.tool:active{
	background-color: pink;
	color: rgb(93, 93, 136);
}

#port{
	text-decoration: none;
	color: black;
}
#grid{
	margin-left: 15%; margin-right: 15%;
}
#toolbar{
    z-index: 1;
    position: sticky;
    top: 15px;
    background: linear-gradient(to top, #141415,#242f38);
    border-radius: 5px;
    border: solid rgba(5,5,5,.5) 3px;
    margin-left:29%;
    display: inline-flex;
    text-align: center;
}

#rtext{
	padding: 15px;
	min-height: 600px;
	word-break: break-all;
	background: #e6e3e1;
	width: 100%;
	transform: translateX(-15px);
	border: solid black 1px;
	border-radius: 7px;
    transition: 1s;
}
[contenteditable]:focus{
	outline: none;
}
#rtext:hover{
    box-shadow: 3px 3px 0px #000000;
    border-radius: 10px;
    background-color: #fff;
    transition: 1s;
}
#source{
	height: auto;
	min-height: 600px;
	width: 100%;
	padding: 15px;
	border: solid black 1px;
	border-radius: 7px;
	resize: none;
	word-break: break-all;
}
#source:focus{
	outline: none;
}
#sarea{
	transform: translateX(-15px);
	margin-left: 15%; margin-right: 15%;
}