@charset "UTF-8";
/* CSS Document */


.box.republicbox {
  text-align: left;
  box-sizing: border-box;
}

.republicbutton {
  position: relative;
  font-family: serif;
  font-weight: bold;
  text-align: left;
  font-size: 62px;
  color: #fff; color: var(--nav-title-color);
  top: 80px;
  display: inline;
  left: 30px;
}

@media screen and (max-width: 920px) {
  .republicbutton {
    top: 60px;
  }
}

@media screen and (max-width: 750px) {
  .republicbutton {
    top: 120px;
  }
}

@media screen and (max-width: 500px) {
  .republicbutton {
    top: 60px;
    font-size: 44px;
  }
}

@media screen and (max-width: 300px) {
  .republicbutton {
    top: 60px;
    font-size: 33px;
  }
}

.republicbutton:hover {
  background-image: linear-gradient(to top, #4f575c 0%, #4f575c 49%, #fff 50%, #fff 100%);
  background-image: linear-gradient(to top, var(--nav-title-color) 0%, var(--nav-title-color) 69%, transparent 70%, transparent 100%);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: 0 92%;
  text-shadow: 0.03em 0 #4f575c, -0.03em 0 #4f575c, 0.05em 0 #4f575c, -0.05em 0 #4f575c, 0.09em 0 #4f575c, -0.075em 0 #4f575c;
  text-shadow: 0.03em 0 var(--bg-color), -0.03em 0 var(--bg-color), 0.05em 0 var(--bg-color), -0.05em 0 var(--bg-color), 0.09em 0 var(--bg-color), -0.075em 0 var(--bg-color);

}