@charset "UTF-8";

body{
    margin:0;
    font-family:Arial, sans-serif;
    background-color: #f0f8ff;
}
quote{
    display:block;
    padding:20px;
    font-family:'Georgia', serif;
    font-size:1.25rem;
    line-height:1.6;
    color:#333;
    background-color: #f9f9f9;
    border-left:5px solid rgb(141, 112, 141);
    margin:20px 0;
}
h1{
    font-family:'Akaya Kanadaka';
}
header img{
    width:100%;
    height:220px;
    object-fit:cover;
}
nav{
    background-color: rgb(122, 62, 122);
    padding:15px;
    text-align:center;
}
nav a{
    color:white;
    text-decoration:none;
    margin:15px;
    font-weight:bold;
}
nav a:hover{
    color:#d4e4ff;
}
aside{
    margin:50px;
    font-size:1.5em;
}
article.layout{
    padding:30px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}
article.gallery{
    padding:30px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    
}
/*NEW container for image + text*/
.image-container{
    position:relative;
}
.image-container img{
    width:100%;
    height:400px;
    object-fit:cover;
    border:4px solid lightgoldenrodyellow;
    display:block;
}
/*Text overlay*/
.image-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color:white;
    font-size:3em;
    font-weight:bold;
    z-index:2;
    background-color: rgba(171, 173, 176, 0.299);
    padding:10px 20px;
    border-radius:25px;
    border:2px solid grey;
}
.image-container img:hover{
transform:scale(1.05);
transition:0.3s;
}
footer{
    background-color:rgb(129, 73, 129);
    color:white;
    text-align:center;
    padding:20px;
}