/* === Google Fonts (include in HTML ) ===
*/
body {
margin: 0;
padding: 0;
background-size: cover;
background-color: #d1d3db;
font-family: 'Roboto', sans-serif;
}
h1 {
position: relative;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 32px;
text-align: center;
margin-bottom: 40px;
background: linear-gradient(270deg, #6a11cb, #2575fc, #6a11cb);
background-size: 600% 600%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientFlow 6s ease infinite, fadeIn 1.5s ease forwards;
opacity: 0;
}
h1::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 10%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
animation: shimmer 2.5s infinite;
}
@keyframes gradientFlow {
0% { background-position: 0% 100%; }
100% { background-position: 0% 50%; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
@keyframes shimmer {
0% { left: 0%; }
100% { left: 90%; }
}
h2 {
font-size: 1.7em;
text-align: center;
font-weight: normal;
margin-top: 0px;
font-family: 'Roboto', sans-serif;
}
a.decorated {
text-decoration: underline;
}
a.decorated:hover {
text-decoration: none;
}
.plate {
background: rgba(255,255,255, 0.8);
border: 6px solid #ffffff;
border-radius: 12px;
padding: 12px 12px 36px;
margin-top: 36px;
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.25);
}
.mt0 { margin-top:0; }
.mt6 { margin-top:6px; }
.g-recaptcha {
width: 304px;
margin: auto;
}
table {
width: 80%;
margin: 12px auto 0;
}
table.intable {
width: 30%;
}
table.intable td:first-child {
width: 50%;
text-align: right;
padding-right: 6px;
}
.intable td {
padding-bottom: 6px;
font-size: 0.875em;
}
@media screen and (max-width: 800px) {
table.intable {
width: 80%;
}
table.intable td:first-child {
width: 50%;
}
}
.dangerz, .danger {
color: #de1500 !important;
}
.warningz {
color: #d44600;
}
table.result_table {
color: #000;
}
table.result_table th {
text-align: center !important;
background: #eee !important;
}
table.result_table th, table.result_table td {
font-size: 13px;
padding: 6px !important;
}
.table-stripe > tbody > tr:nth-child(odd) > td {
background: #eefdff;
}
/* === Font-family for inputs/buttons === */
input,
textarea,
select,
button {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
/* === Gradient Button Style === */
input[type="submit"],
button,
.btn,
.btn-primary,
.btn-primary-gradient {
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
font-weight: bold;
padding: 12px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease-in-out;
font-family: 'Roboto', sans-serif;
}
input[type="submit"]:hover,
button:hover,
.btn:hover,
.btn-primary:hover,
.btn-primary-gradient:hover {
background: linear-gradient(to right, #5b0ecc, #1e63db);
}