@charset "UTF-8";
/* CSS Document */


/* @media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;  
  }
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {    
  background-color: #fff;
  color: #000;
}

h1 {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 300;  
}

h2 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: -10px;
}

h3 {
    margin: 0 20px; /* adding left and right margins */
}

p {
    margin: 0 20px 10px; /* adding left and right margins */	
}



#whiteDown {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 125px;
    background-image: url("img/white.png");
    background-repeat: repeat-x;
    z-index: 5;
}

.containerCentered {
  position: absolute;
  height: 100%;
  width: 100%;
}

.container {
    /* max-width: 1200px; /* optional, for large screens */
    margin: 0 auto;
}

.image-section {
    margin-bottom: 40px;
}

img {
    width: calc(100% - 40px); /* width of the image minus margins */
    margin: 0 20px; /* adding left and right margins */
    height: auto; /* automatic height based on the aspect ratio */
    display: block;
    border-radius: 8px;
}

.top-piece {
	margin-top: 100px;
}

#containerLeftAlign {
  margin: auto;
  width: 100%;
  border: none;
  padding: 75px 30px;
  text-align: left;
}

#bio {
  width: 100%;    
  position: relative;
  margin-left: auto;
  margin-right: auto;    
  text-align: left;
}


.bioLeft {
	margin: 0;	
    float: left;
    width: 65%;
    padding-right: 20px;
}

.bioRight {
	margin: 0;	
    float: right;
    width: 30%;
    padding-right: 20px;
    text-align: left;
}

.bioEducation {
	margin: 0;	
    float: left;
    width: 45%;
    padding-right: 20px;
}

.bioExhibitions {
	margin: 0;	
    float: right;
    width: 45%;
    padding-right: 20px;
}

.bioAwards {
	margin: 0;	
    padding-right: 20px;
}

.bioClear {
	margin: 0;	
    clear: left;
}

.biodate {
	margin: 0;	
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 19px;
	font-weight: 400;
}

.bioitem {
	margin: 0;	
    margin-bottom: 5px;
}

.spaceAbove {
    padding-top: 20px;
}

.showBelow {
    height: 100px;
}

.contact {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.socialBlock {
  position: relative;
  top: 50%;    
  -webkit-transform: translateY(-75%);
  -ms-transform: translateY(-75%);
  transform: translateY(-75%);
}

.social {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.socialicons {
    margin: 10px 10px;
    width: 100px;
    height: auto;
}

a:link {
	color: #000;
    text-decoration: none;
}

a:visited {
	color: #000;
    text-decoration: none;
}

a:hover {
	color: #000;
    text-decoration: none;
}

a:active {
	color: #000;
    text-decoration: none;
}

/* CSS from ChatGPT */

.container.fill {
  width: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  text-align: center;	
}

.stacked-images .item {
  width: 100%;
/*  align-items: center; */
  text-align: center;	
  margin-bottom: 20px;
}

.fill {
  width: 100%;
  height: auto;
  /* height: 1000px; /* Set the height as needed
  background-size: cover;
  background-position: center; */
}

.caption {
  text-align: center;
  color: #000;
  padding-bottom: 33px;
}

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities 
   from https://moderncss.dev/pure-css-smooth-scroll-back-to-top/ */

/* .back-to-top-link {
  display: inline-block;
  text-decoration: none;
  /* font-size: 2rem;
  line-height: 3rem; */
  /* text-align: center;
  width: 100%;
  height: auto;
  /* width: 3rem;
  height: 3rem; */
  /* border-radius: 50%;
  background-color: #d6e3f0; */
  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  /* padding: 0.25rem; */
 /*  margin-bottom: 15px; */
/* } */

.to-top {
  height: 20px;
  width: auto;
  margin: 0 45%;
}

/* How far of a scroll travel within <main> prior to the
   link appearing */
$scrollLength: 200vh;

.back-to-top-wrapper {
  // uncomment to visualize "track"
  // outline: 1px solid red;
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  // Optional, extends the final link into the
  // footer at the bottom of the page
  // Set to `0` to stop at the end of `main`
  bottom: -5em;
  // Required for best support in browsers not supporting `sticky`
  width: 100%;
  // Disable interaction with this element
  pointer-events: none;
}

main {
  // leave room for the "scroll track"
  padding: 0 3rem;
  // required to make sure the `absolute` positioning of
  // the anchor wrapper is indeed `relative` to this element vs. the body
  position: relative;
  max-width: 50rem;
  margin: 2rem auto;

  // Optional, clears margin if last element is a block item
  *:last-child {
    margin-bottom: 0;
  }
}

.back-to-top-link {
  // `fixed` is fallback when `sticky` not supported
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // reinstate clicks
  pointer-events: all;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);

  // ... styles written earlier
}


/* CSS from ChatGPT */

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    img {
        width: calc(100% - 20px); /* smaller margins for mobile */
        margin: 0 10px;
    }
}

/* @media (min-width: 500px) and (max-width: 1100px) {  */

/* .carousel-indicators {
    visibility: hidden;
}    
    
.bioLeft {
    float: left;
    width: 45%;
    padding-right: 20px;
}

.bioRight {
    float: right;
    width: 45%;
    padding-right: 20px;
    text-align: left;    
}

.bioEducation {
    float: left;
    width: 100%;
}

.bioExhibitions {
    float: left;
    clear: left;
    width: 100%;
    padding-top: 20px;
}

.bioAwards {
    padding-right: 20px;
}    
    
.socialBlock {
  position: relative;
  top: 425px; 
    
}
    
.socialicons { 
  margin: 10px;
} */
	
/* .container.fill {
  width: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  /* text-align: center;	
} */

/* .stacked-images .item {
  width: 100%;
  margin-bottom: 20px;
}

.fill {
  width: 100%;
  height: auto; /* Set the height as needed */
  /* background-size: cover;
  background-position: center; */
/* } */

.caption {
  text-align: center;
  color: #000;
}


}


/* @media (max-width: 500px) {

.carousel-indicators {
    visibility: hidden;
} */

@media (max-width: 480px) {
    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 16px;
    }

    img {
        width: calc(100% - 10px); /* even smaller margins for very small screens */
        margin: 0 5px;
    }

    
.bioLeft {
    float: none;
    width: 100%;
    padding-right: 20px;
}

.bioRight {
    float: none;
    clear: left;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
}
    
.bioEducation {
    float: left;
    width: 100%;
}

.bioExhibitions {
    float: left;
    clear: left;
    width: 100%;
    padding-top: 20px;
}

.bioAwards {
    width: 100%;
}    
    
.socialBlock {
  position: relative;
  top: 450px;
}
    
.social {
    margin-top: 10px;
}
    
.socialicons { 
  margin: 10px 50px;
}
  
.container.fill {
  width: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  text-align: center;
}

.stacked-images .item {
  width: 100%;
  margin-bottom: 20px;
}

.fill {
  width: 100%;
  height: auto; /* Set the height as needed */
  /* background-size: cover;
  background-position: center; */
}

.caption {
  text-align: center;
  color: #ffffff;
}

}