html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}

body {
  height:100%;
  font-family: main-font;
  image-rendering: pixelated;
  background-color: gray;
  
  margin-left: 176px;
  margin-right: 176px;
  padding-left: 10px;
}

h1 {
  text-align: center;
}

p {
  font-size: 20px;
}

ul {
  font-size: 20px;
}


@font-face {
    font-family: website-title;
    src: url("UI/fonts/archivoblack-regular.ttf");
}

@font-face {
    font-family: main-font;
    src: url("UI/fonts/barlowsemicondensed-medium.ttf");
}


.sidebar-button {
  width: 30px;
  height: 64px;
  margin-top: -8px;
  background-color: #444444;
  color: white;
}

.sidebar-button:hover {
  background-color: #DDDDDD;
  color: black;
}


.main-padding{
  padding-left: 40px;
  padding-right: 40px;
}


.button-image {
  background-color:transparent;
  border:none;
  cursor:pointer;
}


.white-title {
  color: white;
  text-shadow: 0px 0px 2px black, 1px 1px 0px black;
}

.black-title {
  color: black;
  text-shadow: 0px 0px 2px white, 1px 1px 0px white;
}


.about {
  background-image: linear-gradient(155deg, #fcfca0, #ffa080, #f3b177, #57bb60);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: black;
}

.gallery {
  background-image: linear-gradient(155deg, #171c30, #1c3b55);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}

.blog {
  background-image: linear-gradient(155deg, #1d0004, #532421, #8a3d37);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}

.franco {
  background-image: linear-gradient(155deg, #fa8cd1, #6b5f9e);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: black;
}


.retroupscale1280 {
    width: 1280px;
    image-rendering: pixelated;
  }