body {
	margin:0;
	padding:0;
}

.cream {
  color:#ffcc66;
}

.blue {
  color:#1298e6;
}

#main {
	width:50%;
	margin:0 auto;
}

#header {
  text-align:center;
  position: sticky;
  top: 0;
  background-color:white;
  padding:0% 0% 0.2% 0%;
}

.imgList {
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	list-style-type:none;
	padding:0;
}

.imgList li {
	height:25vh;
	flex-grow:1;
	margin:0;
}

.imgList li:last-child {
	flex-grow: 5;
}

.imgList li img {
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

#title {
	margin: 0;
	font-size: 6em;
	display:inline;
}

#subtitle {
  margin:0;
  display:inline;
}

.navBar {
	text-align: center;
	margin: 0% 0% 1% 0%;
	padding: 0;
	list-style-type: none;
}

.navBar li {
	display:inline-block;
	padding:0%;
	margin:0px 5px 0px 5px;
	font-size:2.4em;
}

a:link {
	color: #1298e6;
	text-decoration: none;
}

a:visited {
	color: #1298e6;
}

a:hover {
	color: #2dd0fc;
}

a:active {
	color: blue;
}

.orderLine {
	font-size: 2em;
	margin:0% 0% 0% 0%;
}

.libre-bodoni-600 {
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.libre-bodoni-400 {
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.zalando-sans-expanded-400 {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

@media (max-aspect-ratio: 1/1) { 
  #title {
    text-align:center;
  	margin: 0;
	  font-size: 3em;
  }

  #subtitle {
    display:block;
    text-align:center;
  	margin: 0;
  }
  
  #navBarMobile {
	  font-size:1em;
	  margin:0% 0% 5% 0%;
  }  
  
  .imglist li {
    height: 20vh;
  }
}

/* Short screens*/

@media (max-height: 480px) {

  #main {
  	width:80%;
  	margin:0 auto;
  }

  #title {
    text-align:center;
  	margin: 0;
	  font-size: 3em;
  }

  #subtitle {
    display:block;
    text-align:center;
  	margin: 0;
  }

  #navBarMobile {
	  font-size:1em;
	  margin:0% 0% 5% 0%;
  }  
  
  .imglist li {
    height: 20vh;
  }
}

/* Smaller screens in portrait */

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {

  #main {
  	width:80%;
  	margin:0 auto;
  }

  #title {
    text-align:center;
  	margin: 0;
	  font-size: 3em;
  }

  #subtitle {
    display:block;
    text-align:center;
  	margin: 0;
  }

  #navBarMobile {
	  font-size:1em;
	  margin:0% 0% 5% 0%;
  }

  .imgList {
    flex-direction: row;
  }

  .imgList li {
	height:20vh;
	flex-grow:1;
	margin:0;
  }

  .imgList li img {
    max-height: 20vh;
    min-width: 0;
	  max-height: 100%;
	  min-width: 100%;
  }
}