html * {box-sizing: border-box}

@keyframes fade {
from {opacity: 0;}
 to {opacity: 1;}
}
html, body {
  height: 100%;
  margin: 0;
}
body {
	font-family: system-ui,sans-serif;
	font-size: 100%;
    background-color: #FFF4F2;
}

header {
  background-color: rgb(234, 145, 167); 
  color: blue; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  height: 80px;
  border-bottom: 2px solid #0011ff;
}

h1 {
	font-size-adjust: 0.55;
	font-family: Fantasy;
}

.main-nav {
  width: 100%;
  display: flex;
  justify-content: center; 
  margin-top: 1rem; 
}
.main-nav ul {
  display: flex;
  gap: 2rem; 
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav a:link {color: rgba(255,255,255,1);}
.main-nav a:visited {color: rgba(127,127,127,1);}
.main-nav a:hover {color: rgba(0,0,0,1);}
.main-nav a:active {color: rgba(250,250,250,1);}

.images {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.images img {
  border: 4px solid #0011ff; 
  border-radius: 8px;         
  max-width: 100%;            
  height: auto;
animation-name: fade; 
animation-duration: 2.5s;
animation-direction: normal;
animation-fill-mode: backwards;
}
.top {
  font-size: 175%;
  padding: 1rem;
  text-align: center;
  font-family: Fantasy;
}
h2:hover{
transform: scale(1.2);
}
.middle {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr minmax(200px, 300px);
  align-items: start;
  gap: 1rem;
  padding: 1rem;
}

.right {
  background-color: #f0f0f0;
  border: 4px solid #0011ff; 
  border-radius: 8px; 
  width: 100%;
  height: auto;
  max-height: 100vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.left {
  background-color: #f0f0f0;
  border: 4px solid #0011ff; 
  border-radius: 8px; 
  width: 100%;
height: auto;
max-height: 100vh;
  padding: 1rem;
display: flex;
  flex-direction: column;
}
.bottom {
  background-color: #d0d0d0;
  padding: 1rem;
  text-align: center;
}