@font-face {
    font-family: 'Dark Paradise';
    src: url('../fonts/dark-paradise/DarkParadiseBold.woff2') format('woff2'),
        url('../fonts/dark-paradise/DarkParadiseBold.woff') format('woff'),
        url('../fonts/dark-paradise/DarkParadiseBold.ttf') format('truetype'),
        url('../fonts/dark-paradise/DarkParadiseBold.svg#DarkParadiseBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

*{
  font-family: 'Dark Paradise', 'HelveticaNeue-Light', sans-serif;
  text-transform: uppercase;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  height: 100%;
}


#top, #bottom, #left, #right{
  background: #ff6666;
  position: fixed;
}
#left, #right {
	top: 0; bottom: 0;
	width: 20px;
}
#left {left: 0;}
#right {right: 0;}
#top, #bottom {
	left: 0; right: 0;
	height: 20px;
}
#top {top: 0;}
#bottom {bottom: 0;}

header{
  margin: 80px 150px;
  margin-bottom: 0px;
}

.main-box{
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.picture-display{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  height: 70vh;
  width: 100%;
}

.picture-element{
  display: flex;
  justify-content: center;
  margin-top: -40px;
  height: 25%;
  width: 25%;
}

.link-container{
  width: 100%;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  text-align: center;
  position: absolute;
  height: 100%;
  transform: translate3d(0,0,0);
}

.link-box{
  justify-content: center;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  position: absolute;
  top: auto;
  left: 50%;
  bottom: 10%;
  transform: translate3d(-50%,0,0);
  width: 85%;
  box-sizing: border-box;
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 2em;
  text-transform: none;
}

.link{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  margin: 0 2%;
  margin-bottom: 10px;
  height: 50px;
  font-size: 34px;
  font-style: italic;
  text-decoration: none;
}

.link:hover{
}

.food{
  color: #3399cc;
  border: 3px solid #3399cc;
}

.food:hover{
  background-color: #3399cc;
  color: white;
}

.food:hover .link{
  color: grey;
  border-color: grey;
}

.photography{
  color: #cc3366;
  border: 3px solid #cc3366;

}

.photography:hover{
  background-color: #cc3366;
  color: white;
}

.stoneys{
  color: #ffcc33;
  border: 3px solid #ffcc33;

}

.stoneys:hover{
  background-color: #ffcc33;
  color: white;
}

.design{
  color: #66cc66;
  border: 3px solid #66cc66;
}

.design:hover{
  background-color: #66cc66;
  color: white;
}

.about{
  color: #cc66ff;
  border: 3px solid #cc66ff;

}

.about:hover{
  background-color: #cc66ff;
  color: white;
}

.question{
  color: #ff9933;
  border: 3px solid #ff9933;

}

.question:hover{
  background-color: #ff9933;
  color: white;
}