@import url('https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oi&display=swap');
/* reset */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* new stuff below */


.nav1{

background-color:DeepPink;
height:28px;
font-size:23px;
font-weight:bold;
padding-top:13px;
 display: flex;
  justify-content: space-evenly;
  align-items: center; /* Vertically centers items */
  width: 80%;
  padding: 10px;
  background-color: #f0920e;
}
.nav1 a:link{
padding:5px;
padding-left:10px;
text-decoration:none;

}
.nav1 a:hover{

background-color:orange;
color:#ff005d;
text-decoration:none;



}

.logo{
float:right;
position:relative;

top:-80px;
left:10px;
}
.logo img{border:none;
border-radius: 100%;
}

.nav1{
width:100%;
color:#C4C4C4;
background-color:#e00958;}


 .grid-container{position:relative;left:13px;place-content:center;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto ; padding:2rem;row-gap:20px;
}
.grid-container-2{position: relative; top:20px;
  display: grid;
  grid-template-columns: auto auto auto ;column-gap:20px;
}
  
.title{background-color:rgba(255, 179, 102, 0.6);text-decoration: none;}

a:link {
      color: pink;text-decoration:none; /* Default link color */
    }
    a:visited {
      color: pink;text-decoration:none; /* Color for visited links */
    }
    a:hover {
      color: yellow;
	  /* Color when hovered over */
      text-decoration: none; /* Remove underline on hover */
    }
    a:active {
      color: red;text-decoration:none; /* Color when the link is being clicked */
    }

main {width: 80%; margin:auto;padding:10rem; background-color:#e31009;}
body{background-image:url("background2.jpg");background-size: cover;}
p {font-family:Irish Grover, sans-serif;font-size: 1.5em;line-height:1.3em;color:white ;padding:40px;margin-top:4rem;}
h1,h2{text-align:center;font-family:Oi,sans-serif; font-size: 3em;margin-bottom:1em;margin-top:5rem;color:#eb0056;}
img{display: block;margin: 0 auto;margin-top:2em;}
footer{background-color:#eb0056;font-size:.5rem;margin-top:7rem;}
ol{font-family:Irish Grover, sans-serif;font-size: 1.5em;line-height:1.3em;color:white ;padding:50px;
text-align:center;list-style-type: decimal;list-style-position:inside;}
.imgall{border: 12px solid DeepPink;}
img{border: 12px solid DeepPink;}
.logo2 img{border:none;}

.artist{justify-content: space-evenly;position: relative; top:20px;
  display: grid;
  grid-template-columns: auto auto auto;}
.artist2 img{border:none;}
* {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/* Make the image to responsive */
.image {
  display:inline-block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 50%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}


.wrapper{background-color:rgba(255, 179, 102, 0.6);display:grid;float: right;}
.wrapper img{position:relative;Bottom:2px;}
.wrapper p{text-align:center;}
.wrapper2{background-color:rgba(255, 179, 102, 0.6);display:block;float: left;}


.zoom img{
transition: transform .2s;
margin: 0 auto;
}

.zoom img:hover {
-ms-transform: scale(1.5);
/* IE 9 */
-webkit-transform: scale(1.5);
/* Safari 3-8 */
transform: scale(1.5);
}