*{
	margin:0;
	padding:0;
}

body{
	background-color:rgb(245, 245, 245);
}

.boton{
    height:30px; 
    width:70px;

    background-color:#5479FF;
    color:#ffffff;

    border:none;
    border-radius:5px;

    cursor:pointer;
}

.boton:hover{
    background-color:#0037ff;
    color:#ffffff;
}

textarea
{
    border:1px solid lightgray;
    border-radius:5px;
    padding:10px;
}

a{
	font-family:sans-serif;
	font-weight:normal;
	color:#5479FF

}

#menu{
	height:auto:;
	width:100%;
	background-color:none;
	margin:auto;
	margin-bottom:20px;

}

#web{
	height:auto;
	margin:auto;
	text-align:left;
	background-color:none;
	max-width:580px;
}
h1{
	font-family:sans-serif;
	font-weight:normal;
	color:#5479ff;
}

h4{
	font-family:sans-serif;
	font-weight:normal;
	color:#6e6e6e;
	font-size:17px;
}

pre{
	font-family:sans-serif;
	font-weight:normal;
	color:#6e6e6e;
	margin-bottom:60px;
	font-size:16px;
}

h5{
	font-family:sans-serif;
	font-weight:normal;
	color:#b2c3ff;
	margin-bottom:17px;
	font-size:0.7rem;
}

.unit{
	background-color:#ffffff;
	padding-block:15px;
    padding-inline:15px;
	max-width:95%;
	padding-bottom:18px;
	border-radius:5px;/*8*/
	margin-bottom:15px;/*25*/
	border:0px solid #202020;
}
.resp{
	font-family:sans-serif;
	font-weight:normal;
	color:rgb(82, 82, 82);
	font-size:15px;
    margin-top:20px;
	/*margin-left:20px;*/
}

.preg{
	font-family:sans-serif;
	font-weight:normal;
	color:#5479FE;
	margin-bottom:7px;
	font-size:17px;
}



#title{
	margin:auto;
	margin-bottom:5px;
	margin-top:20px;
	width:100%;
	height:auto;
	background-color:none;
}

img{
	width:100%;
	max-width:200px;
	max-height:200px;
	height:auto;
	margin-bottom:10px;
}

#marcoimg{
	height:auto;
	text-align:center;
	width:100%;
	background-color:none;
	margin-bottom:10px;
}

h4 #marcoimg{
	text-align:left;
}


button{
	background-color:#9e9e9e;
	color:white;
	width:120px;
	height:35px;
	border:none;
	border-radius:5px;
}

button:hover{
	background-color:white;
	color:#9e9e9e;
	border: 1px solid#9e9e9e;

}

button:focus{
	background-color:#eb6060;
	color:white;
	border: none;
}


details > summary{
    list-style: none; /*Remove arrow (except in webkit...)*/
    cursor: pointer;
}

details > summary::-webkit-details-marker {
    display:none; /*Remove arrow (for webkit)*/
}


.expandir{
    position:relative;
    padding:10px;
    background-color:rgb(233, 233, 233);
    color:darkgray;
}

.expandir::after{

    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' style='fill:black'%3E%3Cpath d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/%3E%3C/svg%3E");

    --medida: 20px;
    height:var(--medida);
    width:var(--medida);

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    right:0;
    margin-right:10px;

    opacity:15%;
}

details[open] .expandir::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M200-440v-80h560v80H200Z'/%3E%3C/svg%3E");

    --medida: 20px;
    height:var(--medida);
    width:var(--medida);

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}















@media screen and (max-width:600px){
	#web {
			margin-left:15px;
			margin-right:15px;
			}
}