@font-face {
    font-family: Concept-Medium;
  src: url(Concept-Medium.ttf);
}

@font-face {
  font-family: SourceCodePro;
  src: url(SourceCodePro-Medium.ttf);
}
*{
  box-sizing: border-box;

}


h3, h3 *{
  font-family: SourceCodePro,Concept-Medium !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

body{
  background-color: #ffffff;
  color: #000000;
  margin: 0;
}

header{
  background-color: #ffffff;
  color: #ffffff;
  line-height:240%;
  padding-left: 4em;
  grid-area: 1/2/2/8;
  text-align: center;

}

header h1{
  background-position: left;
  background-repeat: no-repeat;
  margin:0;
  color:#000000;
  line-height: 240%;
  margin-right: 2em;
  font-family: SourceCodePro
  !important;
  font-weight: 400 !important;
  font-style: normal !important;

}

header a{
  text-decoration:none;
  color: #000000;
}

header h1 a{
  color:#000000;
  line-height: 200%;
  font-size: 1.5em;
}

h3{
  font-size: 2em;
  
}

main{
  background-color: #ffffff;
  padding: 2px 3em ;
  
}

nav {
  font-weight: bold;
  background-color: #c0acb7;
  top: 0;
  padding: 0;
  grid-area: 2/2/3/8;
}

nav a{
  color: #000000;
  display:block;
  text-align: center;
  text-decoration: none;
  padding: 1rem 0rem;
}

nav a:hover{
  background-color: #000000;
  color:#ff1493;
}

nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
}


nav ul li{
  width: 100%;
}

section{
  float:left;
  text-align: center;
  width:50%;
}

footer{
  grid-area: 5/2/6/8;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 1.5em;
  
  font-size: 1em;
  font-weight: bold;
  font-family: SourceCodePro;

}



footer a{
  text-decoration: none;
  font-family: SourceCodePro;
  color: #000000;
  display: block;
}


.box1{
  border: 2px solid #000000;
  background-color: #ff1493;
  line-height: 180%;
  margin-bottom: 0;
  margin-top: 1em;
  text-align: center;
  font-size: 1.7em;
  padding: 0;
  
}

.box2{
  text-align: left;
  background-color: #fcefef;
  margin-top: 0;
  border: 2px solid #000000;
  padding: 1em;
  font-size: 1.1em;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header {
  padding: 20px;
}



.centerup{
  text-align: center;
  margin-top: 50px;
  font-family:Georgia, 'Times New Roman', Times, serif;
}

.test{
  text-align: left;
  
}

.contact{
  font-size: 1.2em;
}

.return{
  text-align: left;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.1em;
}

.flex-container{
  display:flex;
  justify-content: space-around;
  flex-flow: row nowrap;
}

.nodecoration{
  text-decoration: none;
  color:#ff1493;
}

table{
margin:0 auto;
width: 100%;
}

td,th{
padding: 5px;
}

th{
  font-size: 1.1em;
  
}

td{
text-align: center;
  font-size: .9em;
}


.text{
  text-align:left;
}

#nav {
  list-style: none inside;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: SourceCodePro;
  color: white;
}

#nav li {
  display: block;
  position: relative;
  float: left;
  background: black;
  /* menu background color */
}

#nav li a {
  display: block;
  padding: 0;
  text-decoration: none;
  width:100%;
  /* this is the width of the menu items */
  line-height: 240%;
  /* this is the hieght of the menu items */
  color: white;
  /* list item font color */
}

#nav li a:hover{
  color:black;
  background-color: white;
}

#nav li li a {
  font-size: 90%;
  color:white;
  background-color: black;
} 
/* smaller font size for sub menu items */

#nav li:hover {
  background-color:  black;
  color: #000000;
} 
/* highlights current hovered list item and the parent list items when hovering over sub menues */

#nav ul {
  position: absolute;
  padding: 0;
  left: 0;
  display: none;
  /* hides sublists */
}

#nav li:hover ul ul {
  display: none;
}

/* hides sub-sublists */

#nav li:hover ul {
  display: block;
  width: 100%;
}


/* shows sublist on hover */

#nav li li:hover ul {
  display: block;
  /* shows sub-sublist on hover */
  margin-left: 200px;
  /* this should be the same width as the parent list item */
}

#nav ul li{
  width:100%;
}

#shop{
  padding-top:4em;
  
}

#grid{
  display:grid;
  grid-auto-rows: minmax(0,auto);
grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

#whitebar{
  background-color: #ffffff;
  grid-area: 1/1/2/9;
}

#whitebar2{
  background-color: #ffffff;
  grid-area: 5/1/6/9;
}

#blackbar{
  background-color: black;
  grid-area: 2/1/3/9;
}

#paparazzi{
  background-image: url(images/paparazzi.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:300px;
  grid-area: 3/1/4/9;

}

@media only screen and (max-width:992px){
  #wrapper{grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);}
  nav ul{flex-flow: column nowrap;}
}

@media only screen and (max-width:768px){
  header h1{background-image: none; text-align: center;}
 
}

@media only screen and (max-width:375px){
  header h1 a{font-size:1.2em; line-height: 230%;}
}
.responsive {
  max-width: 100%;
  height: auto;
}
https://javascript.plainenglish.io/create-a-javascript-slideshow-a2d36b95f7b7