* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

h4 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
}

main p {
    margin-top: 20px;
    margin-left: 10px;
}

nav,
header{
        padding: 20px;
        text-align: center;
        background: #341171;
}

nav,
a {
    color: rgb(117, 80, 169);
    opacity: 0.6;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 30px;
}

nav,
a:hover {
    color: white;
    opacity: 1;
}

body {
    background: #b29dd2e3;
   
}
main{
    margin: 10px;   
}
section{
    display: grid;
    grid-template-columns: 1fr;
}
a:link{
    transition: color 0.5s;

}

img{
    width: 350px;
    opacity: 0.25;
    transition: opacity 500ms;
    border-radius: 10px;
    align-self  : center;
    justify-self: center;
    padding: 15px;
}

img:hover{
    opacity: 1;
}

/*challenge exercise*/
figure{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;        
}

figure img{
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 60px;
}

figure .img1{
    opacity: 1;
    z-index: 2;
    transition: opacity 500ms;
   
}

figure .img2{
    opacity: 0;
    z-index: 1;
    transition: opacity 500ms;
}

figure:hover .img1{
    opacity: 0;
}
figure:hover .img2{
    opacity: 1;
}
     
img:hover{
    opacity: 1;
}





@media screen and (min-width:1440px) {
        img{
            width: 400px;
    }
}

@media screen and (max-width:1440px) {
    figure img{
        position: absolute;
        align-items: center;
        justify-content: center;
        top: 75px;
    }
    
}