/* Font Imports */
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DAnonymous%2BPro%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DMontserrat%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DSource%2BSans%2BPro%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DPoppins%3Awght%40300%3B400%3B700%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DComfortaa%3Awght%40400%3B700%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DPlayfair%2BDisplay%3Aital%2Cwght%400%2C400..900%3B1%2C400..900%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DIBM%2BPlex%2BSerif%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DOswald%3Awght%40200..700%26display%3Dswap");

.playfair-display-<uniquifier> {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.roboto-slab-<uniquifier> {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

:root {
    --text_guyn: #243342; /* Define your custom color */
    --link_guyn: #3f5974; /* Define your custom color */
}
/* Base Styles */
body {
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
/*  padding-top: 50px;*/
}

.anonymous-pro {
  font-family: 'Anonymous Pro', monospace;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  padding-top: 10%;
  background-color: var(--text_guyn);
/*  background-color: #2c3e50;*/
  color: #fff;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 10px;
}

.sidebar-header .title {
  letter-spacing: 3px;
  text-transform: lowercase;
  font-family: Montserrat;
  font-weight: 200;
}

.sidebar-header .title a {
  text-decoration: none;
  color: #fff;
}


.sidebar-header-mobile {
  text-align: left;
  margin-left: 2cm;
/*  margin-bottom: 10px;*/
}

.sidebar-header-mobile .title {
  letter-spacing: 1px;
  text-transform: lowercase;
  color: #2c3e50;
}

.sidebar-header-mobile .title a {
  text-decoration: none;
  color: #2c3e50;
}

.main-guyn{
/*  color: #3f5973;*/
	color: var(--text_guyn);
}
/* Links */
/* Reset the link color and add dotted underline */
a {
color: var(--link_guyn) ;  /*Inherits the text color from the surrounding text */ 
	text-decoration: underline dotted; /* Dotted underline */
}

/* If you want to style visited links the same way */
a:visited {
  color: var(--link_guyn) ; 
  text-decoration: underline dotted; /* Dotted underline */
}

/* Optional: Style the hover state if needed */
a:hover {
  color: var(--link_guyn) ;  /*Inherits the text color from the surrounding text */ 
  text-decoration: underline; /* Keeps dotted underline on hover */
/*  text-decoration-color: #3f5973;*/
}

.menu_item { 
  color: var(--text_guyn);
/*  font-family: "Oswald", serif;*/
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;

 }

/* Bio Section */
#bio {
  font-family: 'Anonymous Pro', monospace;
  font-size: 12pt;
  margin: 0 auto 10px;
}
.sidebar-icon{
  color: var(--text_guyn);
/*  color: #3f5973; */
  text-decoration: none; /* Remove any underline, if it exists */
}
.sidebar-icon.hover {
  color: var(--text_guyn);
/*  color: #3f5973; */
  text-decoration: none; /* Remove any underline, if it exists */
}

/* Contact List */
#contact-list li .fa,
article .share .btn {
  transition: color 0.2s ease-out, background 1s ease-in;
  -webkit-transition: color 0.2s ease-out, background 1s ease-in;
}

#contact-list li:hover .fa-twitter,
article .share .twitter:hover { color: #00ACEE; border-color: #00ACEE; }
#contact-list li:hover .fa-linkedin { color: #3f5973; }
#contact-list li:hover .fa-github { color: #3f5973; }
#contact-list li:hover .fa-graduation-cap { color: #3f5973; }
#contact-list li:hover .fa-id-card  { color: #3f5973; }
#contact-list li:hover .fa-envelope { color: #3f5973; }
#contact-list li:hover .fa-pinterest { color: #3f5973; }
#contact-list li:hover .fa-rss { color: #3f5973; }

/* Articles */
article {
  margin-bottom: 40px;
  padding: 0 5%;
}

article_body { margin: 20px 0; }

.post-date {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
}

article img { max-width: 100%; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
/*  font-family: 'IBM Plex Sans Condensed', serif;*/
  font-family: 'Poppins', serif;
  font-weight: 400;
  color: var(--text_guyn);
}
h3 {
    font-size: 17pt; /* Change to your desired size */
}

h4 {
    font-size: 15pt; /* Change to your desired size */
}
h5 {
    font-size: 13pt; /* Change to your desired size */
}

.tvakan{
  font-family: Anonymous Pro;
}

article.home h1 a:hover,
article.home h2 a:hover,
article.home h3 a:hover,
article.home h4 a:hover {
  color: #7b99b7;
}
section {
  margin-left: 4%;
  margin-right: 10%;
  margin-bottom: 3em;
}
div {
  padding-top: 7px;
/*  font-family: 'IBM Plex Sans';*/
  font-family: 'Montserrat';
  font-size: 12pt;
}

.content {
  text-align: justify;
  margin-left: 2%;
  margin-right: 5%;
}
.vspace {
    min-height: 20px;
}
.page-content {
  margin-top: 60px; /* Adjust based on the height of your header */
  padding: 20px; /* Add padding around your content */
  overflow-y: auto;  /* Allow content to scroll */
}


footer {
  padding-top: 15px;
  font-family: 'Montserrat', monospace;
}

/* Components */
.nav-tabs-vertical {
  border-right: 1px solid #ddd;
}

.nav-tabs-vertical li { margin-right: -1px; }

.nav-tabs-vertical>li.active>a,
.nav-tabs-vertical>li.active>a:hover,
.nav-tabs-vertical>li.active>a:focus {
  color: #555;
  background-color: #fff;
  border: 1px solid #ddd;
  border-right-color: transparent;
}

.badge { background: #3f5973; }

/* Responsive */
@media (max-width: 768px) {
  .page-header { margin-right: 70px;}
   .mobile-hide {
    display: none;
  }
}

@media (min-width: 768px) {
   .mobile-nkar {
    display: none;
  }
}

/*.fixed-nav {
    position: fixed;
    top: 0;
    left: 20;
    width: 100%;
    background-color: white;
    padding: 10px 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for a clean look 
}*/