@font-face {
    font-family: "AzaretMono";
    src: url("../fonts/AzeretMono-Regular.ttf");
    
}

body{
    overflow:hidden;
}
main{
    background-color: black;
    color:cyan;
    animation: colorFade 5s infinite;
   
}
div.space#firstspace{
    height: 40vh;
    width: 100%;
    background-color: black;
}
div.space#secondspace{
    height: 50vh;
    width: 100%;
    background-color: black;
}
.btncontainer {
    display: flex;
    justify-content: center;
    align-items: center; 
    -webkit-user-drag: none;
}
a{
    color: white;
    text-decoration: none;
    display: flex; 
    justify-content: center;
    align-items: center; 
    padding: 10px;
    border: 1px solid rgb(125, 125, 255);
    width: 20vh;
    border-radius: 20vh;
    background-color: rgb(125, 125, 255);  
    transition: 0.8s background-color ease-in-out;
    -webkit-user-drag: none;
   
}
a:hover{
    background-color: rgb(55, 55, 138); 
}
@keyframes colorFade {
    0% {
        color: #6b79fd;
    }
    33% {
        color: #828efd; 
    }
    66% {
        color: #5364fa;
    }
    100% {
        color: #6b79fd;
        
    }
}
footer{
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
   
}
  
#clock {
    font-family: "AzaretMono", sans-serif; 
    color: #828efd;                        
    font-size: 1em;                                
    padding: 5px;
    position: absolute;                   
    top: 10px;                            
    right: 10px;  
}
.clock i{
    font-size: 2.5em; /* Adjust this value to change icon size */
    color: #828efd;
    display: flex;                         
    position: absolute;                   
    top: 10px;                            
    right: 106px;
    font-size: 2rem;
    -webkit-user-drag: none;
}