@font-face {
    font-family: 'sadmachinemedium';
    src: url('sadmachine-webfont.woff2') format('woff2'),
         url('sadmachine-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

    /*font-smooth: never;
		webkit-font-smoothing : none;-->*/

html{
	height:100%;
	font-family: 'sadmachinemedium', sans-serif;
	color: #FFFFFF;
	font-size:2rem;
	margin:0;
	background-color:#000000;
}

.box{
	width: 100%;
	height: 16px;
	border-style: dashed;
  border-width: 0 1px 0 0;
  border-color: #FFFFFF;
}

.logo-img{
	float: right;
}

.info-grid{
	height: 500px;
	border-style: solid;
  border-width: 0 0 0 1px;
  border-color: #FFFFFF;
}

.sidebar {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #000000;
  overflow-x: hidden;
  border-style: dashed;
  border-width: 0 1px 0 0;
  border-color: #FFFFFF;
}

.main-nav{
	max-width: 25%;
}

main{
}

body{
	color: #FFFFFF;
	height: auto;
	margin:0;
	padding: 0;
  display: flex;
  flex-direction: column;
}

header{
	margin: 0;
}

a{
	font-size: 0.5rem;
	text-decoration: none;
	color: white;
	transition-property:color;
	transition-duration:0s;
}

.contact-a{
	margin-top: 15px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	font-size: 0.5rem;
	text-decoration: none;
	color: white;
}

h1{
	font-size:.5rem;
	white-space: nowrap;
	margin-left:2rem;
}

img{
	margin:0;
}

p{
	font-size: 0.5rem;
	margin:10px;
}

.main-p{
	margin: 0;
}

.works-p, .artist-p, .museum-p{
	margin:0;
	padding:0;
	max-width: 275px;
}

.citations-text{
	margin: 2rem;
}

figure{
	margin: 20px;
}

iframe{
	margin: 0px;
}

figcaption{
	font-size: 0.5rem;
	max-width: 250px;
}

.image-container{
  display: flex;
  flex-direction: column;
}

.image-container img{
  max-width: 100%; /* Ensure the image doesn't exceed its container width */
  height: auto; /* Maintain the image's aspect ratio */
}

nav {
	display:flex;
	justify-content: space-between;
  align-items: baseline;
}

.image-grid {
  display: flex;
  justify-content: space-between;
  margin-right: 4rem;
  margin-left: 4rem;
  margin-bottom: 16rem;
}

.main-nav{
}

.main-nav-item{
	font-size:.5rem;
	margin-right:1rem;
	margin-right:1rem;
	margin-top:0rem;
	margin-bottom:0;
	color: #FFFFFF;
	text-decoration:none;
	transition-property:color, border-color;
	transition-duration:0s;
	width:50%;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-color: #FFFFFF;
	align-self: center;
}

.main-nav-item-active{
	font-size:.5rem;
	margin-right:1rem;
	margin-right:1rem;
	margin-top:0rem;
	margin-bottom:0;
	color:rgb(150,150,150);
	text-decoration:none;
	width:50%;
	border-bottom: 1px;
	border-bottom-style: solid;
	border-color:rgb(150,150,150);
	align-self: center;
}

.footer-nav-item{
	font-size:1rem;
	margin-right:1rem;
	margin-bottom:1rem;
	color:rgb(0,0,0);
	text-decoration:none;
	transition-property:color;
	transition-duration:0s;
}

.main-nav-item:hover, .main-nav-item:focus, .main-nav-item:active{
	color:rgb(150,150,150);
	border-color:rgb(150,150,150);
}

.footer-nav-item:hover, .footer-nav-item:focus, .footer-nav-item:active{
	color:rgb(150,150,150);
	border-color:rgb(150,150,150);
}

a:hover{
	color:rgb(150,150,150);
	border-color:rgb(150,150,150);
}

figcaption:hover, figcaption:focus, figcaption:active{
	color:rgb(150,150,150);
}

/*  */
/* Animations */
/*  */