body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    background: rgb(255, 255, 255);
    width: 100%;
    display: grid;
    grid-template-columns: auto;
}
.logo {
  font-size: 2em;
	font-family: Leelawadee UI;
	font-weight: bold;
	color: #666;
  /*width: 300px;*/
  align-self: center;
  /*
  justify-self: center;
  */
  margin-left: 230px;
}
.page-title {
  font-family: Leelawadee UI;
	color: #666;
  font-size: 2.0em;
  font-weight: bold;
}
.title {
  font-family: Leelawadee UI;
	color: #666;
  font-size: 4em;
  font-weight: bold;
}
.title-sub {
  font-family: Leelawadee UI;
	color: #666;
  font-size: 1.6em;
  font-weight: lighter;
}
s.logovg:hover {
  animation-duration: 1.2s;
  animation-name: animateLogo;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  mix-blend-mode: overlay;
}

#code-logo {
  opacity: 0;
}

@keyframes animateLogo {
  from {
    transform: translateX(-60px) translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateX(px) translateY(-23px);
    opacity: 1;
  }
}
/* 
.st0{display:none;fill:#4D4D4D;}
.st1{fill:#006F70;}
.st2{fill:#00C3C6;}
.st3{enable-background:new    ;}
.st4{fill:#858585;}
.st5{fill:#F2F2F2;}
.st6{fill:#9E9E9E;} */

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background: #666;
  transform: scale(0, .8);
  transform-origin: left top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}

.btn-primary {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-primary:hover {
  color: #fff;
  background-color: #999;
  border-color: #999;
  box-shadow: 3px 3px 4px rgba(128,128,128,0.4);
}