@font-face {
 font-family: "otherfn";
 src: url('/tmpl/01/otherfn.ttf');
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: "otherfn";
 font-size: 16px;
 margin: 2vw 10vw;
 color: #4c4c4c;
 letter-spacing: 1px;
 background-image: url('/tmpl/01/background.webp');
 background-color: #f7f7f7;
 background-size: 30%;
 background-attachment: fixed;
}

.short-com a {
 color: #C47A42;
 text-decoration: none;
}

.short-com a:hover {
 font-weight: bold;
 color: #7F0000;
}

.short-com-content {
 font-family: "otherfn";
 background-color: #F2F2F2;
 padding: 2vw 10vw 2vw 3vw;
 background-image: url("/tmpl/01/stars-icon.webp");
 background-position: right 0 top 0;
 background-repeat: no-repeat;
 background-size: 11vw;
}

.short-com-content p {
 padding-bottom: 0.5vw;
}

.short-com-content:hover {
 background-image: url("/tmpl/01/stars-icon-hover.webp");
}

.short-com-title {
 font-size: 22px;
 padding-bottom: 1.5vw;
 padding-left: 2vw;
}

.short-com-title b {
 color: #C47A42;
 zfont-weight: normal;
}

.short-com-info {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 justify-content: center;
 font-size: 14px;
 padding-bottom: 2vw;
}

.short-com-grade,
.short-com-author,
.short-com-date,
.short-com-views,
.short-com-replies {
 padding: 0.7vw 0;
 text-align: center;
}

.short-com-grade {
 background-color: #D3CCE2;
}

.short-com-author {
 background-color: #D5E2CC;
}

.short-com-date {
 background-color: #E2E0CC;
}

.short-com-views {
 background-color: #E2D1CC;
}

.short-com-replies {
 background-color: #CCD4E2;
}