/* custom.css - for https://gethomepage.dev/ */



html {

    font-size: 120%; 

}

body {

    background: url('/images/background2.jpg') no-repeat center center fixed; 

    background-size: cover;

}



/* Override background */ 

#page_container {

    background: transparent !important;

}





/* Subtle drop shadow for all text - helps with readability against background */

* {

    text-shadow:  0px 0px 0px rgba(0, 0, 0, 0.5), 1px 2px 1px rgba(0, 0, 0, 0.8);

    color: white !important;

}





/* Increase the radius of the corners */

.rounded-md, .rounded {

    border-radius: 15px !important;

}





/* Service items sublte drop shadow */

.service > div {

    box-shadow: 0 0px 6px -1px var(--tw-shadow-color,#0000001a),0 0px 4px 0px var(--tw-shadow-color,#0000001a)

}





/* Make the widget service blocks all one unit */

.service-block {

    background-color: transparent !important;

    box-shadow: none !important;

}

.service div .service-container {

    background: #00000033;

}

.service div> :nth-child(2).service-container {

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

}

.service div > :last-child.service-container {

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}

.service div > *:nth-child(n+3) > div {

    margin-top: 0 !important;

    padding-top: 0 !important;

}





/* NextDNS specific items to only show the 'blocked' container */

#nextdns .service-container .service-block:nth-of-type(1), #nextdns .service-container .service-block:nth-of-type(3) {

    display:none;

}

#nextdns .service-container .service-block:nth-of-type(2) {

    display: box;

}





/* Reduce size of the round dot on top right for the healthcheck */

.site-monitor-status > .rounded-full, .service-container-stats  .rounded-full {

    width: calc(var(--spacing)* 1.5); 

}



.site-monitor-status:has(> .rounded-full), .service-container-stats:has( .rounded-full) {

    padding: calc(var(--spacing)* 2) calc(var(--spacing)* 2) 0 0;

}





/* Make the column with the service id #apptools# always display 2 item wide (these are just titles) */

ul:has(:is(
    li#apptools
)) {   
    @media (width <= 63rem){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* Smaller square icons for the lower bookmark row - will apply to all services when one item has one of the following ids */

ul:has(:is(
    li#bookmark1, 
    li#bookmark2, 
    li#bookmark3
)) {

    @media (width <= 63rem){
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    li {
        aspect-ratio: 1 / 1;

        .service-title {
            height: 100%;
            width: 100%;
        }

        .service-name{
            font-size: 0.65rem;
        }

        .service-icon img{
            width: 50% !important;
            height: auto !important;
        }

        a:nth-of-type(2) {
            display: none;
        }

        a:nth-of-type(1) {
            align-items: center;
            position: relative;
            width: 100%;
        }

        a:nth-of-type(1):hover + a:nth-of-type(2),
        a:nth-of-type(2):hover {
            display: block;
            position: absolute;
            background-color: #00000022;
            z-index: 999;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            font-size: 0.1em !important;
        }
    }
}

/* Calendar spacing fixes */
.service[data-name=""] .service-title {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.service[data-name=""] .w-full.text-center {
    margin-top: 20px !important;
}

.service div> :nth-child(2).service-container {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.service div > :last-child.service-container {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.service div > *:nth-child(n+3) > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* /* Уменьшение шрифта календаря на небольших экранах */ */
/* @media (max-width: 1040px) { */
/*   .service[data-name=""] .widget { */
/*     font-size: 8px; */
/*   } */
/* } */