/**
 * @file surf.css
 * @author hoff
 * @brief trent.surf frontend master stylesheet
 *
 * @date 2025-02-22
 *
 * @copyright Copyright (c) 2025 hoff.industries, Trent Group Holdings LLC
*/

@font-face {
    font-family: "Syne-Supplied";
    src: url("fonts/syne.ttf") format("truetype");
}

:root {
    --header-height: 5.5vh;
    --footer-height: 5.5vh;

    --trent-accent: #cc02c8;
    --trent-alt: #a4fff1;
    --casino-accent: #e3f17b;

    --standard-bg: #111111
}

html {
    background-size: cover;

    font-family: Arial;
    font-weight: bold;
    background-color: var(--standard-bg);
}

body {
    margin-top: 0px;
    margin: 0px;
    height: 100%;
}

header {
    margin: 0px;
    width: 100%;
    min-height: var(--header-height);
    background-color: var(--standard-bg);
}

main {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    color: var(--trent-alt);
}

footer {
    padding-left: 1em;
    padding-right: 1em;
    min-height: var(--footer-height);
}

h1 {
    margin: 0px;
    padding: 0.5em;
}

h2 {
    font-size: 1.4em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

table {
    border-collapse: separate !important;
}

th {
    color: var(--trent-accent);
    padding-bottom: 0.8em;
}

td {

    padding: 0.8em;
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;
}

.main-content {
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0px;
}

.hero-container {

    background-position: 0%, -50%;
    max-width: 100%;
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 6em;
}

.merch-container {

    margin-top: 1em;
    padding: 2em;
    color: var(--trent-alt);

    background-position: 0%, -50%;
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;
}

.title-section {

    padding: 1em;
    padding-bottom: 0px;
    background: white;
}

.merch-image {

    margin-left: auto;
    margin-right: auto;
    display: block;
}

.page-title {
    color: var(--trent-accent);
}

.trent-dot-paragraph {

    font-size: 1.2em;
    padding-left: 0.2em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

.header-buttons {

    font-family: Arial;
    display: flex;
    flex-wrap: wrap;
}

.be-smooth {

    margin: 12vh;
    text-align: center;
    font-size: 10em;
    color: var(--trent-accent);
    font-family: Syne-Supplied;
}

.trent-dot-button {

    background-color: #111000;
    font-weight: bold;

    width: 5em;

    text-align: center;
    padding: 0.5em;

    margin-left: 0.5em;
    margin-right: 0.5em;

    height: 100%;
    text-decoration: none;

    color: var(--trent-alt);
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;
}

.maps-dot-button {

    background-color: #111000;
    font-weight: bold;

    width: 5em;

    text-align: center;
    padding: 0.5em;

    margin-left: 0.5em;
    margin-right: 0.5em;

    height: 100%;
    text-decoration: none;

    color: var(--trent-alt);
    border: 0.15em solid #00d8b7;
    border-radius: 0.2em;
}

.join-dot-button {

    background-color: #111000;
    font-weight: bold;

    width: 5em;

    text-align: center;
    padding: 0.5em;

    margin-left: 0.5em;
    margin-right: 0.5em;

    height: 100%;
    text-decoration: none;

    color: var(--trent-alt);
    border: 0.15em solid #00d8b7;
    border-radius: 0.2em;
}

.casino-dot-button {

    background-color: #111000;
    font-weight: bold;

    width: 5em;

    text-align: center;
    padding: 0.5em;

    margin-left: 0.5em;
    margin-right: 0.5em;

    height: 100%;
    text-decoration: none;

    color: var(--casino-accent);
    border: 0.15em solid #e3f17b;
    border-radius: 0.2em;
}

.navigation-bar {

    padding-left: 0.5em;
    padding-right: 0.5em;

    color: var(--trent-accent);
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;

    margin-bottom: 1em;
}

.quote-bar {

    padding-left: 0.5em;
    padding-right: 0.5em;

    backdrop-filter: blur(20px);

    color: var(--trent-accent);
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;
    background: rgba(0, 0, 0, 0.7);
}

.notice-bar {

    padding-left: 0.5em;
    padding-right: 0.5em;

    color: var(--trent-alt);
    background-color: #ff6363;
    border: 0.15em solid var(--trent-accent);
    border-radius: 0.2em;
}

.casino-bar {

    padding-left: 0.5em;
    padding-right: 0.5em;

    color: var(--trent-accent);
    backdrop-filter: blur(20px);
    /*background-color: rgba(227, 241, 123, 0.3);*/
    background-color: rgba(182, 193, 98, 0.3);
    border: 0.15em solid gold;
    border-radius: 0.2em;
}

.casino-banner {
    color: var(--casino-accent);
}

.video-container {
    text-align: center;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 0px;
}

.video-content {

    zoom: 90%;
    padding: 0.5em;
    border: 0px;

    text-align: center;

    width: 1280px;
    height: 720px;

    max-width: 80%;
}

.profile-section {
    background: var(--standard-bg);
    vertical-align: top;
}

.profile-top-maps {
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.2em;

    padding-left: 2em;
    padding-bottom: 1em;
    padding-right: 5em;
    padding-top: 0.6em;
    width: fit-content;
}

.profile-top-maps-container {
    border: 0px;
    width: 100%;
    background-image: url('images/hero2.jpg');
    min-height: 50vh;
    vertical-align: top;
}

.profile-top-map-item {
    font-weight: bold;
    font-size: 1.4em;
}

.division-rival {
    padding-left: 0px;
    padding-top: 1em;
    color: var(--trent-accent);
    text-decoration: none;
}