* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: rgb(241, 239, 236);
}

h1 { font-size: 3.5em; }

h2 { font-size: 2.8em; }

h3 { font-size: 2.5em; }

p  { font-size: 1.25em; }

button {
  font-size: 1.5em;
  width: 250px;
  height: 80px;
  border-radius: 15px;
  border: 2px solid rgb(18, 52, 88);
  box-shadow: 2px 2px 10px rgba(18, 52, 88, 0.5);
  color: rgb(62, 63, 91);
  background-color: rgb(246, 241, 222);
  cursor: pointer;
}

button:hover {
  background-color: wheat;
}

header {
  background-color: darkgoldenrod;
}

header .logo {
  margin: 0;
  padding: 25px 30px;
  font-weight: bold;
  color: rgb(3, 3, 3);
  font-size: 1.6em;
}

header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header a {
  padding: 5px 12px;
  text-decoration: none;
  font-weight: bold;
  color: black;
}

header a:hover {
  color: rgb(18, 52, 88);
}

footer {
  display: flex;
  align-items: center;
  background-color: sandybrown;
  color: rgb(18, 52, 88);
  font-weight: bold;
}

#mio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 90vh;
  color: wheat;
  background: linear-gradient(0deg, rgba(255,255,255,0.6), rgba(0,0,0,0.6)),
              url(./assets/banner.webp) no-repeat center center / cover;
}

#quien-soy, #mis-hobbies, #mis-habilidades, #contactame {
  text-align: center;
}

#quien-soy {
  display: flex;
  justify-content: center;
  align-items: center;
}

#quien-soy img {
  height: 600px;
}

#quien-soy .container, #mis-hobbies .container, #mis-habilidades .container {
  padding: 200px 12px;
}

#mis-hobbies .container {
  background-color: bisque;
}

#mis-habilidades .container {
  background-color: #fffacd;
}

#contactame .container {
  background-color: #ecdd58;
}

.carta {
  text-align: center;
  padding: 50px;
  margin: 20px;
  border-radius: 15px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.carta h3, .carta p {
  color: aliceblue;
}

.carta p {
  display: none;
}

.carta:first-child {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                    url("assets/ccna1.jpg");
}

.carta:nth-child(2) {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                    url("assets/itess.jpg");
}

.carta:nth-child(3) {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                    url("assets/python.png");
}

.foto {
  height: 30px;
  width: auto;
}