style.css

/* 
update: optimized a little bit more
for mobile just for fun.
-------------------------------
not entirely optimized for mobile. 
just slight tweaking to make it look 
somewhat better there. 
this practice project focuses on getting 
javascript functionality working, 
so please view in desktop if possible. */

h1 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: helvetica, arial, sans-serif;
  text-align: center;
  font-size: 3.6em;
  font-family: "Big Shoulders Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
@media screen and (max-width: 700px) {
  h1 {
    font-size: 2.5em;
  }
}

body {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(135deg, #a44b9c, #f2c94c);
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 1em;
}
@media screen and (max-width: 700px) {
  body {
    max-width: 100%;
  }
}

.full-img {
  position: relative;
  display: block;
  width: 100%; 
  max-width: 640px; 
  height: auto;
}

.full-img img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 1px 1px 3px 1px #29262f;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 8px;
}

button {
  border: 0;
  background: rgba(150,150,150,0.6);
  text-shadow: 1px 1px 1px white;
  border: 1px solid #999;
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 2px;
  padding: .4em;
  width: 170px;
  font-size: 1.3em;
}

.thumb-bar img {
  display: block;
  width: 15%;
  float: left;
  cursor: pointer;
  border: 3px solid white;
  border-radius: 10px;
  margin: 13px;
}
@media screen and (max-width: 700px) {
  .thumb-bar img {
    margin: 4px;
  }
}

.thumb-bar img:hover {
  transform: scale(1.8);
  transition: transform 0.4s;
}