@import url('https://fonts.googleapis.com/css2?family=Freehand&display=swap');

html {
    font-family: 'Courier New', Courier, monospace;
    color: rgb(255, 255, 255);
    font-size: 1rem;   
}

    body {
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        animation-name: newbg;
        animation-duration: 60s;
        animation-iteration-count:infinite;
    } @keyframes newbg {
        0% {background-image: url(/media/neb1.jpeg);}
        25% {background-image: url(/media/neb2.jpeg);}
        50% {background-image: url(/media/neb3.jpeg);}
        75% {background-image: url(/media/neb4.jpeg);}
        100% {background-image: url(/media/neb1.jpeg);}
    }






    /* MAIN CLASSES */

        /* SECTIONS */
        .main-section {
            display: flex;
            flex-direction: column;
            margin-top: 5%;
            align-items: center;    
        }
        
        .weather-section {
            width: 100%;
            height: auto;
            margin-bottom: 10rem;
            color: white;
        }

        .calendar-section {
            width: 80%;
            margin: auto;            
        }

        /* SECTIONS */

        /*  SCROLL BAR */
        ::-webkit-scrollbar {
            width: 0.3rem;
            height: 0.3rem;
        }
        
        /* Track */
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 3px grey; 
            border-radius: 0.3rem;
        }
        
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: rgba(39, 182, 4, 0.774); 
            border-radius: 0.3rem;
        }
        
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #4aff02; 
        }
        /*  SCROLL BAR */

        /* OVERLAYS */
        .overlay {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .overlay-strong {
            background-color: rgba(0, 0, 0, 0.8);
        }
        /* OVERLAYS */

        /* BUTTONS */
        button {
            background-color: rgba(0, 0, 0, 0.555);
            color: white;
            border: none;
            text-align: center;
            font-size: 1rem;
            font-family: inherit;
            text-align: center;
            font-size: 1rem;
            font-family: inherit;
        }
            button:hover {
                color: rgb(87, 86, 86);            
            }
        /* BUTTONS */

        /*  BORDERS */
            .green-left-border {
                border-left: 0.2rem solid #288603;
                padding-left: 1rem;
            }

            .green-top-border {
                border-top: 0.2rem solid #288603;
                padding-top: 1rem;
            }
        /*  BORDERS */


    /* MAIN CLASSES */






    /* MODAL ELEMENTS < */
    .close {
        color: #ffffff;         
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      
        .close:hover, .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    /* MODAL ELEMENTS > */





    /* NAVIGATION < */
    .nav-box {
        width: 100%;
        height: 3rem;
        text-align: center;
        position: fixed;
        bottom: 0;
    }    
        .nav{
            margin-top: 0.5rem;
        }        
            .nav-box a {
                text-decoration: none;
                text-transform: uppercase;
                color: rgb(253, 253, 253);
                font-size: 1rem;
            } 
            .nav-box a:hover {
                color: rgb(87, 86, 86);            
            }
            
            #NewCity {
                background-color: rgba(0, 0, 0, 0);
                width: auto;
            }        
            hr {
                width: 20rem;
            }
    /* NAVIGATION > */







    /* HEADER < */
    header {
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        background: rgb(2,0,36);
        background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(6, 5, 5, 0.763) 100%);
        width: 100%;
    }
        /* CLOCK < */
        #clock {
            line-height: 0;
            font-size: 2rem;
            margin-left: 1rem;
        }
            #clock div {
                display: flex;
            }
                #second {
                    font-size: 1rem;
                }            
        /* CLOCK > */

        /* CURRENT WEATHER < */
        #weather-btn {
            background-color: rgba(0, 0, 0, 0);
            border: none;
            color: inherit;
            margin-top: 1rem;
            margin-right: 1rem;
        }

            #cweather {
                margin: 0rem;
                padding: 0rem;
                font-weight: normal;
            }
            #state {
                margin: 0rem;
                padding: 0rem;
            }
                #weather-btn a {
                    text-decoration: none;
                    color: inherit;
                }
        /* CURRENT WEATHER > */
    /* HEADER > */






    /* MAIN SECTION < */
    .quotes {
        text-align: center;
        width: 50%;
        margin-top: 15%;
        background-color: #0000006b;
        border-radius:0% 50% / 200%;
    }


    /* GET CITY < */
    #cityContent { /* MODAL CONTAINER */
        display: none; /* none */
        position: fixed;
        z-index: 1;
        align-self: center;
        margin-bottom: 1rem;
        width: 15rem;
        height: 6rem;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(15, 88, 2, 0.777);
        border-radius: 0% 50% /100% ;
    }

        #cityContent form {
            display: flex;
            flex-direction:column;
            text-align: center;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        #cityContent label {
            font-size: 0.8rem;
        }

        #cityContent input {
            background-color: rgba(0, 0, 0, 0);
            color: white;
            border: none;
            font-size: 1rem;
            text-align: center;
        }

        #cityContent button {
            margin-top: 0.5rem;
        }
    /* GET CITY < */       




    /*  3-DAY WEATHER */

    .w-box {
        width: 80%;
        height: 80%;
        margin: auto;
        border-radius:0% 50% / 200%;
    }               
            
            
        
        .day {
            display: flex;
            justify-content: space-around;
            width: 80%;
            margin: auto;
            font-size: 80%;
        }
        
        .hours {
            display: flex;
            overflow-x: auto;  /* show the button horizontaly */
            overflow-y: hidden;        
            width: 80%;
            height: 5rem;
            margin: auto;
        }
    
            .hours > button {
                margin: 0rem 0rem 3rem 1rem;
                color: white;
                background-color: rgba(0, 0, 0, 0);
                border-top: none;
                border-bottom: none;
                border-left: 0.1rem solid white;
                border-right: 0.1rem solid white;
            }
        
                .hours > button:hover{
                    border-left: 0.1rem solid rgb(21, 250, 0);
                    border-right: 0.1rem solid rgb(21, 250, 0);
                }
        
            .hours img {
                width: 2rem;
            }

        .current-daily {
            display: grid;
            grid-template-columns: 1fr 1fr;  
            padding: 0rem;
            margin: auto;     
            width: 80%;
        }
            .current-daily h5 {
                margin: 2rem 0rem 0rem 5rem;
            }
                .max-temp {
                    margin: 2rem auto auto auto;
                    color:#4aff02;                        
                }
                .min-temp {
                    margin: auto;
                    color: rgb(23, 214, 228);
                }
                
        .current-icon-temp {
            width: 30rem;
            margin: auto;
            padding: 1rem;
        }

            .current-icon-temp > p {
                text-align: center;
            }
                    
            .icons {
                margin: auto;
                width: 8rem;
                filter: contrast(140%);
            }
                        
            .current-temperature {
                font-size: 1.5rem;
            }
    /*  3-DAY WEATHER   */





        

        /*  CALENDAR  <  */         
            .calendar-box {
                margin-top: 10rem;
            }
                .calendar {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    margin-right: 2rem;
                    width: 100%;                    
                }

                    .months {
                        margin: auto;
                    }
                    .calendar h3 {
                        margin: 0.3rem;
                    }
                    table {
                        font-size: 0.8rem;
                        width: 80%;
                    }
                        tr {
                            text-align: center;                            
                        }     
            
                .notes {
                    font-family:'Freehand', cursive;
                    display: flex;
                    flex-direction: column;
                    margin-top: 1rem;
                    background-color: rgba(0, 0, 0, 0.664);
                    border-radius: 0% 30% 0% 0%;
                    color: rgb(255, 255, 255);
                }
                    .notes h3 {
                        margin: 1rem 0rem 0rem 1rem;
                    }
                    .notes hr {
                        width: 20%;
                        float: left;
                    }
                    .notes button {
                        font-family: 'Courier New', Courier, monospace;
                        width: 100%;
                    }   .notes button:hover{color: #000;}

                    .notes input {
                        background-color: #00000056;
                        color: white;
                    }
                        
        /*  CALENDAR  >  */
    /*  MAIN SECTION < */



      
    



/* MEDIA QUERY < *

/* SmallScreenPC */
@media (max-width: 900px) {
    .section {
        margin-top: 20%;
    }
    
    .quotes {
        width: 70%;
    }

    .quotes p {
        width: 90%;
        margin-bottom: 1rem;
    }

    .dayDate {
        border-radius: 0% 50% 0% 50% 
    }
    

    .grid-box {
        margin-bottom: 5rem;
        grid-template-columns: 1fr;
    }

    .weather-section{
        margin-top: 5rem;
        height: auto;
    }

    .current-daily {
        margin: auto;
        grid-template-columns: 1fr;
    }
   

    .calendar {
        grid-template-columns: 1fr 1fr; 
        padding-bottom: 1rem;                        
    }
        .calendar-section {
            padding-bottom: 5rem;
        }
    
    .current-icon-temp {
        padding-bottom: 1rem;
    }
}






/* Tablets */
@media (max-width:482px) {

    header {
        flex-direction: column;
        position: unset;
    }

    .day {
        flex-direction: column;
        padding: 1rem 0rem;
    }
        .day h3 {
            margin: 0rem;
        }

    #clock {
        height: 12rem;
        font-size: 10rem;
        margin: 0rem 0rem 10rem 5rem;
        font-size: 10rem;
        margin: 0rem 0rem 12rem 5rem;
    }

    #second {
        font-size: 3rem;
    }

    #cweather {
        font-size: 3rem;
    }

    #cweather {
        font-size: 2rem;
    }

    .weather-info p {
        line-height: 0.1rem;
    }

    .icons {
        display: none;
    }
  
    #weather-btn {
        font-size: 1.5rem;
        margin:auto;
    }

    .section {
        padding-top: 2rem;
    }

    .weather-section {
        font-size: 0.9rem;
    }
        .current-daily {
           padding: 0.5rem;
        }

        .green-top-border {
            width: 40%;
        }

        .current-temperature {
            padding-bottom: 2rem;
        }

    .grid-box {
        grid-template-columns: 1fr;
    }

    .calendar {
        grid-template-columns: 1fr;
        margin-top: 5rem;
    }
}






/* Smartphones */
@media (max-width:321px) {

    header {
        flex-direction: column;
    }

    #clock {
        margin: 2rem 2rem 0rem 2rem;
        height: 16rem;
    }

    #hour {
        margin-top: 4rem;
        font-size: 8rem;
    }

    #minute {
        font-size: 8rem;        
    }

    #second {
        font-size: 3rem;
    }

    #cweather {
        margin-top: 0rem;
        font-size: 1rem;
    }

    .section p {
        margin-bottom: 0.5rem;
    }

    .weather-info p {
        line-height: 1.1rem;
    }

    .icons {
        display: none;
    }
}




/* Smartphones - flipped */
@media (max-height: 380px) {
    .section p {
        margin-bottom: 5rem;
    }

    .left-side-info {
        margin: 1rem 0rem 1rem 0rem;
        font-size: 0.8rem;
    }

    .quotes {
        margin-bottom: 3rem;
    }
}
/* MEDIA QUERY > */