html {
  scroll-behavior: smooth;
}
 
<style type="text/css">
.Estilo1 {font-size: 16px; 	font-family: roboto; margin: 8px; text-align:left }

.Estilo10 {
	font-size: 120px;
	color: #000000;
}
.Estilo11 {font-size: 25px}

.div-1 {
        background-color: #ABBAEA;
    }


 </style>
  


  
  @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Cormorant:wght@300&family=Fira+Sans+Condensed&family=Miniver&family=Libre+Baskerville&display=swap&family=Roboto&family=Seaweed+Script&display=swap');
  


body {
  text-align: center;	        }

 #main {
   min-height: auto;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row wrap;
           flex-flow: row wrap;   }
		   

     #main section{
   min-height: auto;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row wrap;
           flex-flow: row wrap;
   }
   
     #main > section  {
   margin: 3px;
   padding: 3px;
   -webkit-flex: 1 1 60%;
           flex: 1 1 60%;
   -webkit-order: 1;
           order: 1;
   }
  

           
           
   #main > section > article {
    border: 1px solid;
   border-radius: 10px;
   margin: 30px;
   padding: 10px;
   text-align: center;
   min-height: auto;
   max-height: 100%;
   -webkit-flex: 1 1 40%;
           flex: 1 1 40%;
   -webkit-order: 2;
           order: 2;   }
		   
		   
  #main > aside {
    float:right;
  text-align: center;
	align:top;
   margin: 6px;
   padding: 5px;
   border: 1px solid;
   -webkit-flex: 3 1 7%;
           flex: 3 1 7%;
   -webkit-order: 3;
           order: 3;   }
 header {
   display: block;
   margin: 6px;
   padding: 5px;
   width:100%
   min-height: auto;
   max-height: 100%
   }
  
footer {
   display: block;
   text-align: center;
   margin: 6px;
   padding: 5px;
   width:100%
   min-height: auto;
   max-height: 100%   }
 
      #main > blog {
   margin: 6px;
   padding: 5px;
    border: 1px solid #FAEBD7;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 5;
           order: 5;   }
  
   #main > redes {
   margin: 6px;
   text-align: center;
   padding: 5px;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 6;
           order: 6;   }


.Estilo1 {font-size: 22px; 	font-family: roboto; margin: 8px; text-align:left }
.EstiloencabezadoA {font-size: 36px;  font-family: roboto; margin: 8px; text-align:center  }
.EstiloencabezadoB {font-size: 28px; font-family: roboto; margin: 0px; text-align:left }


.portada {width:250px;}

   
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #666666;
}


  @media all and (max-width: 500px) {

#main > section > article {
    border: 1px solid;
   border-radius: 10px;
   margin: 15px;
   padding: 10px;
   text-align: center;
   min-height: auto;
   max-height: 100%;
   -webkit-flex: 3 1 25%;
           flex: 3 1 25%;
   -webkit-order: 2;
           order: 2;   }
		   

.Estilo11 {font-size: 15px}

.Estilo1 {font-size: 13px; 	font-family: roboto; margin: 8px; text-align:left }


.portada {
      width:55%;}