* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.con {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 70vh;
  grid-template-columns: 30% auto;
  background-image: url(https://displate.com/displates/323220/large/2018-12-10/626bad6b66c1ea4a2e1f922198eb44ef_f65bcd73acd88447e43dbeafd5e922b3.jpg);
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nav {
  border: 10px solid #00FF00;
  background-color: #FF1493;
  width: 600px;
  height: 100px;
  display: flex;
  position: absolute;
  top: 72%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  justify-content: space-around;
  align-items: center;
  text-align: center;
  font-size: 12px;
  font-family: 'Press Start 2P', cursive;
  color:#00FF00;
}

body {
  background-color: #333;
  font-family: 'Bungee Shade', cursive;
  font-size: 35.2px;
}

path {
  fill: transparent;
}

text {
  fill: #00FF00;
}

#title {
  width: 1000px;
  height: 1000px;
  text-align: center;
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#logo {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}