@import url('https://fonts.googleapis.com/css2?family=Tomorrow: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');
body{
	width: 100%;
	overflow-y: scroll;
	color: #f2f2f2;
	background-color: #000;
  font-family: "Tomorrow", serif;
  font-weight: 400;
  font-style: normal;
	font-size: 1.5vw; /* Convert font size to vw */
	cursor: crosshair;
}

.navbar {
	position: fixed;  /* Keeps it in place while scrolling */
	top: 0;           /* Pins it to the top of the page */
	left: 0;
	width: 80%;      /* Ensures it spans the full width */
	background-color: rgba(0, 0, 0, 0); /* Ensures background consistency */
	padding: 1vw 0;   /* Adjust padding as needed */
	text-align: right;
  font-weight: 700;
	z-index: 1000;    /* Ensures it stays above other content */
}

@media (max-width: 768px) {
    .navbar {
    	position: relative;
      width: 100%;
      font-size: 20px;
      text-align: center;
      display: flex;
      flex-direction: column; /* Stacks items vertically */
      align-items: center; /* Centers items horizontally */
      padding: 2vw 0;
      gap: 10px; /* Increases space between items */
    }
}

.container{
	max-width: 1200px;
	width: 50%; 
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	cursor: crosshair;
	white-space: pre-wrap;
}

/* Add media query to change width for smaller screens */
@media (max-width: 768px) {
	.container {
		width: 90%;
	}
}


.blog{
	margin: 0;
	padding: 0;
	font-size: 1vw; /* Convert font size to vw */
	white-space: pre-wrap;
	text-align: justify;
}

/* Add media query to change font size for smaller screens */
@media (max-width: 768px) {
	.blog {
		font-size: 3vw; /* Convert font size to vw */
	}
}

.blogtext{
	position: relative;
	border-top: 2px dashed;
	float: right;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 3vw;
}


.blogimage{
	margin: 0;
	display: inline-block;
	position: relative;
	float: left;
	height: 15vw; /* Convert height to vw */
	width: 15vw; /* Convert width to vw */
	padding-right: 3vw; /* Convert padding to vw */
	padding-bottom: 1vw;
	object-fit: cover;
}

/* Add media query to change height and width for smaller screens */
@media (max-width: 768px) {
	.blogimage {
		height: 40vw; /* Convert height to vw */
		width: 40vw; /* Convert width to vw */
		padding-right: 5vw;
		padding-bottom: 1.5vw;
	}
}

.blogimage:hover{
	object-fit: scale-down;
	cursor: pointer;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Adjust for dynamic column width */
  grid-gap: .5vw;
  justify-content: center;
}

@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
    grid-gap: 3vw;
  }
}

.gridcontent {
  display: block; /* Changed from inline-block for better control in grid */
  align-content: start;
  border: 2px dashed;
  padding: 0vw 1vw 2vw; /* Simplified padding */
  font-size: 1vw; /* Adaptive font size */
  line-height: 1.2em;
}

@media (max-width: 768px) {
  .gridcontent {
    font-size: 3vw; /* Increased font size for readability on smaller screens */
    padding: 0vw 5vw 2vw; /* Adjusted padding for consistency */
  }
}


.gridimage{
	float: left;
	height: 70%;
	width: 100%;
	/*padding: 1vw; /* Convert padding to vw */
	object-fit: cover;
	border-bottom: 1px dashed;
	margin-bottom: 1vw; /* Convert margin to % */
}


.gridimage:hover{
	object-fit: scale-down;
	cursor: pointer;
}

a.teaching{
	padding-left: 0vw;
	padding-right: 0vw;
	padding-top: 0vw;
	padding-bottom: 0vw;
	margin-left: 0vw;
	margin-right: 0vw;
	margin-top: 0vw;
	margin-bottom: 0vw;
	box-shadow: none;
	border: none;
}

a{
	background-color: #000;
	padding-left: 1%; /* Convert padding to % */
	padding-right: 1%; /* Convert padding to % */
	margin-left: 4%; /* Convert margin to % */
	color: #f2f2f2;
	text-decoration: none;
	border: 1px dashed;
	box-shadow: 0.7vw 0.7vw 0.2vw #7a7a7a; /* Convert box shadow values to vw */
	cursor: pointer;
}

a.unstyled{
	text-decoration: none;
	border: none;
	box-shadow: none;
}

a.inline{
	text-decoration: underline 1px dashed;
	border: none;
	box-shadow: none;
	padding:0;
	margin-left: 0;
}

a.inline:hover{
	text-decoration: none;
}

a:hover{
	box-shadow: none;
	background-color: #f2f2f2;
	color: #000;
}

a.unstyled {
    display: contents; /* Makes the anchor tag not take up space */
}