@font-face {
    font-family: 'PixelFont';
    src: url('/fonts/upheavtt.ttf') format('truetype');
    font-weight: bolder;
    font-style: normal;
}

/* Home Page */
.home-section {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    z-index: 1;
}
.home-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-user-drag: none;
}
.home-background-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;

  background: linear-gradient(to top, var(--backgroundColor), rgba(0, 0, 0, 0));

  pointer-events: none;
}
.home-links-box {
    position: fixed;
    top: calc(var(--header-height) + clamp(10px,1vw,20px));
    right: clamp(10px,1vw,30px);

    -webkit-tap-highlight-color: transparent;

    display: flex;
    align-items: center;

    width: max-content;
    padding: 10px 0;

    background: var(--primaryBubbleColor);
    backdrop-filter: blur(2px);
    border-radius: 10px;
}
.home-link-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;
    color: white;
    text-decoration: none;
}
.home-link-item + .home-link-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.5);
}
.home-icon {
    width: 28px;
    height: 28px;
    fill: white;
    transition: transform 0.2s ease, fill 0.2s ease;
}
.home-event-info-section {
    position: relative;
    top: calc(var(--header-height) + 10px);
    left: 1vw;
    width: clamp(400px,40%,100%);
    height: calc(100% - var(--header-height) - 20px);
    border-radius: 10px;

    backdrop-filter: blur(10px);
    background-color: var(--primaryBubbleColor);
}
.home-event-calendar {
    margin-left: 10px;
    margin-top: 40px;
    width: calc(100% - 20px);
    height: calc(50% - 45px);
    max-height: 600px;
    min-height: 100px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 20px;
    overflow: hidden;
    filter: invert(0.8) hue-rotate(4deg) brightness(0.9);

    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */
}
.home-action-area {
    position: absolute;
    bottom: 10px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */
}
.home-login-button {
    position: relative;

    margin-bottom: 7px;
    height: 40px;
    width: 95%;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 22px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    transition: 0.2s ease;
    backdrop-filter: blur(6px);

    background: #5865f24f;
    color: #6e79f1;
}
.home-login-icon {
    width: 25px;
    height: auto;
    fill: #5865f2;

    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.39));
}
body.logged-out .home-dashboard-button {
    display: none;
}
body.logged-in .home-dashboard-button {
    position: relative;

    margin-bottom: 7px;
    height: 40px;
    width: 95%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;

    font-size: 22px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.2s ease;
    backdrop-filter: blur(6px);

    background: #ffffff4f;
    color: #ffffff;
}

/* Merch */
.merch-section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.merch-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;

    filter: blur(10px) brightness(50%);
}
.merch-section h1 {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
    font-size: 5vw;
    text-align: center;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Dashboard */
.dashboard-section {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 800px;
    overflow: hidden;
    z-index: 1;
}
.dashboard-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;

    filter: blur(10px);
}
.dashboard-background {
    position: absolute;
    top: calc(var(--header-height) + 1%);
    bottom: 1%;
    left: clamp(20px, calc(50% - 900px), 100%);
    right: clamp(20px, calc(50% - 900px), 100%);
    border-radius: 10px;

    background-color: var(--primaryBubbleColor);
    backdrop-filter: blur(10px);
}
.dashboard-info-background {
    position: absolute;
    width: 60%;
    height: 100%;
}
.dashboard-appinfo-background {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: calc(40% - 10px);
    right: 10px;

    border-top-left-radius: 10px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 3px;

    overflow-y: auto;

    background-color: #3f5253;
    backdrop-filter: blur(10px);
}
.dashboard-appinfo-page {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 200px;
    border-radius: 5px;   

    background-color: #6e6e6e;
}
.dashboard-appinfo-background::-webkit-scrollbar {
    width: 6px;
}
.dashboard-appinfo-background::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.493);
    border-radius: 3px;
}
.dashboard-info-footer {
    position: absolute;

    bottom: 30px;
    left: 2%;
    right: 2%;
    height: 50px;

    display: flex;
}
.dashboard-app-button {
    width: calc(80% - 10px);
    height: 100%;

    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */

    border-radius: 10px;

    color: #ffffff;
    background: #303335;

    cursor: pointer;

    transition: 0.2s ease;
}
.dashboard-user-list {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
    border-radius: 10px;
    background: #303335;
    color: #ffffff;

    font-size: 16px;
    font-weight: bold;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.dashboard-info-header {
    position: relative;
    top: 20px;
    left: 10px;
    width: calc(100% - 20px);
    height: 70px;
    border-radius: 10px;    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    user-select: none;

    /* Layered backgrounds */
    background: 
        linear-gradient(
            to right,
            #000000aa 0%,
            #00000000 40%,
            #00000000 60%,
            #000000aa 100%
        ),
        #77813c;

    container-type: inline-size;
}
.dashboard-event-image {
    width: clamp(40px, 12cqw, 80px);
    height: auto;

    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
}
.dashboard-event-name {
    font-family: 'PixelFont', sans-serif;
    font-size: clamp(22px, 9cqw, 50px);
    font-weight: lighter;
    color: #ffffff;

    text-shadow: 0 0 18px rgb(0, 0, 0);
}
.dashboard-event-description-section {
    top: 30px;
    left: 10px;
    width: calc(100% - 20px);
    height: 200px;
    position: relative;
    border-radius: 10px;    

    background-color: #303335;
}
.dashboard-event-description {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 180px;
    position: relative;
    font-size: 18px;
    font-weight: light;
    padding: 20px;
    border-radius: 3px;   

    overflow-y: auto;    /* enables vertical scrolling */

    background-color: #2c2f31;
    color: #ffffff;
}
.dashboard-event-description::-webkit-scrollbar {
    width: 6px;
}
.dashboard-event-description::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.493);
    border-radius: 3px;
}
.dashboard-event-calendar {
    margin-left: 10px;
    margin-top: 40px;
    width: calc(100% - 20px);
    height: calc(50% - 45px);
    max-height: 600px;
    min-height: 100px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 20px;
    overflow: hidden;
    filter: invert(0.8) hue-rotate(21deg) brightness(0.9);

    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */
}
.dashbaord-notlogged {
    position: absolute;

    z-index: 9998;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */

    backdrop-filter: blur(12px);
    background-color: #22222496;
}
.dashbaord-notlogged-text {
    font-size: clamp(30px,5vw,60px);
    color: #ffffff;

    padding-bottom: 10px;
}
.dashbaord-notlogged-button {
    margin-bottom: 7px;
    height: 30px;
    width: 150px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 18px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
    backdrop-filter: blur(6px);
}
.dashbaord-notlogged-button {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.dashbaord-notlogged-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}
.dashbaord-notlogged-button:active {
    transform: scale(0.98);
}

/* APPLICATION */
.application-section {
    position: absolute;
    left: clamp(20px,calc(50% - 500px),100%);
    right: clamp(20px,calc(50% - 500px),100%);

    background-color: #ffff00;
}
.application-page {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);

    background-color: #ff0000;
}
.application-header {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    left: 10px;
    width: calc(100% - 20px);

    background-color: #00ff00;
}
.app-bubble {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    left: 10px;
    width: calc(100% - 20px);

    display: flex;
    flex-direction: column;
    gap: 5px;

    background-color: #0000ff;
}
.application-footer {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    left: 10px;
    width: calc(100% - 20px);

    background-color: #ff00ff;
}
.app-bubble-title {
    margin-top: 5px;
    position: relative;
    left: 5px;
    width: calc(100% - 10px);

    background-color: #00ffff;
}
.app-bubble-description {
    position: relative;
    left: 5px;
    width: calc(100% - 10px);

    background-color: #00ffff;
}
.application-home-button {
    position: fixed;
    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background: linear-gradient(135deg, var(--primaryBubbleColor), #3d3d3d);
    border-radius: 12px;

    color: white;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    -webkit-tap-highlight-color: transparent;

    transition: all 0.25s ease;
}
.application-home-button svg {
    width: 33px;
    height: 33px;
    pointer-events: none;
}
.application-home-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Photos Page */
.photos-section {
    position: relative;
    width: 100%;

    min-height: 100%;
}
.photos-background {
    position: relative;
    width: 100%;
    height: clamp(350px,60%,100%);
    overflow: hidden;
}
.photos-background-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photos-background-image-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
}
.photos-background-image-overlay {
    animation: fadeOverlay 120s cubic-bezier(0.7, 0, 0.9, 1) forwards;
}
@keyframes fadeOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
.photos-sort-section {
    position: relative;
    left: 2vw;
    width: calc(100% - 4vw);
    height: 50px;
    margin-top: 20px;

    border-radius: 20px;

    background-color: var(--primaryBubbleColor);
}
.photos-header {
    position: absolute;
    left: 8vw;
    top: calc(50% - (var(--header-height) / 2));
    max-width: calc(100% - 8vw + 10px);

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */
}
.photos-info {
    position: relative;
    padding: 6px 12px;
    padding-right: 5vw;
        
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    background: transparent; /* move color out */
}
.photos-info::before {
    content: "";
    position: absolute;
    inset: 0;

    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0)
    );

    mask-image: linear-gradient(to right, black 60%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent);

    pointer-events: none;
    z-index: 0;
}
.photos-info > * {
    position: relative;
    z-index: 1;
}
.photos-info-1 {
    font-size: clamp(40px,4vw,100vw);
    font-weight: bolder;

    text-shadow: 0 0 10px rgb(0, 0, 0);

    color: #ffffff;
}
.photos-info-2 {
    font-size: clamp(12px,1vw,100vw);
    font-weight: light;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3vw;

    text-shadow: 0 0 6px rgb(0, 0, 0);

    color: #dadada;
}
.photos-discord-community-invite {
    position: relative;
    left: clamp(20px,2vw,100vw);
    top: clamp(20px,3vh,100vh);
    width: clamp(140px,7vw,100vw);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;
    border-radius: 10px;
    border: 2px solid #2e2e2e;

    font-size: clamp(15px,0.8vw,100vw);

    text-shadow: 0 0 6px rgb(0, 0, 0);
    text-decoration: none;

    color: #ffffff;
    background-color: #2e2e2e71;
    backdrop-filter: blur(4px);

    transition: transform 0.25s ease;
}
.photos-background-image {
    position: absolute;
    inset: 0;                  /* top:0; left:0; right:0; bottom:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-user-drag: none;
}
.photos-background-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;

  background: linear-gradient(to top, var(--backgroundColor), rgba(0, 0, 0, 0));

  pointer-events: none;
}
.photos-area {
    margin: 20px 3vw;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;  /* centers rows */
}
.photo-bubble {
    flex: 1 1 600px;
    max-width: 800px;
    aspect-ratio: 2 / 1;
    border-radius: 15px;
    overflow: hidden;
    position: relative;

    box-shadow: 0 10px 10px rgb(0, 0, 0);

    -webkit-tap-highlight-color: transparent;

    transition: all 0.25s ease;
}
.photo-bubble img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    background-color: var(--primaryBubbleColor);
        
    cursor: pointer;
}
.photo-bubble-author {
    position: absolute;
    bottom: 10px;
    left: 10px;

    font-size: clamp(0px,3vw,18px);

    text-shadow: 0 0 10px rgb(0, 0, 0);

    display: inline-block; /* ensures it fits text width */
    padding: 6px 12px;

    color: white;

    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.712),
        rgba(0, 0, 0, 0)
    );

    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.photo-bubble-tags {
    position: absolute;
    right: 0;
}
.photo-tag {
    position: relative;
    right: 10px;
    top: 10px;
    width: clamp(0px,9vw,40px);
    height: clamp(0px,9vw,40px);
    margin-bottom: 4px;
    display: flex;

    border-radius: 10px;

    background-color: var(--primaryBubbleColor);
}
.photo-tag::after {
    content: attr(data-tag);
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);

    border-radius: 10px;
    padding: 4px 10px;

    opacity: 0;
    pointer-events: none;

    background-color: #242424;
    color: #ffffff;

    font-weight: bold;

    transition: opacity 0.25s ease;
}
.photo-tag:hover::after {
    opacity: 1;
}
.photo-tag::before {
    content: "";
    position: absolute;
    inset: 0;

    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
.photo-tag[data-tag="Illustration"]::before {
    background-image: url('/photo-tags/paint-palette-art-svgrepo-com.svg');
    filter: invert(100%);
}
.photo-tag[data-tag="Photography"]::before {
    background-image: url('/photo-tags/camera-svgrepo-com.svg');
    filter: invert(100%);
}
.photo-tag[data-tag="3D"]::before {
    background-image: url('/photo-tags/cube-svgrepo-com.svg');
    filter: invert(100%);
}
.photo-tag[data-tag="Build"]::before {
    background-image: url('/photo-tags/tools-svgrepo-com.svg');
    filter: invert(100%);
}
.photo-type {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    height: clamp(20px,3vw,30px);

    font-size: clamp(15px,3vw,20px);
    border-radius: 10px;

    pointer-events: none;

    color: #ffffff;
    background-color: var(--primaryBubbleColor);
}
.photo-type::before {
    content: "";
    display: block;
    width: clamp(20px,3vw,28px);
    height: clamp(20px,3vw,28px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.photo-type::after {
    content: attr(data-tag);
}
.photo-type[data-tag="Non-Saga"]::before {
    background-image: url('/photo-tags/Knowledge_Book_JE2.webp');
}
.photo-type[data-tag="Saga"]::before {
    background-image: url('/photo-tags/Book_and_Quill_JE2_BE2.png');
}
.photos-image-display {
    position: fixed;
    top: calc(var(--header-height) + clamp(15px,2vh,30px));
    bottom: clamp(10px,2vh,30px);
    left: clamp(15px,2vw,30px);
    right: clamp(15px,2vw,30px);

    padding: 1vw;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    backdrop-filter: blur(15px);
    background-color: var(--primaryBubbleColor);

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;

    z-index: 10000;
}
.photos-image-display.visible {
    opacity: 1;
    pointer-events: auto;
}
.photos-image-display img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.photos-image-exit {
    position: absolute;
    top: -12px;
    left: -12px;
    width: clamp(40px,(5vw + 5vh) / 2,60px);
    height: clamp(40px,(5vw + 5vh) / 2,60px);
    
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #292929;
    
    transition: all 0.25s ease;
} 
.photos-image-exit svg {
    width: 70%;
    height: 70%;
    pointer-events: none;
}

/* SMP Page */
.smp-section {
    position: relative;
    width: 100%;

    min-height: 100%;
}
.smp-background {
    position: relative;
    width: 100%;
    height: clamp(350px,60%,100%);
    overflow: hidden;
}
.smp-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-user-drag: none;
}
.smp-background-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;

    background: linear-gradient(to top, var(--backgroundColor), rgba(0, 0, 0, 0));

    pointer-events: none;
}
.smp-header {
    position: absolute;
    left: 8vw;
    top: calc(50% - (var(--header-height) / 2));
    max-width: calc(100% - 8vw + 10px);

    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge */
    user-select: none;         /* Standard */
}
.smp-info {
    position: relative;
    padding: 6px 12px;
    padding-right: 5vw;

    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    background: transparent;
}
.smp-info::before {
    content: "";
    position: absolute;
    inset: 0;

    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgba(0, 0, 0, 0.4);

    mask-image: linear-gradient(to right, black 60%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent);

    pointer-events: none;
    z-index: 0;
}
.smp-info > * {
    position: relative;
    z-index: 1;
}
.smp-info-1 {
    font-size: clamp(40px,4vw,100vw);
    font-weight: bold;

    text-shadow: 0 0 10px rgb(0, 0, 0);

    color: #ffffff;
}
.smp-info-2 {
    margin-left: 3vw;
    font-size: clamp(13px,1vw,100vw);

    text-shadow: 0 0 10px rgb(0, 0, 0);

    color: #ffffff;
}
.smp-link-item {
    position: absolute;
    left: 2vw;
    top: calc(100% + 2vh);
    height: clamp(40px,2vw,100%);
    width: clamp(100px,6vw,100%);
    padding: 1px;

    -webkit-tap-highlight-color: transparent;

    border-radius: 20px;
    border: 2px solid #2e2e2e;

    display: flex;
    align-items: center;
    justify-content: center;

    fill: #ffffff;
    background-color: #272727a1;
    backdrop-filter: blur(4px);

    transition: transform 0.25s ease, fill 0.25s ease;
}
.smp-icon {
    height: clamp(35px,2.2vw,100%);
    width: clamp(35px,2.2vw,100%);   
}

/* Submissions */
.submissions-home-button {
    position: fixed;
    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background: linear-gradient(135deg, var(--primaryBubbleColor), #3d3d3d);
    border-radius: 12px;

    color: white; /* controls SVG color via currentColor */
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transition: all 0.25s ease;
}
.submissions-home-button svg {
    width: 33px;
    height: 33px;
    pointer-events: none;
}
.submissions-home-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Forms */
.form-home-button {
    position: fixed;
    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background: linear-gradient(135deg, var(--primaryBubbleColor), #3d3d3d);
    border-radius: 12px;

    color: white; /* controls SVG color via currentColor */
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transition: all 0.25s ease;
}
.form-home-button svg {
    width: 33px;
    height: 33px;
    pointer-events: none;
}
.submissions-home-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) and (pointer: fine) {
    .home-link-item:hover .home-icon {
        transform: scale(1.15);
    }

    .home-link-item:hover .youtube { fill: #ff3131; }
    .home-link-item:hover .discord { fill: #5865F2; }
    .home-link-item:hover .patreon { fill: #F96854; }

    .dashboard-app-button:hover {
        transform: scale(1.012);
    }

    body.logged-in .home-dashboard-button:hover {
        background: #ffffff7c;
        border-color: #ffffffd5;

        transform: scale(1.02);
    }
    .home-login-button:hover {
        background: #5865f27c;
        border-color: #5865f2d5;

        transform: scale(1.02);
    }
    .photos-discord-community-invite:hover {
        transform: scale(1.05);
    }
    .photo-bubble:hover {
        transform: translateY(-5px);
    }
    .photos-image-exit:hover {
        transform: scale(1.1);
    }
    .smp-link-item:hover {
        transform: scale(1.05);
        fill: #F96854;
    }
}
@media (max-width: 739px) {
    .dashboard-info-background {
        width: 100%;
    }
    .dashboard-appinfo-background {
        display: none;
    }
}
@media (max-width: 650px) {
    .home-links-box {
        top: calc(var(--header-height) + 10px);
        right: 10px;
        padding: 0 10px;
        display: unset;
    }
    .home-link-item {
        padding: 10px 0;
    }
    .home-link-item + .home-link-item::before {
        top: 0;
        right: 0;
        height: 1px;
        transform: unset;

        width: unset;
    }
}
@media (max-width: 495px) {
    .home-event-info-section {
        width: calc(100% - 20px);
    }
    .photo-bubble {
        min-width: unset;
        width: 100%;
    }
    .home-links-box {
        display: none;
    }
    .photos-header {
        left: 5px;
    }
    .photos-info {
        padding: 6px 6px;
    }
    .photos-info-2 {
        padding-top: 5px;
    }
    .smp-header {
        left: 5px;
    }
    .smp-info-2 {
        margin-left: 8px;   
    }
    .smp-link-item {
        right: 10px;
    }
}
@media (max-width: 750px) {
    .home-links-box {
        position: absolute;
    }
    .photos-image-display {
        top: clamp(15px,2vh,30px);
    }
}
@media (max-height: 550px) {
    .home-links-box {
        position: absolute;
    }
    .photos-image-display {
        top: clamp(15px,2vh,30px);
    }
}