@charset "UTF-8";
/* CSS Document */
html{
	cursor: none;
}
body{
	margin: 0;
	font-family: 'Roboto', sans-serif;
}
nav{
	display: flex;
	justify-content: space-between;
	width: 1200px;
	min-height: 100px;
	align-items: center;
    margin: auto;
}
main{
    background-color: white;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
h2 {
	text-align: center;
	font-size: 45px;
	max-width: 950px;
	margin: auto;
	line-height: 60px;
	font-weight: 400;
	color: white;
}
h3 {
	text-align: center;
	font-size: 25px;
	font-family: 'EB Garamond', serif;
	color: white;
	letter-spacing: 1px;
	margin-top: 25px;
}
}
.hp_image {
	max-width: 100%;
	height: auto;
  }
.wordmark {
	font-size: 25px;
}
h5{
    padding-top: 15px;
    padding-bottom: 11.5px;
    color: white;
    width: 1200px;
    margin: auto;
    font-weight: 400;
}
a{
	text-decoration: none;
	color: black;
}
.About{
	padding-top: 150px;
	padding-left: 60px;
	max-width: 600px;
	font-size: 18px;
}
body {
	animation: colorchange 45s linear 1s infinite;
	-webkit-animation: colorchange 45s linear 0s infinite alternate; 
}
  
@keyframes colorchange
{
  0%   {background:thistle; color: lavenderblush;}
  33%  {background: rgb(164, 224, 164); color: magenta;}
  66%  {background: rgb(93, 93, 187); color: yellow;}
  100% {background:lavenderblush; color:thistle;}
}
.cursor{
	width: 2rem;
	height: 2rem;
	border: 2px solid black;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
	transition: all 0.3s ease;
	transition-property: background, transform;
    transform-origin: 100% 100%;
    backdrop-filter: blur(3px);
}
.link-grow{
	transform: scale(2.5);
	background: black;
}
.nav-links{
	display: flex;
	justify-content: space-between;
	list-style: none;
	z-index:2;
}
.nav-links, h1{
	flex: 1;
	color: black;
}
.hovered-link{
	color: white;
}
.nav-links li{
	padding-left: 15px;
	padding-bottom: 15px;
	padding-top: 15px;
}
h1{
	font-weight: 400;
}
.picture-grid{
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    justify-items: center;  
    gap: 20px;
    grid-row-gap: 20px;
    max-width: 1200px;
}
main .grid-box img{
    width: 100%;
    position: relative;
}

img:hover{
    position: relative;
}
ul{
    width: 580px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
  .links:hover{
    color: white;
    list-style: none;
    cursor: none;
  }
  a{
    cursor: none;
  }
  .links{
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
  }
  .prof{
	  width: 1200px;
	  margin: auto;
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  }
	  p{
		font-size: 18px;
		color: black;
		line-height: 27px;
		font-weight: 400;
		width: 600px;
		margin: auto;
	  }
.profile{
	width: 35%;
	border-radius: 50%;
	margin: auto;
}
  }