a{
  color: #FFCB9A;
  text-decoration: none;
}

a:visited {
  color: #d9b08c;
}
a:hover, a:focus{
  color: #D1E8E2;
}
body{
  background: #2C3531;
  margin-bottom: 10vw;
}

/* top w/title and back */
#topback{
  background-image:url(https://i.pinimg.com/originals/fd/6a/5c/fd6a5c00d4a13c516832de68c0a71ff0.jpg);
  padding: 0;
  border-radius: 90% 100% 0% 0%;
}

#title{
  text-align: center;
}

#top-bar{
  border-radius: 100% 100% 2% 2%;
  background-color: rgba(255,255,255,0.);
  color: #D1E8E2;
  padding :.1em;
}

/* navbar at the top */
#navbar{
  width: 100%;
  display: table;
  table-layout: fixed;
}

#navbar #navlinks{
  display: table-row;
  padding: 0px;
  margin: 0px;
}
#navbar #navlinks a{
  display: table-cell;
	vertical-align: middle;
	text-align: center;
  color: #D1E8E2;
  text-decoration: none;
	padding: 8px 5px;
	margin: 0px;
	border-right: 1px solid black;
  background: #116465;
}
#navbar #navlinks a:hover{
  background: #2C3531;
}
#navbar #navlinks a:last-child{
  border-right: none;
}
#navbar #navlinks #on{
  background: #D9B08C;
}

/* links */

#links{
  background: #116466;
  border-radius: 2%;
  padding: .5em;
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: space-around;
}

.content{
  border: 1px solid #2C3531;
  color: #D1E8E2;
  padding: 1em;
  display: none;
  flex-direction: column;
  align-items: center;
  margin: 5px;
}

/* since on 'all' tab all content will be visible */
.content{
  display: flex;
}

@media(min-width:70px){
  .content{
    width: 40vw;
  }
}
@media(min-height:70px){
  .content{
    height: 40vh;
  }
}

@media(min-height:110px){
  .content{
    height:20vh;
  }
}

@media(min-width:1100px){
  .content{
    width: 20vw;
  }
}