@font-face {
    font-family: Bolyar;
    src: url(./fonts/FMBolyarPro-700.ttf);
}

h1{
    font-family: Bolyar,Arial,Verdana,sans-serif;
    text-align: center; 
    color: #e6e35e;
    /* text-shadow: 1px 1px black, -1px -1px #ffffff; */
}
h2{
    font-family: Bolyar,Arial,Verdana,sans-serif;
}
body {
  background-color: #2b110e;
  color: white;
  font-family: Verdana;
}
#logo{
  display: block;
  margin: auto;
}
.box1{
    margin: auto;
    width: fit-content;
    background-color: #502723;
    display: flex;
    border: 3px solid #e6e35e;
    position: relative;
}
.box1::before{
    content: "";
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    position: absolute;
    border: 2px solid #e6e35e;
}
.TL-2{
    top: -2px;
    left: -2px;
}
.TR-2{
    top: -2px;
    right: -2px;
}
.BL-2{
    bottom: -2px;
    left: -2px;
}
.BR-2{
    bottom: -2px;
    right: -2px;
}
.corner16-2{
    position: absolute;
    height: 16px;
    width: 16px;
    border: 2px solid #e6e35e;
}
.box1 h2{
    margin: 20px;
}


/* SVG STYLE */
#logoShardsG path{
    fill: #b8cfff;
}
#logoShardsG #shard0{
    display: none;
}
#logoShardsG path{
    transition: transform 1s;
}
#logoShardsG:hover #shard1{
    transform: translate(1px, -1px);
}
#logoShardsG:hover #shard2{
    transform: translate(-12px, -22px);
}
#logoShardsG:hover #shard3{
    transform: translate(-27px, -16px);
}
#logoShardsG:hover #shard4{
    transform: translate(-4px, -1px);
}
#logoShardsG:hover #shard5{
    transform: translate(-15px, -0px);
}