:root {
--medium-key: #E29A97; /* #002c5d; */
--h1originalverde: #E29A97; /* #1abc9c; */
/* --light-key: #f8efef; #e4f3f3; */
--mid-green: #2ba3af;
--pink:lightpink;
--main-background: #fbfcf4;
--main-background-light: #fffffd;
--dark-key: #8c454b;
--light-key: #fbf2ee; /* del wordpress elegido */
/*
#E29A97
*/
}
body {
    padding: 0;
    margin: 0;
}
.wrapper {
   /* background-color: white; */
    /* background: var(--main-background); */
   padding: 30px; 
   font-family: 'mimo','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.container {
    display: flex;
    align-items: center;
    margin: 4rem 0;
}

.to-right {
    flex-direction: row-reverse;
}

.picture-left{
    width: 100%;
}

img{
    width: 100%;
}

.title {
    width: 100%;
    height: 100%;
    padding: 35px;
    text-align: center;
    vertical-align: middle;
}

h1 {
    color: var(--medium-key);
}


.block-text {
    padding: 80px;
    text-align: center;
} 

.background-green {
    color: white;
    background-color: var(--h1originalverde);
}

.b-light {
    background-color: var(--light-key);
}

.b-medium {
    background-color: var(--medium-key);
}

.b-dark {
    background-color: var(--dark-key);
}

.b-white {
    background-color: white;
}

.b-picture {
    background-image: url(./img/Aprende-a-vivir-con-una-ostomía-y-sus-complicaciones-1.jpg);
}

.overlay {
    height: 300px;
    padding: -4rem;
    opacity: 0.9;
    z-index: -1;
    display:flex;
    justify-content: center;
    align-items: center;

}

.white {
    color: white;
}

.black {
    color:black;
}

.medium {
    color: var(--medium-key);
}

.dark {
    color: var(--dark-key);
}


button {
    background-color: var(--dark-key);
    color: white;
    font-weight: 700;
    border: 0;
    padding: 15px;
    border-radius: 20px;
}


.nav__list {
    list-style: none;
    display:flex;
    gap: 1rem;
    /* .nav__list{display:flex; gap:1rem; list-style:none; margin:0; padding:0} */
}

a {
    text-decoration:none;
    font-size: 1.3rem;
    color: var(--medium-key);
}
a:hover {
    color: var(--dark-key)
}

.logo {
    width: 10%;
}

header {
    display: flex;
    align-items: center;
}

.card {
    /* background: linear-gradient(to right, var(--main-background),  #fde2e1); */
}  

@font-face {
  font-family: "mimo";
  src: url("font-mimo.woff2") format("woff2");
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}