html, body {
    height: 100%;
    margin: 0;
    
    font-family: 'Archivo', sans-serif;

    background-color: #F8F4ED;
    color: #121212;

    transition: 0.1s ease;
}


a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* cursor */
.my-custom-cursor {
  cursor: url("media/my-cursors-disable.svg") 16 16, auto;
}




/* header */

.header{
    display: flex;
    justify-content: space-between;

    margin-left: 10px;
    margin-right: 10px;

    padding-top: 10px;
}

.logo{
    width: auto;
    height: 40px;
}

.logo img {
    height: 100%;
    width: auto;
    max-height: 40px;
}


.menu{
    list-style: none;      
    padding: 0;
    margin: 0;
    display: flex;         
    gap: 1rem;
}


/* js */

.canvas{
    height: 100vh;
}


/* hero */

.wp {
    height: 90vh;
    margin: 10px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    text-align: center;
    font-weight: 600;
}

.wp > div {
    margin: 20px 0; /* riduce lo spazio tra testo e bottone */
}

.wp p {
    font-size: 180px; /* meno ingombrante ma ancora grande */
    margin: 0;       /* elimina spazio aggiuntivo del paragrafo */
}

.wp button {
    font-size: 16px;     /* rende il bottone ben leggibile */
    padding: 10px;

    border-radius: 100%;
    border-style: none;
    background-color: #121212;
}




/* foother */

.foother {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
  }
  
  /* default light mode positions */
  .bottom-fixed {
    position: fixed;
    bottom: 10px;
    left: 10px;
  
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1rem;
    font-weight: 100;
  }
  
  .bottom-right {
    position: fixed;
    bottom: 10px;
    right: 10px;
  
    display: flex;
    align-items: center;
  }
  


/* dark mode */

    /* body */
            body.dark-mode {
                background-color: #121212;
                color: #F8F4ED;
            }


    /* link */
            body.dark-mode a {
                color: #F8F4ED;
            }


    /* button */
            body.dark-mode .wp button {
                border-style: none;
                background-color: #F8F4ED;
            }  
            

            body.dark-mode .wp {
                flex-direction: row-reverse;
            }


    /* header */
            body.dark-mode .header {
                flex-direction: row-reverse;
            }


     /* foother */
            body.dark-mode .bottom-fixed {
                left: auto;       /* reset */
                right: 10px;      /* posizione a destra */
            }
            
            body.dark-mode .bottom-right {
                right: auto;      /* reset */
                left: 10px;       /* posizione a sinistra */
            }


/* breakpoint */

    /* body */
            @media screen and (max-width: 768px) {

                .logo {
                    height: 30px;
                }

                .menu {
                    font-size: 10pt;
                }
                
                .wp {
                    height: 50vh;
                }

                .wp p {
                    font-size: 40px;
                }

                .bottom-fixed {
                    flex-direction: column;
                    gap: 0;

                    font-size: 10pt;
                }

                .clock{
                    font-size: 10pt;
                }
            }