@font-face {
    font-family:Dogfight;
    	 src: url(fonts/Dogfight.otf);
   }

:root {
  --cos30: 0.866;
  --squareWidth: 1;
  --hexWidth: 1.73205; 
  --hexHeight: 2; 
  --colWidth: 1.36603;
  --rowHeight: 4.73205;
  --hexOverCol: 126.79%;
  --hexOffset: 13.397%;
  --legsSquare: 3.73205;
  --legsOverCol : 273.204%;
  --legsOffset: 86.602%;
}

body{
  background-color: #468189;
  color: #1F271B;
  overflow-x: hidden;
  font-family: Dogfight;
  
}
header{
  z-index: 30;
  background: #FCBA04;
  text-align: center;
}
h1{
  color: #2C363F;
  font-size: 5vw;
  line-height: 1vw;
  text-align:center;
}
.center {
  margin-left: auto;
  margin-right: auto;
  border:1px  double #2C363F;
  border-radius: 15px;
  color:#E9DADA;
  text-align:center;
  font-size:50px;
  }
@media(min-width: 981px) { .center { width: 70%; font-size: 50px; } }
@media(max-width:980px) { .center { width: 70%; font-size: 30px; } }
@media(max-width:660px) { .center { width: 70%; font-size: 40px; } }

.centerimage {
  margin-left: auto;
  margin-right: auto;
  border:1px  double #2C363F;
  border-radius: 15px;
  color:#E9DADA;
  text-align:center;
  font-size:50px;
}
ul {
	margin: 0;
	padding: 0;
	display: flex;
	position: absolute;
	top: 26px;
	left: 90px;
	transform: translate(-50%, -50%);
}

ul li {
  list-style: none;
  margin: 0 15px;
}

ul li a {
  position: relative; 
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 53px;
  background: #333;
  border-radius: 50%;
  font-size: 30px;
  color: #666;
  transition: .5s;
}

ul li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 80%;
  background: #ffee10;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul li a:hover::before {
  transform: scale(1.1);
  box-shadow: 0 0 15px #ffee10;
}

ul li a:hover {
  color: #ffee10;
  box-shadow: 0 0 5px #ffee10;
  text-shadow: 0 0 10px #ffee10;
}
img {
  border-radius: 30%;
}a:link {
	color: #F1F1F1;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #61B1E4;
}
a:active {
	text-decoration: none;
}
.raw {
  margin-left: auto;
  margin-right: auto;
  border:1px  double #2C363F;
  border-radius: 15px;
  color:#E9DADA;
  text-align:center;
  font-size:20px;
  width:100px;
}

@media(min-width: 981px) { .raw { width: 5%; font-size: 20px; } }
@media(max-width:980px) { .raw { width: 5%; font-size: 15px; } }
@media(max-width:660px) { .raw { width: 5%; font-size: 13px; } }

/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}