body{
margin:0 auto;
padding: 3rem;
font-family: "w-droge", 'Times New Roman', Times, serif;
color:#6495ED;
background-color: aliceblue;  
box-sizing: border-box;
animation: fadeInAnimation ease 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
0% {opacity : 0;}
100% {opacity : 1;}
}

@font-face {
    font-family: "w-droge";
    src: 
    url(../../fonts/w-droge/W-Droge-Itinerary.woff2) format("woff2");
}


.container{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(15rem,15rem));
gap: 3rem;
justify-content: center;
}


.box{
box-sizing: border-box;
}

.box img{
display:block;
width:100%;
aspect-ratio: 1;
border-radius:50px;
opacity: 0.8;
border : none;
transition: opacity 0.4s;
cursor: pointer;
}

.box img:hover {
opacity :1;
border:3px chartreuse solid;
}

.header { 
grid-column: 1/-1;
border : 5px cornflowerblue dotted ;
padding:10px;
font-size: 1.3rem;
margin:0 auto;
}