:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  margin: 0px;
  overscroll-behavior: none;
  background-image: url("outerspace.gif");
  background-size: cover;
  background-attachment: fixed;
}

.body {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 1fr 3fr 1fr;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  object-fit: cover;
}

.content {
  padding: 0px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pic, img {
  width: max(calc(100vw / 3 - 80px), 250px);
  height: auto;
}

.pic#one {
  background-image: url("dylanbackground.png");
  background-size: cover;
}

.pic#two {
  background-image: url("colbybackground.png");
  background-size: cover;
}

.pic#three {
  background-image: url("zackbackground.png");
  background-size: cover;
}

#dylan, #colby, #zack {
  position: relative;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
}

#dylan:hover, #colby:hover, #zack:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}