@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

scroll-container {
  width: auto;
}

@media screen and (min-width: 650px) {
  .content-container {
    width: 650px;
    margin: 0 auto;
  }
}


.content-container {
  padding: 15px;
}

html {
  scroll-behavior: smooth;
}

pre {
  font-family: 'Oswald', serif;
  font-weight: medium;
}

p {
  font-family: 'Oswald', serif;
  font-weight: medium;
}

h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
}

.projects-list {
  justify-content: center;
  /* Center cards horizontally */
  list-style: none;
  /* Remove default list style */
  padding: 0;
  /* Remove default padding */
  gap: 20px;
  /* Spacing between cards */
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  padding: 20px;
  margin-bottom: 10px;
}

.card img {
  width: 100%;
  height: 100%;
  /* Adjust image height as needed */
  object-fit: cover;
  /* Maintain aspect ratio and cover the entire area */
  border-radius: 10px;
  /* Round the top corners of the image */
}

.about-section {
  padding: 10px;
  margin-bottom: 20px;
}

.blog_post {
  margin-bottom: 20px;
}

.blog_post a {
  color: #4d94ff;
}

.click_me_button {
  background-color: #4d94ff;
  /* Background color */
  border: none;
  /* Remove default border */
  color: white;
  /* Text color */
  padding: 9px 17px;
  /* Padding inside the button */
  text-align: center;
  /* Center the text */
  text-decoration: none;
  /* Remove text decoration (underline) */
  display: inline-block;
  /* Make the button a block element */
  font-size: 16px;
  /* Font size */
  margin: 4px 2px;
  /* Margins around the button */
  cursor: pointer;
  /* Change cursor to a pointer on hover */
  border-radius: 5px;
  /* Rounded corners */
}

.contact-links {
  display: flex;
  padding: 5px;
  align-items: center;
}

.contact-details {
  display: flex;
  flex-direction: column;
}

.contact-detail {
 font-family: 'Poppins', 'serif';
 margin-left: 5px;
 margin-bottom: 2px;
}


.github_button {
  background-image: url("images/github_logo.png");
  /* Replace with your image path */
  background-size: cover;
  /* Cover the button area */
  background-repeat: no-repeat;
  /* Prevent image repetition */
  border: none;
  /* Remove default button border */
  padding: 0;
  /* Remove default button padding */
  width: 30px;
  /* Adjust button width as needed */
  height: 30px;
  /* Adjust button height as needed */
  cursor: pointer;
  /* Change cursor to a pointer on hover */
}

.github_button span {
  display: none;
  /* Hide the text by default */
}

.github_button:hover span {
  display: block;
  /* Show the text on hover */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.code_block {
  padding: 10px;
  border-radius: 5px;
  background-color: #f3ef91;
}

nav {
  text-align: start;
}

.navbar {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* optional spacing between items */
}

.navbar li {
  margin-right: 15px
}

.navbar a {
  color: black;
  display: block;

  padding: 14px 0px;
  text-decoration: none;
}

body, ul {
  margin: 0;
  padding: 0;
}