/* Basic Reset */
* {
    margin: 0;
    padding: 0;
}
html, body {
    min-height: 100vh;
}
body {
    font-family: Arial, sans-serif;
    background-color: #dfdfdf;
    display: flex;
    flex-direction: column;
    align-items: center;
}
main {
    flex: 1;
}

/* Color themes */
:root, [data-theme="light"] {
    --primary-color: #343434;
    --secondary-color: #222;
    --accent-color: #555;
    --background-color: #dfdfdf;
    --text-color: black;
}

[data-theme="dark"] {
    --primary-color: #222;
    --secondary-color: #343434;
    --accent-color: #555;
    --background-color: #121212;
    --text-color: white;
}

body, header, .sidebar, footer {
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* Header Styles */
header {
    background-color: var(--primary-color);
    color: var(--text-color);
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.headerLinks, .logoContainer {
    display:flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    width: fit-content;
}
.headerLinks {
    gap: 20px;
}
.imgLogo {
    width: 147px;
    height: 100px;
    object-fit: cover;
}
.profilePicture {
    border-radius: 50%;
}
.scaleUp {
    transition: transform 0.3s ease;
}
.scaleUp:hover {
    transform: scale(1.1);
}
.headerNavButton {
    background: none;
    border: none;
    cursor: pointer;
}

.sidebarIcon {
    width: auto;
    height: 50px;
}
.sidebarIcon, .imgLogo {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.imgLogo:hover{
    transform: scale(1.05);
    filter: drop-shadow(1px 1px 4px white);
}
.sidebarIcon:hover {
    transform: scale(1.2);
}
header a {
    color: white;
    text-decoration: none;
}
header h1::before, header p::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease-out;
}
header h1:hover::before, header p:hover::before {
    width: 100%;
    left: 0;
}
header h1, header p {
    position: relative;
}

html,
.sidebar {
    scrollbar-color: #555 #222;
}

html::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background-color: #222;
}

html::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background-color: #555;
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    right: -540px;
    width: 500px;
    height: 100%;
    background-color: #343434;
    color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    z-index: 1000;
    padding: 20px;

    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar.is-open {
    right: 0;
}
html.sidebar-open {
    overflow: hidden;
}
.sidebarNav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: #343434;
}
.sidebarNav::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background-color: #343434;
    z-index: -1;
    padding: 16px 20px;

}
.closeSidebarIcon {
    width: auto;
    height: 30px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}
.closeSidebarIcon:hover {
    transform: scale(1.2);
}
.socialsSidebarContainer {
    text-align: center;
}
.sidebarPersonalUserIcon {
    width: auto;
    height: 30px;
}
aside hr {
    background-color: white;
    margin: 10px 0;
}
.userSearchContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.userSearchLink {
    color: black;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    width: 96%;
    text-align: center;
    align-self: center;
    padding: 4px 8px;
    background-color: #bbbbbb;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.userSearchLink:hover {
    background-color: #999999;
}
/* Sidebar Friends styles */
.quickUserSearchInputContainer {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.addFriendInput {
    padding: 8px;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    flex: 1;
}
.addFriendButton {
    padding: 8px 16px;
    background-color: #bbbbbb;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.addFriendButton:hover {
    background-color: #999999;
}

.friendRequestContainer, .friendContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #bbbbbb;
}
#friendsListSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.friendRequestContainer:last-child {
    border: none;
}
.friendRequestContainerLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.friendRequestContainerRight, .friendContainerRight {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-self: stretch;
}
.friendRequestDate {
    font-size: 12px;
    color: #999999;
}

.friendContainer:last-child {
    border: none;
}
.friendContainerLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.friendLink {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.acceptButton, .declineButton, .blockButton {
    padding: 4px 8px;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 100%;
    transition: background-color 0.3s ease;
    width: 60px;
}
.acceptButton {
    background-color: #6bb964;
}
.declineButton {
    background-color: #FF6B6B;
}
.blockButton {
    background-color: #bbbbbb;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.blockButton img {
    width: auto;
    height: 16px;
    transition: all 0.3s ease;
}
.acceptButton:hover {
    background-color: #7edb9c;
}
.declineButton:hover {
    background-color: #ff9999;
}
.blockButton:hover {
    background-color: #999999;
}
.blockButton:hover img {
    scale: 1.2;
}
.viewProfileButton {
    padding: 4px 8px;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #bbbbbb;
    text-decoration: none;
    transition: background-color 0.3s ease;
    text-align: center;
    width: 64px;
    font-weight: bold;
}
.viewProfileButton:hover {
    background-color: #999999;
}
.openChatButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 8px;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #bbbbbb;
    transition: background-color 0.3s ease;
    width: 80px;
}
.openChatButton:hover {
    background-color: #999999;
}
.openChatButton:hover .openChatIcon {
    scale: 1.2;
}
.openChatIcon {
    width: auto;
    height: 20px;
    transition: scale 0.3s ease;
}


/* Footer Syles */
footer {
    background-color: #cacaca;
    color: black;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Main Styles */
main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
}
.GameSection {
    display: none;
}
#gameToggle:checked ~ .GameSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
main hr {
    width: 80vw;
    border: 1px solid #343434;
    margin: 20px 0;
}

/* Card Image Styles */
.cardImage {
    width: auto;
    height: 200px;
    margin: 5px;
}
.dealerContainer, .playerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.dealerCards, .playerCards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.hitStandContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
}
.hitButton, .standButton {
    padding: 5px;
    border-radius: 5px;
    position: relative;
}
.hitButton {
    background-color: #343434;
    color: white
}
.standButton {
    background-color: #343434;
    color: white;
    border: 4px solid red;
    transition: filter 0.3s ease;

}
.standButton:hover {
    filter:drop-shadow(0 0 4px red)
}
.hitButton::after, .hitButton::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    height:calc(100% + 8px);
    width: calc(100% + 8px);
    background-image:conic-gradient(from var(--angle), #09ff00, #00ff88, #1aff39, #9dff00, #09ff00);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -2;
    border: none;
    border-radius: 10px;
    animation: 3s spin infinite linear;
}

/* Animated Button */
.playNowButton {
    position: relative;
    margin: 20px 0;
    background-color: #343434;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 16px 24px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.playNowButton::after, .playNowButton::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    height:calc(100% + 8px);
    width: calc(100% + 8px);
    background-image:conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -2;
    border: none;
    border-radius: 10px;
    animation: 3s spin infinite linear;
}
.playNowButton::before {
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.playNowButton:hover::before {
    opacity: 1;
}
@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}


/* User Search Section Styles */

.userSearchInputContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#userSearchText {
    position: relative;
    left: 20px;
}
.userSearchInput {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    height: 30px;
    width: 50vw
    
}
.userSearchButton {
    padding: 2px 2px;
    background-color: #bbbbbb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 46px;
    width: 46px;
    transition: background-color 0.3s ease;
}
.userSearchButton:hover {
    background-color: #999999;
}
.userSearchButton img {
    height: 32px;
    width: auto;
}
#filterText {
    position: relative;
    left: 10px;
    color: black;
    font-weight: bold;
}

/* User Search Result Styles */
#searchResultText {
    position: relative;
    left: 20px;
    font-weight: bold;
}
.userResultSection {
    display: flex;
    flex-direction: column;
}
.userResultContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    width: 70vw;
    border-bottom: 2px solid #000000;
    padding-bottom: 10px;
    gap: 10px;
}
.userResultContainer:hover {
    .userInfoContainer, .oldstatus, .status {
        transition: all 0.1s ease;
        scale: 1.05;
    }
}
.userResultContainer:last-child {
    border: none;
}
.userInfoContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 60%;
}
.pfpSmall {
    width: auto;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
.status {
    font-size: 14px;
    color: green;
    font-weight: bold;
}
.oldstatus {
    font-size: 14px;
    color: rgb(185, 0, 0);
    font-weight: bold;
}
.userNavContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.userNavButton {
    padding: 8px 12px;
    background-color: #343434;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.userNavButton:hover {
    background-color: #555555;
}
.username {
    font-weight: bold;
    font-size: 18px;
}
.usernameLink {
    color: black;
    text-decoration: none;
}
.nameAndDescriptionContainer {
    display: flex;
    flex-direction: column;
}

/* screne size adjustments */
@media (width < 600px) {
    .imgLogo, .description {
        display: none;
    }
    header {
        height: 111px;
    }
}
@media (width < 450px) {
    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
    }
    .sidebar {
        width: 90vw;
    }
    .status, .oldstatus, .description, .userNavButton {
        display: none;
    }
    .userSearchButton, .userSearchInput, #filterText {
        gap: 0;
        margin: 0;
        left: 2px;
        border-radius: 0;
    }
    .userSearchInput {
        width: 100%;
    }
}

/* Profile Page Styles */
.profileSection {
    flex: 1;
    display: grid;
    grid-template-rows: 10px min-content min-content min-content;
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas:
        "ProfilePicture username status"
        "ProfilePicture description description"
        "stats stats stats"
        "comments comments comments";
    gap: 20px;
    background-color: rgb(255, 241, 216);
    padding: 20px;
    border-radius: 10px 10px 0 0;
    width: 750px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.342));
    border: 2px solid rgb(221, 207, 192);
    border-bottom: none;
}

.pfpLarge {
    width: auto;
    height: 150px;
    grid-area: ProfilePicture;
}
.username {
    grid-area: username;
}
.userdescription {
    grid-area: description;
}
.status, .edit_profile {
    grid-area: status;
}
.edit_profile {
    padding: 8px;
    background-color: #343434;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: fit-content;
    justify-self: end;
    text-decoration: none;
}
.stats {
    grid-area: stats;
    width: 100%;
    height: fit-content;
    border-collapse: collapse;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
tr td, tr th {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
    font-weight: bold;
}
table {
    width: fit-content;
    border-collapse: collapse;
    height: 100%;
    width: 550px;
}
.WinLossRatioBar{
    position: absolute;
    width: 50%;
    z-index: -1;
    opacity: 0.5;
    width: 550px;
    height:71px;
    margin-top: 22px;
}
table tr th:first-child {
    width: 258px;
}
table tr th:last-child {
    width: 216px;
}
.userComments {
    grid-area: comments;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.userComments h2 {
    position: relative;
    left: 20px;
}
.commentExample {
    border-bottom: black 1px solid;
    display: grid;
    padding: 10px 0;
    gap: 10px;
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: min-content 1fr;
    grid-template-areas: 
    "Pic username date"
    "Pic commentContent .";
    max-width: 100%;
}
.commentExample:last-child {
    border: none;
}
.commentProfilePic {
    border-radius: 50%;
    width: auto;
    height: 60px;
    grid-area: Pic
}
.commentUsername {
    grid-area: username;
    font-weight: bold;
}
.commentContent {
    grid-area: commentContent;
    width: auto;
    overflow-wrap: anywhere;
}
.commentDate {
    grid-area: date;
}
#commentBreak {
    width: 100%;
}
.commentPic {
    max-width: 100%;
    max-height: 300px;
    height: auto;
    display: block;
}
.userComments textarea {
    width: calc(100% - 16px);
    height: auto;
    min-height: 60px;
    padding: 8px;
    border: 2px solid #bbbbbb;
    border-radius: 4px;
    resize: vertical;
}
.userComments button {
    width: calc(100% + 4px);
    padding: 8px;
    margin-bottom: 16px;
    background-color: #343434;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.userComments button:hover {
    background-color: #414141;
}

/* login/register styles */
.formContainer {
    margin: 0;
    display: flex;
    justify-content: center;
}
.loginForm, .registerForm {
    padding: 20px;
    border: #e7e7e7 1px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    filter: drop-shadow(0 0 2px white);
    width: 550px;
    justify-self: center;
}
form h2, form input, form select {
    margin-bottom: 10px;
}
form input, form select {
    padding: 8px;
    border: rgb(223, 223, 223) 2px solid;
    border-radius: 5px
}
form select {
    width: 100%;
    text-align: center;
}
.dobContainer {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.registerButton, .loginButton {
    background-color: rgb(46, 184, 46);
    padding: 8px;
    border: rgb(66, 124, 48) 2px solid;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    color: black;
}
.registerButton:disabled {
    background-color: rgb(46, 184, 46, 0.7);
    border: rgb(66, 124, 48, 0.7) 2px solid;
    cursor: not-allowed;
}
.registerPrompt, .loginPrompt {
    display:flex;
    align-self: center;
}
.loginForm a, .registerForm a {
    margin-left: 5px;
}
.errorMessage {
    color: red;
    font-weight: bold;
    text-align: center;
}
.successMessage {
    color: green;
    font-weight: bold;
    text-align: center;
}
.greenCheckmark, .redX {
    height: 16px;
    padding-left: 4px;
    display: none;
    transition: all 0.3s ease-in-out;
    z-index: -1;
}

#username {
    margin-bottom: 10px;
}

.usernameStatusContainer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: -10px;
    margin-bottom: 10px;
    transition: all 0.3s ease-out;
    z-index: -1;
    translate: 0 -4px;
}

.usernameStatusContainer.show {
    max-height: 36px;
    opacity: 1;
    margin-bottom: 4px;
}

.usernameStatusContainerSlide {
    display: flex;
    align-items: center;
    gap: 5px;

    min-height: 28px;
    padding-left: 4px;
    padding-top: 4px;

    border-left: 2px solid rgb(223, 223, 223);
    border-radius: 0 0 0 3px;

    z-index: -1;
}

.greenCheckmark,
.redX {
    display: none;
    height: 16px;
}

#usernameMessage {
    margin-bottom: 0;
}





/* index switch */
#gameToggle {
    display: none;
}



/* card spin animation */
#gameToggle:checked ~ .GameSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#gameToggle:checked ~ #WelcomeText {
    display: none;
}
.banner {
    width: 100vw;
    height: 600px;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.8s ease-in-out;
}
.banner .slider {
    position: absolute;
    width: 200px;
    height:250px;
    top: 7%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun var(--slider-speed, 20s) linear infinite;
    z-index: 2;
    transition: --distance 0.8s ease-in-out;
}
@keyframes autoRun {
    from {
        transform: perspective(1000px) rotateX(-12deg) rotateY(0deg)
    }
    to {
        transform: perspective(1000px) rotateX(-12deg) rotateY(360deg)
    }
}
.banner .slider .item {
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) 
        translateZ(var(--distance, 450px)); /* base distance = 450px */
    transform-style: preserve-3d;
    transition: all 0.3s ease
}
.banner .slider .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.banner .slider .item img.front,
.banner .slider .item img.back {
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    position: absolute;
    top: 0; left: 0;
}
.banner .slider .item img.back {
    transform: rotateY(180deg);
}
.banner .slider .item:hover {
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) 
        translateZ(calc(var(--distance, 450px) + 25px))
        scale(1.1);
}

.banner .slider {--quantity: 11;}
.banner .slider .pos1 {--position: 1;}
.banner .slider .pos2 {--position: 2;}
.banner .slider .pos3 {--position: 3;}
.banner .slider .pos4 {--position: 4;}
.banner .slider .pos5 {--position: 5;}
.banner .slider .pos6 {--position: 6;}
.banner .slider .pos7 {--position: 7;}
.banner .slider .pos8 {--position: 8;}
.banner .slider .pos9 {--position: 9;}
.banner .slider .pos10 {--position: 10;}
.banner .slider .pos11 {--position: 11;}


.banner.launching {
    animation: bannerExit 1.4s ease-in-out forwards;
}
.banner.collapsing {
    animation: collapseBanner 0.8s ease-in-out forwards;
}

@keyframes bannerExit {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(80px);
    }

    100% {
        transform: translateY(-120vh);
    }
}

@keyframes collapseBanner {
    from {
        height: 600px;
    }

    to {
        height: 0;
    }
}

@property --distance {
    syntax: '<length>';
    initial-value: 450px;
    inherits: true;
}




/* live notifications */
.liveNotifications {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liveNotification {
    background-color: #222;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

.notificationDot {
    width: 12px;
    height: 12px;
    background: #ffd400;
    border-radius: 50%;
    flex-shrink: 0;
    animation: yellowGlowPulse 1.2s infinite ease-out;
}
@keyframes yellowGlowPulse {
    0% {
        box-shadow:
            0 0 5px rgba(255, 212, 0, 0.8),
            0 0 0 0 rgba(255, 212, 0, 0.45);
    }

    60% {
        box-shadow:
            0 0 7px rgba(255, 212, 0, 0.65),
            0 0 0 8px rgba(255, 212, 0, 0.18);
    }

    100% {
        box-shadow:
            0 0 4px rgba(255, 212, 0, 0.45),
            0 0 0 13px rgba(255, 212, 0, 0);
    }
}

.fadeIn {
    animation: fadeInAnimation 0.5s forwards;
}
@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeOut {
    animation: fadeOutAnimation 0.5s forwards;
}
@keyframes fadeOutAnimation {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}


/* theme switcher */
#themeSwitchButton {
    background: #343434;
    border: none;
    border-radius: 4px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    position: relative;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.themeModeIcon {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.themeIconLight {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.themeIconDark {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
}

#themeSwitchButton.is-dark .themeIconLight {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(180deg);
}

#themeSwitchButton.is-dark .themeIconDark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}


/* Settings styles */
#settingsIcon {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#settingsButton:hover #settingsIcon {
    transform: scale(1.2);
}

#settingsButton.is-active #settingsIcon {
    transform: rotate(90deg);
}

#settingsButton.is-active:hover #settingsIcon {
    transform: rotate(90deg) scale(1.2);
}