body {
		font-family: "Lato", sans-serif;
		font-size: 155%;
    transition: background-color .5s;
		
	} 
	
/* Media query for mobile devices */  
@media (max-width: 768px) { /* Adjust the max-width as needed */  
    body {  
        font-size: 160%; /* Example of adjusting the font size for mobile (proportional) */  
    }  
}  
 

 	
  html {  
    scroll-behavior: smooth; /* Enables smooth scrolling */  
} 
  
 .container {  
    width: 100%; /* Adjust to your preference */  
    height: 100%; /* Adjust to your preference */  
    position: relative;  
    overflow: hidden; /* Hide the overflow */  
}  

.scrollable-div {  
    width: 100%;  
    height: 100%;  
    overflow-y: scroll; /* Enable vertical scrollbar */  
    padding: 0px;  
    position: relative; /* Make relative for pseudo-element positioning */  
}  

/* Scrollbar styles */  
::-webkit-scrollbar {  
    width: 16px; /* Width of the scrollbar */  
}  

::-webkit-scrollbar-track {  
    background: lightblue; /* Track color */  
}  

::-webkit-scrollbar-thumb {  
    background: #005CE6; /* Handle color */  
    height: 33%; /* Set the thumb height to 33% of the container's height */  
    border-radius: 10px; /* Optional: Rounded corners for the thumb */  
}  

::-webkit-scrollbar-thumb:hover {  
    background: #944DFF; /* Handle color on hover */  
}  
  
  
  
	.sidenav {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #330099;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    color: #F0E7E7;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: cyan;
		text-decoration: underline;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 50px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;  background-color: #6633FF;
}



 .home {
    position: absolute;
    float: right;
    top: 0;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    color: #F0E7E7;
    display: block;
    margin-right: 50px;
}





a.links:link, a.links:visited {color:black; font-size: 120%; text-decoration: underline;  text-shadow: 3px 0 #8080FF, 0 3px #8080FF, 3px 0 #8080FF, 0 3px #8080FF;}
		
a.links:hover {color: black; font-size: 120%; text-decoration: underline; text-shadow: 3px 0 #0000FF, 0 3px #0000FF, 3px 0 #0000FF, 0 3px #0000FF;}
	
 
  .menu-link {  
            color: lightgrey;  
            text-decoration: underline;  
        }  

        .menu-links:hover {  
            color: white;  
        }  
 
    /* Media query for mobile screens */  
@media (max-width: 768px) {  
   
    p.log {  
        font-size: 280%; /* Adjust this based on the original size */  
    }  

}