#mobil_vertical{display:none;}
#mobil_horizontal{display:none;}
#tablet_vertical{display:none;}
#tablet_horizontal{display:none;}
#escritorio{display:none;}

/*==================General styling for all devices=============*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f6f5f4;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #0f8f14;
    color: white;
    padding: 5px 20px;
    text-align: left;
    z-index: 1;
}

header h1 {
    margin: 0;
    font-size: 36px;
    text-shadow: 
                -1px -1px 0 black,  
                1px -1px 0 black, 
                -1px 1px 0 black, 
                1px 1px 0 black;
}

header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
}

.loader {
    align-self: right;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #0f8f14;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin:auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

input{
    width: 70px;
}

    #time-zone-input{
        width: 150px;
    }
    
/* ========================== Home page styling =============================== */
#home{
    display: block;
}
    
    .album {
        padding: 52px 0px 65px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0px;        
    }

        .card {
            background-color: #f6f5f4;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 10px 15px;
            width: 100%;
            border-radius: 8px;
            background: linear-gradient(145deg, #dddddc, #ffffff);
            box-shadow:  5px 5px 10px #a5a4a3,
                         -5px -5px 10px #ffffff;
            display: flex;
        }
            
            #country-generation-card{
                flex-direction: row;
            }

                #gen-type-container{
                    width: 50%;
                    margin: 10px 20px;
                    position: relative;
                    left: 0px;
                }

                #info-container{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }

                    #tanpercent-green{
                        position: relative;
                        right: 0px;
                    }
            
            #advice-graph-container{
                width: 53%;
                height: 100%;
                margin: 0px 10px 0px 0px;
            }

        .flip-card {
            width: 25em;
        }


            .flip-card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: transform 0.6s;
                transform-style: preserve-3d;
                margin: 10px
                }
            
                .flip-card-front, .flip-card-back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    -webkit-backface-visibility: hidden; /* Hide back side on flip */
                    backface-visibility: hidden;
                    color: black;
                    background-color: #f6f5f4;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    width: 100%;
                    border-radius: 8px;
                    background: linear-gradient(145deg, #dddddc, #ffffff);
                    box-shadow:  5px 5px 10px #a5a4a3,
                                    -5px -5px 10px #ffffff;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                }

                .flip-card-front {
                    transform: rotateY(0deg);
                }

                    .flip-card-front p{
                        padding: 10px;
                    }

                .flip-card-back {
                    transform: rotateY(180deg);
                }

                    .flip-card-back p{
                        padding: 10px;
                    }


            #siri-card{
                height: 14em;
            }

                .grid-item{
                    margin: auto;
                }
                
                .grid-icon{
                    margin: auto;
                    height: 20px;
                    font-size: 25px;
                }

                .info-block {
                    display: none;
                    position: absolute;
                    background-color: #f9f9f9;
                    border: 1px solid #ccc;
                    padding: 5px;
                    z-index: 10;
                    width: 200px;
                    text-align: left;
                    font-size: 20px;
                  }

                .grid-icon:hover .info-block{
                    display: block;
                }




/* ==================== User styling ========================= */
#user {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: transparent;
    padding: 90px 10px 10px;
    margin: 20px;
}

/* ============ Navigation bar styling =============== */
#nav {
    position:fixed;
    bottom: 0%; 
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #333;
    padding: 1px 0;
    height: 54px;
    align-items: center;
}

    .nav-item {
        padding: 1px;
        color: #333;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 54px;
    }

    .nav-item button {
        background-color: #333;
        border: 0px;
    }

    .nav-image{
        height: 54px;
    }

/*================== Mobile vertical styling =============*/
@media only screen and (max-width: 480px) and (orientation: portrait) and (pointer: coarse) and (hover: none){
    #mobil_vertical{
        display: contents;
    }
} 

/*================== Mobile horizontal styling =============*/
@media only screen and (max-height: 480px) and (orientation: landscape) and (pointer: coarse) and (hover: none){
    #mobil_horizontal{
        display:contents;
    }

    header{
        padding: 8px;
        text-align: left;
        z-index: 1;
    }

    header h1 {
        font-size: 30px;
    }

    .album{
        padding: 50px 0px 30px;
    }

    .notifications {
        padding: 80px 10px 60px;
    }

    /* Navigation bar styling */
    #nav {
        padding: 1px 0;
    }

}

/*================== Tablet vertical styling =============*/
@media only screen and (min-width: 481px) and (orientation: portrait) and (pointer: coarse) and (hover: none){
    #tablet_vertical{
        display:contents;
    }    
}

/*================== Tablet horizontal styling =============*/
@media only screen and (min-height: 481px) and (orientation: landscape) and (pointer: coarse) and (hover: none){
    #tablet_horizontal{
        display:contents;
    }

    header{
        padding: 8px;
        text-align: left;
        z-index: 1;
    }

    header h1 {
        font-size: 30px;
    }
    
    .album{
        padding: 50px 0px 30px;
    }

    .notifications {
        padding: 80px 10px 60px;
    }

    /* Navigation bar styling */
    #nav {
        padding: 1px 0;
    }
}

/*================== Desktop styling =============*/
@media (hover:hover){
    #escritorio{
        display:contents;
    }

    .card button:hover {
        background-color: #0056b3;
    }

    header {
        height: 50px;
    }

    header h1 {
        margin: auto; 
        padding: 4px;
    }

    #nav{
        top:0%;
        height: 50px;
        z-index: 1;
        right: 0%;
        width: 30%;
        background-color: #0f8f14;
        padding: 3px;
    } 
    
    #nav button{
        margin: auto;
        background-color: #0f8f14;
        border: 0px
    }
    
    #nav button:hover{
        background-color: #7ce480;
    }

    .album{
        flex-direction: row;
    }
    
    .card{
        width: 25em;
        height: 12em;
        margin: 10px 10px;
    }

    .flip-card{
        width: 25em;
        height: 12em;
    }

    #weather-card{
        width: 100%;
        height: 1%;
    }

    #siri-card{
        height: 14em;
    }

}