/* ==================================================
   GENERAL LAYOUT
   ================================================== */

/* Limit the main content width and center it */
.container {
    max-width: 600px !important;
}

/* Makes the left-bar full width (overrides older template styles) */
.left-bar {
    max-width: none;
    float: none;
    width: 100%;
}


/* ==================================================
   LOGO
   ================================================== */

.logo {
    margin-top: 50px;
    margin-bottom: 60px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


/* ==================================================
   HEADINGS & TEXT
   ================================================== */

.game-heading {
    font-family: 'Open Sans Reg';
    font-size: 23px;
    font-weight: 600;
    color: #a99cbf;
    margin-top: 55px;
    margin-bottom: 30px;
}

.game-info {
    font-family: 'Open Sans Reg';
    font-size: 15px;
    font-weight: 300;
    color: #a99cbf;
    line-height: 21px;
    margin-bottom: 20px;
}

.newsletter-info {
    font-family: 'Open Sans Reg';
    font-size: 15px;
    font-weight: 300;
    color: #a99cbf;
    line-height: 21px;
    margin-bottom: 20px;
    margin-top: 60px;
}

/* Extra top margin for some paragraphs */
.mt-top {
    margin-top: 20px;
}

/* Privacy / subscribe note */
.subscribe-info {
    margin-top: 20px;
    font-family: 'Open Sans Reg';
    font-size: 14px;
    font-weight: 300;
    color: #6a5e80;
    line-height: 21px;
}


/* ==================================================
   SOCIAL ICONS + DYNAMIC LABEL
   ================================================== */

.social-link {
    padding: 0;
    margin: 0;
    list-style: none;
}

.social-link li {
    float: left;
/*
    margin-right: 15px;
*/
}

/*
.social-link li:last-child {
    margin-right: 0;
*/
}

.social-link li img {
    height: 25px;
    display: block;
}

/* Centers the icons */
.social-link-2 {
    display: table;
    margin: 10px auto 15px;   /* reduced top margin a bit */
}

/* Container for icons + changing text */
.social-section {
    text-align: center;
}

/* The line of text that changes on hover */
.social-label {
    font-family: 'Open Sans Reg';
    font-size: 14px;
    font-weight: 600;
    color: #959595;
    min-height: 1.4em;        /* prevents layout jump */
    margin: 0 0 30px 0;
    margin-top: 65px;
    margin-bottom: 15px;
    transition: opacity 0.2s ease;
}

/* Default text (when nothing is hovered) */
.social-label::after {
    content: "Follow me @TomRelix";
    color: #23ff3a;
    font-weight: 300;
}

/* Replace the text when hovering an icon */
.social-section:has(.icon[data-label="Twitch Live Streams"]:hover) .social-label::after {
    content: "Twitch Live Streams";
    color: #23ff3a;
}

.social-section:has(.icon[data-label="YouTube Videos"]:hover) .social-label::after {
    content: "YouTube Videos";
    color: #23ff3a;
}

.social-section:has(.icon[data-label="X Tweets and Stuff"]:hover) .social-label::after {
    content: "X Tweets and Stuff";
    color: #23ff3a;
}

.social-section:has(.icon[data-label="Support Me on Ko-Fi"]:hover) .social-label::after {
    content: "Support Me on Ko-fi";
    color: #23ff3a;
}

.social-section:has(.icon[data-label="Tip Me on StreamElements"]:hover) .social-label::after {
    content: "Tip Me on StreamElements";
    color: #23ff3a;
}


/* ==================================================
   FOOTER
   ================================================== */

.contact-link {
    font-size: 19px;
    font-weight: 300;
    color: #a99cbf;
}

.footer-said {
    margin-bottom: 25px;
    font-family: 'Open Sans Reg';
    font-size: 15px;
    font-weight: 300;
    color: #a99cbf;
}


/* ==================================================
   FORM / NEWSLETTER (ConvertKit overrides)
   ================================================== */

.formkit-form[data-uid="7e494f64c3"] {
    width: 100% !important;
    margin-top: 0px;
    margin-bottom: 80px;
}

.formkit-form[data-uid="7e494f64c3"][min-width~="700"] [data-style="clean"],
.formkit-form[data-uid="7e494f64c3"][min-width~="800"] [data-style="clean"] {
    padding: 0 !important;
}

input {
    min-height: 40px;
}

.formkit-submit span {
    font-weight: bold;
    font-size: 1.6rem;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 767px) {
    .left-bar {
        max-width: 100%;
    }

    footer p {
        font-size: 16px !important;
    }

    .game-info {
        margin-bottom: 25px;
    }

    .mt-top {
        margin-top: 25px;
    }
}

@media (max-width: 400px) {
    .logo {
        max-width: 100%;
    }
}