/* 
* Template Name    : Moodboard.
* Author           : Jorge Perez
* Version          : 1.0.1
* Updated          : May 2024
* File Description : CSS of all social media cards ---------  */

/*===============================================
    YouTube Card
===============================================*/
.youtube-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fcf0f0;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.youtube-card:hover {
    background-color: #fbe8e8;
    transition: all 0.3s;
}

.youtube-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.youtube-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.youtube-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.youtube-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.youtube-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.youtube-card-username {
    color: #ea3626;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.youtube-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.youtube-card-link {
    color: #1b95e0;
}

.youtube-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-youtube {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 12px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

@media (max-width: 312px) {
    .btn-youtube {
        display: none;
    }
}

.btn-youtube:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}


.btn-youtube-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-youtube-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Instagram Card
===============================================*/
.instagram-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #f6fafd;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.instagram-card:hover {
    background-color: #f1f7fc;
    transition: all 0.3s;
}

.instagram-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.instagram-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.instagram-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.instagram-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.instagram-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.instagram-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.instagram-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin-top: 1rem;
}

.instagram-card-content p {
    margin-bottom: 0;
}

.instagram-card-link {
    color: #1b95e0;
}

.instagram-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-instagram {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #5591e7;
    transition: all 0.3s;
    border-radius: 12px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-instagram:hover {
    color: rgb(255, 255, 255);
    background-color: #3f74c2;
    transition: all 0.3s;
}

.btn-instagram-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-instagram-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    X Card
===============================================*/
.x-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.x-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.x-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.x-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.x-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.x-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.x-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.x-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.x-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.x-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 1rem 0 0;
}

.x-card-content p {
    margin-bottom: 0;
}

.x-card-link {
    color: #1b95e0;
}

.x-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-x {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    border-radius: 10px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-x:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-x {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-x-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-x-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Gumroad Card
===============================================*/
.gumroad-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fff6fe;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.gumroad-card:hover {
    background-color: #ffeffd;
    transition: all 0.3s;
}

.gumroad-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.gumroad-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.gumroad-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.gumroad-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gumroad-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.gumroad-card-username {
    color: #dc87cf;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.gumroad-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.gumroad-card-link {
    color: #1b95e0;
}

.gumroad-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-gumroad {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #dc87cf;
    transition: all 0.3s;
    border-radius: 12px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

@media(max-width: 300px) {
    .btn-gumroad {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-gumroad:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}


.btn-gumroad-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-gumroad-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Threads Card
===============================================*/
.threads-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.threads-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.threads-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.threads-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.threads-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.threads-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.threads-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.threads-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.threads-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.threads-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.threads-card-link {
    color: #1b95e0;
}

.threads-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-threads {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-threads:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-threads {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-threads-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-threads-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    LinkedIn Card
===============================================*/
.linkedin-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #f6fafd;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.linkedin-card:hover {
    background-color: #f1f7fc;
    transition: all 0.3s;
}

.linkedin-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.linkedin-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.linkedin-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.linkedin-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.linkedin-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.linkedin-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.linkedin-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.linkedin-card-link {
    color: #1b95e0;
}

.linkedin-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-linkedin {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #5591e7;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-linkedin:hover {
    color: rgb(255, 255, 255);
    background-color: #3f74c2;
    transition: all 0.3s;
}

.btn-linkedin-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-linkedin-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Facebook Card
===============================================*/
.facebook-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #f6fafd;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.facebook-card:hover {
    background-color: #f1f7fc;
    transition: all 0.3s;
}

.facebook-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.facebook-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.facebook-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.facebook-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.facebook-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.facebook-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.facebook-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.facebook-card-link {
    color: #1b95e0;
}

.facebook-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-facebook {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #5591e7;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-facebook:hover {
    color: rgb(255, 255, 255);
    background-color: #3f74c2;
    transition: all 0.3s;
}

.btn-facebook-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-facebook-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    TikTok Card
===============================================*/
.tiktok-logo {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.tiktok-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.tiktok-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.tiktok-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.tiktok-card-header-image {
    flex: 0 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.tiktok-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.tiktok-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tiktok-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.tiktok-card-username {
    color: #d8515d;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.tiktok-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.tiktok-card-link {
    color: #1b95e0;
}

.tiktok-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-tiktok {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #d8515d;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-tiktok:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-tiktok {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-tiktok-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-tiktok-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    BuyMeACoffee Card
===============================================*/
.coffee-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fffef6;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.coffee-card:hover {
    background-color: #f5f3e3;
    transition: all 0.3s;
}

.coffee-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.coffee-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.coffee-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.coffee-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.coffee-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.coffee-card-username {
    color: #fadc4d;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.coffee-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.coffee-card-link {
    color: #1b95e0;
}

.coffee-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-coffee {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #000;
    background-color: #fadc4d;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

@media(max-width: 300px) {
    .btn-coffee {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-coffee:hover {
    color: rgb(255, 255, 255);
    background-color: #ffe044;
    transition: all 0.3s;
}


.btn-coffee-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-coffee-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Patreon Card
===============================================*/
.patreon-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
}

.patreon-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.patreon-card:hover {
    background-color: #feefed;
    transition: all 0.3s;
}

.patreon-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.patreon-card-header-image {
    flex: 0 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.patreon-card-header-image img {
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.patreon-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.patreon-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.patreon-card-username {
    color: #585858;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.patreon-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.patreon-card-link {
    color: #1b95e0;
}

.youtube-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-patreon {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #d7644f;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

@media(max-width: 300px) {
    .btn-patreon {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-patreon:hover {
    color: rgb(255, 255, 255);
    background-color: #d65d48;
    transition: all 0.3s;
}


.btn-patreon-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-patreon-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Notion Card
===============================================*/
.notion-logo {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
}

.notion-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.notion-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.notion-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.notion-card-header-image {
    flex: 0 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.notion-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.notion-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.notion-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.notion-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.notion-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.notion-card-link {
    color: #1b95e0;
}

.notion-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-notion {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-notion:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-notion {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-notion-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-notion-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    GitHub Card
===============================================*/
.github-logo {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
}

.github-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.github-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.github-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.github-card-header-image {
    flex: 0 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.github-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.github-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.github-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.github-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.github-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.github-card-link {
    color: #1b95e0;
}

.github-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-github {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-github:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-github {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-github-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-github-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Substack Card
===============================================*/
.substack-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #fdf6f2;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.substack-card:hover {
    background-color: #faede6;
    transition: all 0.3s;
}

.substack-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.substack-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.substack-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.substack-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.substack-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.substack-card-username {
    color: #d7644f;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.substack-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.substack-card-link {
    color: #1b95e0;
}

.substack-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-substack {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #ed7037;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

@media(max-width: 300px) {
    .btn-substack {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-substack:hover {
    color: rgb(255, 255, 255);
    background-color: #da6630;
    transition: all 0.3s;
}


.btn-substack-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    border-radius: 50px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-substack-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Discord Card
===============================================*/
.discord-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #f6fafd;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.discord-card:hover {
    background-color: #f1f7fc;
    transition: all 0.3s;
}

.discord-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.discord-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.discord-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.discord-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.discord-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.discord-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.discord-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.discord-card-link {
    color: #1b95e0;
}

.discord-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-discord {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #5591e7;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-discord:hover {
    color: rgb(255, 255, 255);
    background-color: #3f74c2;
    transition: all 0.3s;
}

.btn-discord-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-discord-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Medium Card
===============================================*/
.medium-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.medium-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.medium-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.medium-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.medium-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.medium-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.medium-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.medium-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.medium-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.medium-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 1rem 0 0;
}

.medium-card-content p {
    margin-bottom: 0;
}

.medium-card-link {
    color: #1b95e0;
}

.medium-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-medium {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    border-radius: 10px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-medium:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-medium {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-medium-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-medium-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Generic Link Card
===============================================*/
.generic-logo {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.generic-card {
    width: auto;
    height: auto;
    border: 1px solid #e0e0e0;
    background-color: #f7ffff;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.generic-card:hover {
    background-color: #f0ffff;
    transition: all 0.3s;
}

.generic-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.generic-card-header-image {
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}

.generic-card-header-image img {
    border-radius: 100%;
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.generic-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.generic-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.generic-card-username {
    color: #5591e7;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.generic-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 15px 0 0;
}

.generic-card-content p {
    margin-bottom: 0;
}

.generic-card-link {
    color: #1b95e0;
}

.generic-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-generic {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #000000;
    transition: all 0.3s;
    border-radius: 12px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-generic:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(59, 59, 59);
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-generic {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-generic-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-generic-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

.image-card {
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.content-image {
    width: auto;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.content-image-gallery {
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.inner-col {
    flex: 0 0 auto;
    width: 50%;
}

.grid-insta {
    margin-top: 1.5rem;
    aspect-ratio: 1.5;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/*===============================================
    Convert Kit Card
===============================================*/
.convertkit-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.convertkit-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.convertkit-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.convertkit-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.convertkit-card-header-image {
    flex: 0 0 auto;
}

.convertkit-card-header-image img {
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.convertkit-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.convertkit-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.convertkit-card-username {
    color: #FB6068;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.convertkit-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 1rem 0 0;
}

.convertkit-card-content p {
    margin-bottom: 0;
}

.convertkit-card-link {
    color: #1b95e0;
}

.convertkit-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-convertkit {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #FB6068;
    transition: all 0.3s;
    border-radius: 10px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-convertkit:hover {
    color: rgb(255, 255, 255);
    background-color: #d24c53;
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-convertkit {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-convertkit-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-convertkit-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}

/*===============================================
    Twitch Card
===============================================*/
.twitch-logo {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.twitch-card {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}

.twitch-card:hover {
    background-color: rgb(244, 244, 244);
    transition: all 0.3s;
}

.twitch-card-header {
    align-items: center;
    display: flex;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.twitch-card-header-image {
    flex: 0 0 auto;
}

.twitch-card-header-image img {
    display: block;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.twitch-card-header-content {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.twitch-card-name {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 650;
    line-height: 1em;
}

.twitch-card-username {
    color: #9146ff;
    font-size: 16px;
    line-height: 1em;
    margin: 3px 0 0;
}

.twitch-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
    justify-content: space-between;
    margin: 1rem 0 0;
}

.twitch-card-content p {
    margin-bottom: 0;
}

.twitch-card-link {
    color: #1b95e0;
}

.twitch-card-date {
    color: #697882;
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.btn-twitch {
    position: absolute;
    right: 26px;
    top: 24px;
    font-size: 12px;
    color: #ffffff;
    background-color: #9146ff;
    transition: all 0.3s;
    border-radius: 10px;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-twitch:hover {
    color: rgb(255, 255, 255);
    background-color: #6a30c2;
    transition: all 0.3s;
}

@media(max-width: 200.5px) {
    .btn-twitch {
        position: relative;
        right: auto;
        top: auto;
    }
}

.btn-twitch-mini {
    font-size: 12px;
    color: #ffffff;
    background-color: #FF0000;
    transition: all 0.3s;
    /* padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px; */
    /* width: 100%; */
}

.btn-twitch-mini:hover {
    color: rgb(255, 255, 255);
    background-color: #d83224;
    transition: all 0.3s;
}