body {
    background-color: #383838;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 200px;
}

/* Basic styles for the navigation bar */
nav {
    background-color: #333;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

nav a {
    color: white;
    text-decoration: none;
}

#mini-bio {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
    margin: 20px;
    border: 1px transparent #ccc;
    font-size: 1.3rem;
}

#latest-video {
    margin: 20px;
    font-size: 1.3rem;
}

#riddley-button {
    background-color: indigo;
    color: white;
}

#orcaslicer-button {
    background-color: #00d4aa;
    color: white;
}

#brave-button {
    background-color: #FB542B;
    color: white;
}

#resolve-button {
    background-color: #ff4a3e;
    color: white;
}

#vscode-button {
    background-color: #007acc;
    color: white;
}

#autoclicker-button {
    background-color: #ff0000;
    color: white;
}

#decode-button {
    background-color: #0073E6;
    color: white;
}

#carspotting-button {
    background-color: #07deff;
    color: black;
}

#zimmagination-button {
    background-color: #e87f11;
    color: white;
    margin-bottom: 0;
}

#orbit-button {
    background-color: #ffb916;
    color: black;
}

#fishnet-button {
    background-color: #0672ea;
    color: white;
}

#lunchranker-button {
    background-color: #0ea5e9;
    color: white;
}

#spacetimexplored-button {
    background-color: #00FFFFCC;
    color: black;
}

.my-button {
    border: transparent 1px;
    background-color: #7fffd4;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: black;
    transition: background-color 0.2s ease;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    transition: transform 0.2s ease;
}

.my-button:hover {
    cursor: pointer;
    background-color: rgb(94, 200, 165);
    transform: scale(1.06);
    transition: transform 0.2s ease;
}

.my-button2 {
    border: transparent 1px;
    background-color: #7fffd4;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: black;
    transition: background-color 0.2s ease;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    transition: transform 0.2s ease;
}

.my-button2:hover {
    cursor: pointer;
    transform: scale(1.06);
    transition: transform 0.2s ease;
}

.hidden {
    display: none;
}

.logo {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    transition: transform 0.2s ease;
    height: auto;
    display: flex;
    align-items: center;
}

.logo-long {
    width: 15rem;
    height: auto;
    margin: 0;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0.3rem 0.5rem;
    padding-top: 0.5rem;
    border: transparent 1px;
    border-radius: 0.5rem;
}

.logo:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.website {
    margin: 20px;
    padding: 20px;
    border: 1px transparent #ccc;
    border-radius: 5px;
    background-color: #444;
}

.website div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.center {
    align-items: center;
    text-align: center;
}

.website div button {
    font-size: 1.2rem;
}

.email-input, .password-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.2rem;
}

#signup-message, #login-message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.2rem;
}

#account-status {
    margin: 20px 0;
    padding: 15px;
    background-color: #444;
    border-radius: 5px;
    font-size: 1.2rem;
}

@media screen and (max-width: 690px) {
    body {
        padding-bottom: 100px;
    }

    nav {
        flex-direction: column;
        gap: 10px;
    }

    .my-button {
        width: 100%;
        margin: 0;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .my-button:hover {
        transform: scale(1.02);
    }

    .logo {
        width: 2rem;
        height: 2rem;
    }

    #mini-bio {
        font-size: 1rem;
    }

    .website {
        margin: 10px;
        padding: 10px;
    }

    .website div {
        flex-direction: column;
        gap: 10px;
    }

    .website div img {
        width: 40%;
        height: auto;
    }

    .website div h3 {
        font-size: 1.4rem;
    }

    .website div p {
        font-size: 1.2rem;
    }

    .website div a {
        font-size: 1.2rem;
    }

    .website div button {
        font-size: 1.2rem;
    }
}

/* Account page styles */
#account-page>div,
#signup-page>div,
#login-page>div {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
    margin: 20px;
    border: 1px transparent #ccc;
    font-size: 1.3rem;
}

#account-status,
#signup-status,
#login-status {
    margin: 20px 0;
    font-size: 1.3rem;
    text-align: center;
    color: #fff;
}

.account-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    width: 35vw;
    margin-left: auto;
    margin-right: auto;
}

#signup-page #signup-inputs,
#login-page #login-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px auto;
    width: 35vw;
    align-items: center;
}

#signup-inputs,
#login-inputs {
    width: 100%;
}

#signup-page input[type="email"],
#signup-page input[type="password"],
#login-page input[type="email"],
#login-page input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 1.3rem;
    background-color: #444;
    color: white;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

#signup-page input[type="email"]:focus,
#signup-page input[type="password"]:focus,
#login-page input[type="email"]:focus,
#login-page input[type="password"]:focus {
    border-color: #7fffd4;
    outline: none;
}

#signup-page input[type="email"]::placeholder,
#signup-page input[type="password"]::placeholder,
#login-page input[type="email"]::placeholder,
#login-page input[type="password"]::placeholder {
    color: #999;
}

#signup-email-btn,
#login-email-btn {
    background-color: #7fffd4;
    color: black;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    box-sizing: border-box;
    gap: 0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

#signup-email-btn:hover,
#login-email-btn:hover {
    background-color: rgb(94, 200, 165);
    transform: scale(1.02);
}

#signup-email-btn i,
#login-email-btn i {
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.gsi-material-button {
    background-color: #444 !important;
    border: 1px solid #555 !important;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    box-sizing: border-box;
    gap: 0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.gsi-material-button:hover {
    background-color: #555 !important;
    transform: scale(1.02);
}

.gsi-material-button .gsi-material-button-icon {
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    display: contents;
}

.gsi-material-button .gsi-material-button-contents {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#signup-message,
#login-message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.3rem;
    text-align: center;
}

#signup-message2,
#login-message2 {
    margin-top: 15px;
    color: #999;
    font-size: 1.3rem;
}

#signup-message2 a,
#login-message2 a,
#login-message a,
#signup-message a {
    color: #7fffd4;
    text-decoration: none;
    transition: color 0.2s ease;
}

#signup-message2 a:hover,
#login-message2 a:hover,
#login-message a:hover,
#signup-message a:hover {
    text-decoration: underline;
}

#login-btn:hover, #signup-btn:hover {
    transform: scale(1.025);
}

#signout-btn {
    background-color: #ff4a3e;
    color: white;
}

#signout-btn:hover {
    background-color: #ff6b61;
    transform: scale(1.02);
}

/* Google Sign-in Button Styles */
.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61 !important;
    box-shadow: none;
}

.gsi-material-button:disabled .gsi-material-button-state {
    background-color: #ffffff61;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 0.38;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 0.38;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 0.12;
}

.gsi-material-button:not(:disabled):hover {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 0.04;
}

/* Mobile Responsiveness */
@media screen and (max-width: 700px) {
    #account-page>div,
    #signup-page>div,
    #login-page>div {
        margin: 10px;
        padding: 15px;
        font-size: 1rem;
    }

    .account-buttons,
    #signup-page #signup-inputs,
    #login-page #login-inputs {
        width: 70vw;
    }

    #account-status,
    #signup-status,
    #login-status {
        font-size: 1rem;
    }

    #account-page button,
    #account-page input {
        font-size: 1rem;
        padding: 10px;
    }

    .gsi-material-button {
        height: 40px;
        font-size: 1rem;
    }

    .gsi-material-button .gsi-material-button-icon {
        height: 20px;
        width: 20px;
    }

    #signup-page #signup-inputs,
    #login-page #login-inputs {
        width: 70vw;
    }
}