@font-face {
  font-family: Cinzel;
  src: url(../fonts/Cinzel_Decorative/Regular.ttf);
}
/* COMMON STYLES 
  -------------------------------- */

/* LAYOUT */
/* {position:absolute;} */
/* {position:relative;} */
/* {float:left;} */
/* {float:right;} */
/* {overflow:hidden;} */
/* {display:block;} */
/* {display:inline;} */
/* {display:none;} */
/* {margin:0} */
/* {padding:0;} */
/* {width:100%;} */

/* TYPOGRAPHY */
/* {line-height:1;} */
/* {list-style-type:none;} */
/* {font-size:1em;} */
/* {font-style:italic;} */
/* {font-style:normal;} */
/* {font-weight:bold;} */
/* {font-weight:normal;} */
/* {text-align:center;} */
/* {text-align:right;} */
/* {text-align:left;} */
/* {text-decoration:underline;} */
/* {text-decoration:none;} */
/* {text-transform:uppercase;} */
/* {text-transform:none;} */

/* COLOR */
/* {background-color: #fff;} */
/* {background-color: transparent;} */
/* {border: 1px solid #000;} */
/* {border: none;} */
/* {color: #000;} */
/* {border-radius: 0px;} */
/* {transition: all 0.3s ease-in-out;} */

/* ROO 
	-------------------------------- */
:root {
  --gold: #eccf9c;
}

/* BASE 
	-------------------------------- */
body {
  color: var(--gold);
  background-color: #ccc;
  font-family: Cinzel;
}
::selection,
::moz-selection {
}

.row {
  width: 100%;
  display: flex;
}

.col {
  min-height: 100vh;
  flex: 1;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.col-hanedan {
  background-image: url(../images/hanedan.jpg);
}
.col-saltanat {
  background-image: url(../images/saltanat.jpg);
}

/* HEADER
	-------------------------------- */
.site-header {
}

/* FOOTER
	-------------------------------- */
.site-footer {
}

/* CONTENT
	-------------------------------- */
.site-content {
}

.box .box-title {
  height: 150px;
}

.main-title {
  position: relative;
  display: flex;
  align-items: center;
}

.main-title img {
  width: 235px;
  height: 58px;
  margin: 0px 1rem;
}

.main-title .line {
  background-color: var(--gold);
  height: 1px;
  width: 107px;
}
.sub-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sub-title .line {
  background-color: var(--gold);
  height: 1px;
  width: 159px;
}
.sub-title h2 {
  font-size: 22px;
  text-align: center;
  margin: 0;
  margin-top: 0.4rem;
}

.info-box-body {
  margin: 0px 1.6rem;
  margin-bottom: 1rem;
}

.info-box-body h4 {
  text-align: center;
  font-size: 22px;
  margin: 0px;
}

.info-box-body h4.clock {
  font-size: 42px;
  margin-top: .3rem;
}
.info-box-body h4.date {
  margin-top: 1rem;
}

.info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-box .line {
  background-image: url(../images/circleline.png);
  width: 52px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: cover;
}

.action-box {
  position: absolute;
  bottom: 30px;
  width: 393px;
  height: 156px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(236, 207, 156, 0.21);
  border-radius: 10px;
  background-color: rgba(236, 207, 156, 0.01);
  backdrop-filter: blur(10px);
  font-family: 'Visby CF' !important;

}

.action-box hr {
  width: 90%;
  border-color: rgba(236, 207, 156, 0.21);
}

.action-box .title {
  all: unset;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-top: .5rem;
}

.action-box .title img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.action-box ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
}

.action-box ul li {
  flex: 1;
  text-align: center;
}

.action-box ul li a {
  all: unset;
  cursor: pointer;
  font-size: 16px;
}



/* LAYOUT */

/* BASIC ELEMENTS */
div {
}
p {
}
blockquote {
}
code {
}
img {
}
a {
}
a:visited {
  color: var(--gold) !important;
}
a:active {
  color: var(--gold) !important;
  opacity: 0.9 !important;
}
a:hover {
  opacity: 0.75 !important;
}
em {
}
strong {
}
pre {
}

/* HEADINGS */
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

/* FORMS & BUTTONS */
form {
}
fieldset {
}
legend {
}
label {
}
input {
}
textarea {
}
select {
}

/* TABLES */
table {
}
caption {
}
tr {
}
thead {
}
th {
}
tbody {
}
td {
}
tfoot {
}

/* LISTS */
dl {
}
dt {
}
dd {
}
ol {
}
ol li {
}
ul {
}
ul li {
}

.discord-widget{position:fixed;left:290px;bottom:220px;z-index:2000;transition:.5s}.discord-widget:hover{left:295px;bottom:240px;transition:.5s}
/* … */