body {
  background-color:lightpink;
  color: lightblue;
  
  font-family:"lucida console",monaco,monospace;
  font-size:14px;
  font-weight:normal;
  margin:0;
}

#container {
  width:800px;
  margin:auto;
  padding:20px;
}

header {
  text-align:center;
  font-size:2em;
  color:#FFA8F5;
  text-shadow: 0 0 5px #F54927, 0 0 10px #F57927;
  margin-bottom:20px;
}

#content {
  display:flex;
  gap:20px
}

nav {
  width: 200px;
  background-color:lightpink;
  padding:15px;
}

nav a {
  color:#FA4646;
  text-decoration: none;
  display: block;
  margin: 10px 0;
  font-weight: bold;
  transition: 0.3s;
}

nav a:hover {
  color:#FA4685;
  text-shadow: 0 0 10px #D646FA
}

main {
  flex:1;
  background-color: #46AFFA;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px #2D55F7;
}
.image comtainer {
  position: relative;
  width: 100%;
  display: block;
  border-radius:10px;
}

overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;


background: rgba(0,0,0,0.6);
color:white;


display:flex;
justify-content: center;
align-items: center;


opacity:0;
transition:opacity 0.6s ease;

border-radius: 10px;
}

image container:hover .overlay {
  opacity:1;
}