/*Google Font Import 'Roboto'*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

body{
  background-color: #1d1d1d;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

a{
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: #fff;
  margin: 5px
}

button{
  margin: 20px;
  padding: 10px;
  background-color: #096ac5;
  border: none;
  border-radius: 2px;
}
button:hover{
  transition-duration: 300ms;
  transform: scale(1.2);
  font-weight: bold;
    transition-timing-function: ease-in-out;
}

nav img{
  display: block;
    height: auto;
    width: 100px;
}

header{
  border-bottom: 2px solid #2c87dd;
  margin: 5px 0 0 0;
  padding: 5px;
}

.dark{
text-align: center;
background-color: #1d1d1d;
border: 2px solid white;
padding: 10px;
margin: 2px;
}

h1, h2, h3{
  color: #4eabf0;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

p{
  text-align: center;
  font-family: sans-serif;
  line-height: 1.5rem;
  margin: 40px;
}


/*Gallery Controls*/
.gallery-track {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  will-change: transform;
}

.card {
  height: 400px;
  overflow: hidden;

  & .card-image-wrapper {
    height: 135%;
    will-change: transform;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
} 

/*Screen size adjustments*/
@media (width < 800px) {
  .gallery-track {
    grid-template-columns: repeat(2,1fr);
  }

  nav img{
  display: flex;
    height: auto;
    padding: 0px;
    margin: 0px;
    width: 70px;
    justify-content: start;
    align-content: center;
  }
}

@media (width < 550px) {
  .gallery-track {
    grid-template-columns: repeat(1,1fr);
  }
}

footer{
  font-family: 'Roboto', sans-serif;
  color: #fff;
  margin: 10px;
  padding-bottom: 15px;
  text-align: center;
}