/* General Styles */
@import url('https://fonts.maateen.me/kalpurush/font.css');

body {
    font-family: Roboto, sans-serif;
    font-family: 'Kalpurush', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fafdff;
    text-align: center;
}

.flex-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* Navigation Bar */
.navbar {
    background-color:   #29373d ;
    background-color:   #fafdff ;
    /*overflow: hidden;*/
    display: flex;
    justify-content: left;
    padding: 1px 0;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0;
    z-index: 1000;
}

.navbar a {
    color: #fafdff;
    color: #0ca9ed;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.3s;
    font-family: Futura, sans-serif;
}

.navbar a:hover {
    /*background-color: #575757;
    border-radius: 3px;*/
}

/* Container Styles */
.container {
    display: none;
    padding: 20px;
    background: #fafdff;
    max-width: 1000px;
    margin: 80px auto 20px;
    /*margin: auto auto auto;*/
    border-radius: 0px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    animation: fadeIn 0.5s ease-in-out;
    font-family: Roboto, sans-serif;
    position: relative;
    text-align: left;
}

/* Active Page Display */
.page.active {
    display: block;
}

/* Profile Picture */
.profile-pic {
    width: 140px;
    height: 170px;
    border-radius: 10%;
    border: 2px solid #333;
    position: relative;
    top: 0px;
    right: 0px;
}

/* Links */
a {
    color: #0ca9ed;
    text-decoration: none;
    transition: color 0.3s;
    font-family: Futura, sans-serif;
}

a:hover {
    /*text-decoration: underline;*/
    color:   #5cc8f7;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

div{
    line-height:23px;
}
/* Fade-in Animation 
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
*/