.gnav{
    position: fixed;
    left: -75px;
    top: 10px;
    display: flex;
    flex-direction: column;
    width: 80px;
}
.gnav:hover{
    left: 0px;
}
.gnav-item{
    display: inline-block;
    border: 2px solid #87CEEB;
    border-radius: 0.5em;
    padding: 5px 5px;
    margin: 1px;
    font-size: 2vmin;
    background-color: #24292e;
    text-align: center;
}
.gnav-link{
    text-decoration: none;
    color: #FFF !important;
}
.gnav-link:hover{
    color: #A9A9A9 !important;
}
/*-++-++++=-++---+-=-++++---=-++++--+=-++++-+-=--+-+++-=-++---++=-++-++++=-++-++-+*/
/* latin */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: local('Courgette Regular'), local('Courgette-Regular'), url(/src/font/courgette2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,body,main{
	margin: 0;
	padding: 0;
	height: 100%;
}
body{
	background: linear-gradient(#f69d3c,#3CB371,#3f87a6);
}
main{
	display: flex;
	flex-direction: column;
}
.row{
	flex: 1;
	display: flex;
}
.cell{
	flex: 1;
	border: 1px outset gray;
	text-align: center;
	font-family: Courgette;
	font-size: 3vmin;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.cell:hover{
	background-color: #FFFF00;
	overflow: visible;
}
a:link,a:visited,a:hover,a:active{
	text-decoration: none;
	color: black;
}
@media (max-width: 1400px){
	.cell{
		/* font-size: 2vmin; */
	}
}
@media (max-width: 800px){
	.cell{
		/* font-size: 1vmin; */
	}
}