:root {
  --accent-color: rgb(255, 223, 41);
  --accent-rgba: rgba(255, 223, 41,0.8);
  --hover-color: rgb(255, 223, 41);
  --hover-rgba: rgba(255, 223, 41,0.8);
}

body {
background: #000;
position: relative;
color: #fff;
}

body * {
position: relative;
padding: 0;
margin: 0;
font-family: Century, arial;
}

#wrapper {
width: 75%;
min-width: 800px;
max-width: 75%;
margin: 0 auto;
background: transparent;
}

#nav button,
#content #delete-button {
    width: 33px;
    height: 33px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 20px;
    margin:0 2px 2px 0;
    transition: all 0.2s ease-out allow-discrete;
}

#nav button[id^="frame-"] { 
width:33px;
height:44px;
border-radius:2px;
}

#nav .toggle-on {
    border: 2px solid var(--accent-color)
}

#nav .toggle-off {
    border: 2px solid transparent;
}

#nav button.format,
#nav button#back-button,
#content button#delete-button { 
width:115px;
}

#content button#delete-button {
margin: 10px 0;
}

#content {
width:100%;
background: transparent;
margin: 0;
border: 1px solid #fff;
text-align: center;
}

#card-table {
width: 100%;
height: auto;
text-align: center;
}

#card-table .card {
width: 13.5%; /* 103px */ 
height: auto; /* 150px */
display: inline-block;
margin: 0 6px 6px 0;
border: 2px solid transparent;
border-radius:5px;
overflow:hidden;
transition: all 0.2s ease-out allow-discrete;
}

#card-table .card:hover,
#nav button:hover,
#content button:hover {
cursor: pointer;
background-color: var(--hover-color);
-webkit-box-shadow:0px 0px 10px 3px var(--hover-rgba);
-moz-box-shadow: 0px 0px 10px 3px var(--hover-rgba);
box-shadow: 0px 0px 10px 3px var(--hover-rgba);
border: 2px solid var(--hover-color)
}

.card-img {
width: 100%;
}

/* Info Page */
.card-image-box,
.card-info-box {
height: auto;
display:inline-block;
clear:both;
}

.card-image-box {
width: clamp(1px,49.5%,350px);
float:left;
}

.card-info-box {
width: clamp(1px,100%,(100% - 360px))
}

.card-image-box img {
width:100%;
height:auto;
border-radius:2%;
overflow:hidden;
}

.card-info-box .rules {
width: 90%;
max-width: 90%;
height: auto;
text-align: justify;
text-justify: inter-word;
margin: 5px 0 15px 0;
padding: 2px 5px;
}

.card-info-box-data input,
.card-info-box-data select {
width: 74.5%;
float:right;
}

.card-info-box hr {
width: 80%;
margin: 0 auto;
clear:both;
}

.card-info-box p {
width: 24.5%;
text-align: right;
display: inline-block;
}

#footer {
clear:both;
}