/***********************************************
** Jpwaters09.github.io Page                  **
** Language: CSS                              **
** Author: Jacob Waters                       **
** Github: github.com/jpwaters09              **
** Copyright (c) 2025 Jacob Waters            **
** Contact me: jpwaters09.business@gmail.com  **
***********************************************/

body {
    margin: 0;
}

body.transition {
    transition: background-color 0.3s ease;
}

#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 0px 5px 2px #00000050;
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    z-index: 1;
}

#topbar.transition {
    transition: background-color 0.3s ease;
}

#homeBtn {
    background-color: #00000000;
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 10px;
    outline: none;
}

#homeBtn.transition {
    transition: color 0.3s ease, background-color 0.3s ease;
}

#links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    gap: 50px;
}

#homeLink, #projectsLink, #contactLink, #aboutLink {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #00000000;
    border: none;
    font-size: medium;
    border-radius: 10px;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
}

#homeLink.transition, #projectsLink.transition, #contactLink.transition, #aboutLink.transition {
    transition: color 0.3s ease;
}

#homeUnderline, #projectsUnderline, #contactUnderline, #aboutUnderline {
    margin: 2px 0 0 0;
    visibility: hidden;
    width: 0;
    transition: width 0.3s ease;
}

#modeSwitch {
    margin-left: 60px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#modeSwitchSpan {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    margin-bottom: 5px;
    user-select: none;
}

#modeSwitchSpan.transition {
    transition: color 0.3s ease;
}

#toggleSwitch {
    width: 50px;
    height: 24px;
    border-radius: 50px;
    padding: 2px;
}

#toggleSwitch.transition {
    transition: background-color 0.3s ease;
}

#toggle {
    border-radius: 50%;
    width: 24px;
    height: 100%;
    cursor: pointer;
    margin: none;
}

#toggle.transition {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#logo {
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

#name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    font-weight: 500;
    user-select: none;
}

#footer {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    box-shadow: 0px 0px 5px 2px #00000050;
    justify-content: center;
    align-items: center;
}

#footerTitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: x-large;
    margin-bottom: 5px;
    user-select: none;
}

#footerTitle.transition {
    transition: color 0.3s ease;
}

#footerSubtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    user-select: none;
}

#footerSubtitle.transition {
    transition: color 0.3s ease;
}

#footerLinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

#footerLeft, #footerRight {
    margin-top: 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

#footerEmailDiv, #footerEmailDiv, #footerGitHubDiv, #footerXDiv, #footerPatreonDiv, #footerPayPalDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#footerEmailIcon, #footerWebsiteIcon, #footerGitHubIcon, #footerXIcon, #footerPatreonIcon, #footerPayPalIcon {
    height: 24px;
    margin-right: 10px;
    -webkit-user-drag: none;
    user-select: none;
}

#footerEmailRight, #footerWebsiteRight, #footerGitHubRight, #footerXRight, #footerPatreonRight, #footerPayPalRight {
    display: flex;
    flex-direction: column;
}

#footerEmailSpan, #footerWebsiteSpan, #footerGitHubSpan, #footerXSpan, #footerPatreonSpan, #footerPayPalSpan {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
    user-select: none;
    font-weight: 500;
}

#footerEmailSpan.transition, #footerWebsiteSpan.transition, #footerGitHubSpan.transition, #footerXSpan.transition, #footerPatreonSpan.transition, #footerPayPalSpan.transition {
    transition: color 0.3s ease;
}

#footerEmail, #footerWebsite, #footerGitHub, #footerX, #footerPatreon, #footerPayPal {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #00000000;
    border: none;
    font-size: medium;
    border-radius: 10px;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    outline: none;
}

#footerEmail.transition, #footerWebsite.transition, #footerGitHub.transition, #footerX.transition, #footerPatreon.transition, #footerPayPal.transition {
    transition: color 0.3s ease;
}

#footerEmailUnderline, #footerWebsiteUnderline, #footerGitHubUnderline, #footerXUnderline, #footerPatreonUnderline, #footerPayPalUnderline {
    margin: 2px 0 0 0;
    visibility: hidden;
    width: 0;
    transition: width 0.3s ease;
}