@import url ('https://fonts.googleapis.com/css2? family = Roboto: ital, wght @ 0,400; 0,700; 1,300 & display = swap'); 
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

*{ padding: 0; margin: 0; box-sizing: border-box;}
body {background: #F9FAFA; font-family: 'Roboto', sans-serif; text-align: center; }
footer {background: white; font-weight: 300; padding: 4rem;}
header {background: #FF5500; color:white; text-align: center; padding: 4rem}
h1 {font-family: 'Lobster', cursiva; font-size: 4rem;}
h2 {font-weight: 700; font-size: 2rem; padding: 1rem; }
ul li{ list-style-type: none; }
.micamino {font-weight: 700; font-size: 1.5rem; color: #FF5500;}
.mifoto {border-radius:50%;}
.logo {width: 50%;}
nav { padding: 2rem; text-align: center}

.comp {text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    padding: 1rem;
    line-height: normal;
    color: white;
    border-radius: 2rem;
    border: 2px solid white;}

a {text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    padding: 0.5rem;
    line-height: normal;
    color: black;
    border-radius: 2rem;
    border: 1px solid black;}

.columnas{
    display: flex;
    width: 95%;
    margin: 2em auto;
}
.primero, .segundo, .tercero{
    margin:0 auto;
}





@media (min-width:576px) {
    
    body{background: #D2F7FF;}
    header {background: #1A1AFF;}
 
   .micamino {color: #1A1AFF}
    
}

@media screen and (max-width: 576px){
    .columnas{display: initial;}

}
    
    .principio {width: 50%; }
    .final {width: 50%; }
 

    .comp {text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    padding: 1rem;
    line-height: normal;
    color: #67d3ae;
    border-radius: 2rem;
    border: 2px solid #7fffd4;}
    
    
}