body {
  background-color: #ffe4ec; 
  font-family: Arial, sans-serif;
  margin: 0;
}

header {
  background-color: #ffb6c1; 
  color: white;
  padding: 25px;
  text-align: center;
}

nav {
  background-color: #ffc0cb;
  padding: 12px;
  text-align: center;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 12px;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

main {
  padding: 25px;
}

footer {
  background-color: #ffccd5;
  text-align: center;
  padding: 12px;
}

.container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.container img {
  width: 400px;
  border-radius: 10px;
}

/* tabel */
table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #f2b6c1;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2a7b5;
}

tr:nth-child(even) {
  background-color: #fde4ea;
}

.hero{
  height:600px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background: linear-gradient(to right, #ff8fb1, #ffc0cb);
  color:white;
}

.hero h1{
  font-size:60px;
  margin-bottom:20px;
}

.hero p{
  font-size:22px;
  margin-bottom:30px;
}

.hero-logo{
  width:200px;
  margin:25px 0;
}

.hero-button{
  background:white;
  color:#ff6fa5;
  padding:15px 30px;
  text-decoration:none;
  border-radius:8px;
  font-weight:bold;
  font-size:18px;
}
.foto1 {
    width: 300px;
}
.foto2{
    width: 1000px;
}
.foto {
    width: 250px;
}
	.foto {
    width: 200px;