@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400,900&display=swap');

*{
margin: 1;
}


body { 
background-color: #e7f0f8;
 font-family: 'open sans', sans-serif;
    color: #ff2963;
width: 90%;
}

header { 
 background-color: rgb(94, 144, 255);
    width: 97%; 
    margin: 1% auto;
    min-height: 50px;
    color: #e7f0f8;
    transition: .5s all;
    
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

header:hover { 
 background-color: rgb(94, 144, 255);
    width: 95%; 
    margin: 1% auto;
    min-height: 200px;
    transition: 2s all;
}

.logocat{
    display: flex;
    justify-content: flex-start;
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: space-around;
    flex-wrap: wrap;
    
    
} 


.menu > a
{
 text-decoration: none;  	 
    
 box-sizing: border-box;
 padding: 15px;
    
 font-family:'Roboto', sans-serif;
 font-style: normal;
 color: #e7f0f8;
  
 }

.menu > a:hover 
{
	color: #ff2963;
}



footer { 
    background-color: rgb(94, 144, 255);
     width: 95%; 
    margin: 1% auto;
    color: #e7f0f8
}

main {
    width: 80%;
    min-height: 620px;
    height: auto;
    margin: 1% auto;
}

img {
    
max-width: 100%;
height: auto;
}

h1, h2, h3, h4, h5, h6 { 
    color: #ff2963;  
    font-family: 'Roboto', sans-serif;
    font-style: normal
}

main p { 
font-family: 'Roboto', sans-serif;
font-style: normal;
color: #f07999;
}

section class="Sobre Mi" p { 
font-family: 'Roboto', sans-serif;
font-style: italic
}

ul {
    list-style: square;
    padding: 0;
}

main ul {
    
    align-content: flex-start;
    display: grid;
}

.rosario {
    background-color: #d2e7fa;
    padding: 5%;
}

.rosarioinfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;  
    
}

.links {
    
    display: flex;
    flex-wrap: nowrap;
}


@media screen and (min-width:674px) {
    
    .rosario {
        display: flex;
        justify-content: space-around;
        max-width: 500px;
    }
    
    .rosariofoto {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    main {
        
        width: 55%;
    }
    
    main p { 
        max-width: 500px;
    }
         }

@media screen and (min-width:1000px) {
    
    
}