html {
    background: rgb(37, 40, 49);
}

@media (min-width: 1000px) {
    /* Large screens */

    #home-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    
        margin-left: clamp(5vh, 50px, 5vw);
        margin-right: clamp(5vh, 50px, 5vw);
        margin-top: clamp(5vh, 50px, 5vw);
    }
    
    #home-top-text {
        margin-left: clamp(6vh, 60px, 6vw);
    }
    
    #home-navigation {
        margin-top: clamp(1vh, 10px, 1vw);
        margin-left: clamp(12vh, 120px, 12vw);
        margin-bottom: clamp(2vh, 20px, 2vw);
    }
    
    #home-wallet {
        margin-left: clamp(12vh, 120px, 12vw);
        display: flex;
        flex-direction: column;
    }
    
    #home-cards {
        margin-left: clamp(12vh, 120px, 12vw);
        display: flex;
        flex-direction: column;
    }

    #home-top-image {
        width: clamp(30vh, 300px, 30vw);
        height: auto;
        transition: var(--default-transition);
        cursor: pointer;
    }
}

@media (max-width: 1000px) {
    /* Small Screens */

    #home-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    
        margin-left: clamp(1vh, 10px, 1vw);
        margin-right: clamp(1vh, 10px, 1vw);
        margin-top: clamp(1vh, 10px, 1vw);
    }
    
    #home-top-text {
        margin-left: clamp(2vh, 20px, 2vw);
    }
    
    #home-navigation {
        margin-top: clamp(1vh, 10px, 1vw);
        margin-left: clamp(2vh, 20px, 2vw);
        margin-bottom: clamp(1vh, 10px, 1vw);
    }
    
    #home-wallet {
        margin-left: clamp(2vh, 20px, 2vw);
        display: flex;
        flex-direction: column;
    }
    
    #home-cards {
        margin-left: clamp(2vh, 20px, 2vw);
        display: flex;
        flex-direction: column;
    }

    #home-top-image {
        width: clamp(20vh, 200px, 20vw);
        height: auto;
        transition: var(--default-transition);
        cursor: pointer;
    }
}

#home-top-image:hover {
    scale: 1.05;
}

.home_card {
    display: flex;
    flex-direction: row;

    background-color: var(--default-glass-background);
    border: var(--default-glass-border);
    backdrop-filter: var(--default-glass-blur);
    transition: var(--default-transition);
    border-radius: 20px;

    padding: clamp(0.8vh, 8px, 0.8vw);
    padding-left: clamp(1.5vh, 15px 1.5vw);
    padding-right: clamp(1.5vh, 15px 1.5vw);
    width: fit-content;
    margin: clamp(0.5vh, 5px, 0.5vw);
}

.home_card_text {
    display: flex;
    flex-direction: column;
}

.home_card_text_name {
    color: white;
    font-family: var(--default-font-family);
    font-size: clamp(1.6vh, 16px, 1.6vw);

    margin: 0px;
    padding: 0px;
}

.home_card_text_uuid {
    color: white;
    font-family: "Noto Sans Mono", "Courier New", monospace;
    font-size: clamp(1.2vh, 12px, 1.2vw);
    opacity: 0.7;

    margin: 0px;
    padding: 0px;
}

#home_cards_create {
    width: fit-content;
}

#home-top-profile {
    position: relative;
}

#home-top-username {
    height: fit-content;
}

#home-top-profile-dropdown {
    position: absolute;
    top: 30%;

    background-color: var(--default-glass-background);
    border: var(--default-glass-border);
    backdrop-filter: var(--default-glass-blur);
    border-radius: 20px;

    max-width: clamp(30vh, 300px, 30vw);
    width: fit-content;
}

#home-top-profile-dropdown > button {
    white-space: nowrap;
}

#home_card_menu {
    position: absolute;
    top: 100%;
    left: 0px;
    display: flex;
    flex-direction: column;

    background-color: var(--default-glass-background);
    border: var(--default-glass-border);
    backdrop-filter: var(--default-glass-blur);
    border-radius: 15px;
    transition: opacity 0.3s ease,
        scale 0.3s ease;
    z-index: 3;

    /* Starting properties for animation */
    opacity: 0;
    scale: 0.9;
}

#home_card_menu.show {
    opacity: 1;
    scale: 1;
}

#home_card_menu > button {
    text-align: left;
}

#home_menu_delete:hover {
    color: rgb(255, 117, 117);
    background-color: rgb(75, 61, 61);
}

#dialog_home_rename {
    display: flex;
    flex-direction: column;
}

#dialog_home_delete {
    display: flex;
    flex-direction: column;
}