
.top-menu {
    margin-top: 0;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    height: 15.5%;
    padding: 10px; 
    background-color: rgba(255, 255, 255, 0.8); 
    border-bottom: 1px solid #ddd; 
    box-sizing: border-box; 
    position: absolute;
    z-index: 1;
    font-family: Siffon;

}


.NoteGLOgo {
    width: 18vw; 
    height: auto; 
    overflow: hidden; 
}


#name {
    margin-top: 5%;
    font-size: 2vw; 
    justify-content: center;
}
#time{
    margin-top: 5%;
    font-size: 1.1vw; 
    justify-content: center;
}

.NoteGLOgo img {
    width: 100%;
    height: auto; 
}

.nameAndTime {
    margin-right: 3%;
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
}


.nameAndTime .time,
.nameAndTime .name {
    font-size: 22px; 
}

.nameAndTime .time {
    font-weight: normal;
}

@media(max-width: 2080px) {
    .NoteGLOgo {
        width: 25vw; 
    }
    
    .nameAndTime .time,
    .nameAndTime .name {
        font-size: 1.8vw; 
    }
} 

@media (max-width: 1200px) {
    .NoteGLOgo {
        width: 40vw; 
    }
    
    #time, #name {
        margin-top: 15%;
        font-size: 4.5vw; 
    }
    #time{
        margin-top: 15%;
        font-size: 2.5vw; 
    }
}

@media(max-width: 1025px) and (max-height: 650px) {
    .NoteGLOgo {
        width: 26vw; 
    }
    
    #time, #name {
        margin-top: 1%;
        font-size: 1.8vw; 
    }
} 

@media (max-width: 768px) {
    .NoteGLOgo {
        width: 50vw; 
    }
    
    .nameAndTime .time,
    .nameAndTime .name {
        font-size: 2.2vw; 
    }
}

@media(max-width: 480px) {
    .NoteGLOgo {
        width: 60vw;  
    }
    
    #time{
        margin-top: 25%;
        font-size: 3.0vw; 
        justify-content: center;
    }

    #name {
        margin-top: 25%;
        font-size: 5vw; 
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .NoteGLOgo {
        width: 61vw; 
    }
    
    .nameAndTime .time,
    .nameAndTime .name {
        font-size: 5vw; 
    }
}
