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;
}


/* 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;
}


/* 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;
  }


  /* 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;
                }
            }