* {
   /* background: #000 !important;
   color: #0f0 !important;
   outline: solid #f00 1px !important; */
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
body {
	 /* background-color: ghostwhite; */
	 /* margin: 3rem auto; */
	 /* max-width: 60rem; */
   transition: background-color 1s ease;
}

.intro{


  padding-top: 10%;
  width: 70%;
  font-family: Georgia;

	 line-height: 1.8;
  font-size: 1.2rem;
    margin: auto;
      padding-bottom: 10%;
}

.intro p{
  padding-bottom: 1rem;
}
.graphic{
  width: 70%;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
}

 section {
	 display: flex;
	 flex-direction: column;
   width: 100vw;
	 /* margin-bottom: 5rem; */
}

 section > * {
	 flex: 1;
}
 article {
	 padding: 8% 0%;
   flex: 2;

}
 article p {
	 font-family: Georgia;
	 font-size: 1.1rem;
	 line-height: 1.8;
   width: 70%;
   padding-bottom: 1rem;
   margin: auto;


}

 p a{


   text-decoration: underline;
}

 p a:hover{

 text-decoration: none;
}



.article-box{
  width: 85%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  text-align: right;

}

.overline {
  font-weight: 500 !important;
}

.article-center .title-byline{
  width: 100%;
}
.title-byline{
  width: 50%;
}
a {
  color: black;
}

a:visited {
  color: black;
}

a h2:hover{
  text-decoration: underline;
}

h2{
  font-family: franklin-gothic-urw, sans-serif;
}

.byline{
  font-size: 20px !important;
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  margin-top: 2%;
}

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

.year-name {
  font-family: minion-pro;
  font-size: 1.5rem;
    color: black;
    font-style: italic;
    line-height: 1.8;
   width: 70%;
   padding-bottom: 10px;
   margin: auto;
}

.final-text {
  font-family: minion-pro;
  font-size: 2.5rem;
    color: black;
    font-style: italic;
    line-height: 1.8;
   width: 70%;
   padding-bottom: 10px;
   margin: auto;
}

.photo-credit{
  padding-top: 2rem;
  font-style: italic;
  text-align: right;
  color: black;
  opacity: 55%;
}

.article-box img{
  margin-top: none;
  width: 50%;
  height: auto;
  object-fit: contain;
}

.article-box img:hover {
  border: white;
  border-width: 1rem;
}

.gallery-cell .article-center h2 {
  font-size: 1.8em;

}

.article-box{
   padding-top: 5%;
   padding-bottom: 5%;
}

.article-box h2{
  font-size: 1.8em;
}

.article-right{
  flex-direction: row-reverse;
  text-align: left;
}

article img {
	-webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.5));
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;

}

img {
  border-radius: 10px;
}

article img:hover {
	-webkit-filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
}

h5 {
  padding: 1.5% 0%;
  /* width: 70%; */
  margin: auto;
  text-align: center;
  font-family: franklin-gothic-urw;
  font-size: 1.5rem;
  color: black;
  background: rgba(255, 255, 255, 0.27);
  font-style: italic;
  margin-bottom: 0%;
}

.gallery {
  background: rgba(0, 0, 0, 0.15);
}

.gallery-cell {
  width: 66%;
  min-height: 76vh;

}


.padding{
  width: 9%;
}


.article-center{
  flex-direction: column-reverse;
  align-items: center;
}

.article-center img{
 margin-bottom: 2%;
 width: 65%;
}

.article-center h2{
  text-align: center;
  font-size: 40px;
}

.logo {
  margin: auto;

}


.header{
  background-image: url(https://assets.dailyprincetonian.com/projects.dailyprincetonian.com/commencement-2023/commencement-2023-header.jpg);
  background-size: cover;
  background-attachment: initial;
  background-position: center;
  text-align: center;
  min-height: 100vh;
  background-repeat: no-repeat;
 }

 .no-touch .header {
   background-attachment: fixed;

 }

figure {

	 align-self: flex-start;
	 /*background-color: #daf7a6;*/
	 display: flex;
	min-height: 60vh;
	 margin: 0;
	 width: 100%;
	 /* justify-content: center; */
   align-items: center;
   justify-content: flex-end;

	 top: 0rem;
   background-image: url("teeth.jpg");
   background-size: cover;
   background-position: center;
   flex-direction: column;
   -moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;

}
  figure h1 {
    color: white;
    font-size: 9vh;
    text-shadow: 0 0 1vh rgba(0, 0, 0, .8);
  }

  #grad-headline,
  .figure-small-headline {
    font-size: 5vh;
  }


  .arrow{
    width: 20px;
    opacity: 0.6;
  }

  .arrow-bottom{
    padding-top: 0.5vh;
    padding-bottom: 3vh;
  }

  .arrow:hover{
    opacity: 1;

  }

.main-headline{
  font-size: 7vh;
  font-style: italic;
  text-align: center;
  line-height: 1;
  padding-bottom: 5%;
  font-family: minion-pro;

}
 @media screen and (min-width: 45rem) {

	 figure {
		 position: sticky;
      height: 100vh;
	}
  figure h1 {
    text-shadow: 0 0 1vh rgba(0, 0, 0, .2);
  }
  .arrow-bottom {
    padding-bottom: 3vh;
  }


  section {
		 flex-direction: row;
	}

  figure h1 {
    color: white;
    font-size: 5vw !important;

  }

}

/* TIMELINE BELOW */

:root {
    --timeline-white: #ffff;
    --timeline-black: rgb(0, 0, 0);
    --timeline-color: #3a5f95;
    --timeline-shadow-color: rgba(0, 0, 0, 0.1);
    --timeline-date-shadow: rgba(231, 117, 0, 0.3);
    --timeline-bullet: 32px
}

.timeline {

    color: var(--timeline-black);
    z-index: 0;
    font-family: franklin-gothic-urw, sans-serif;
    position: relative;
    margin: 0px auto;
    width: 100%;
    padding: 0px 0;
}

.timeline ul {
    margin: 0;
    padding: 0;
}

.timeline ul li {
    list-style: none;
    box-sizing: border-box;
    line-height: normal;
    position: relative;
    width: 50%;
    padding: 24px 50px;
}

.timeline ul li .right_content a {
    font-family: franklin-gothic-urw, sans-serif;
    color: black;
    font-style: italic;
    text-decoration: none;
    font-weight: 600;

}

.timeline ul li .right_content h2 {
    font-family: franklin-gothic-urw, sans-serif;
    color: black;
    font-style: italic;
    text-decoration: none;
    font-weight: normal;

}

.timeline ul li .right_content p {
    font-family: franklin-gothic-urw, sans-serif;
    font-size: 15px;
}

.timeline ul li .right_content a:hover {
    color: var(--timeline-color);
}

.timeline ul li .left_content h3 {
    color: var(--timeline-black);
    font-size: 15px;
    font-family: franklin-gothic-urw, sans-serif;

}

.timeline:before {
    content: "";
    position: absolute;
    height: 100%;
    left: 50%;
    width: 2px;
    top: 0px;
    background: var(--timeline-color);
    z-index: 1;
}

.timeline ul li .right_content h2 {
    color: var(--timeline-black);
    font-size: 20px;
    font-family: franklin-gothic-urw, sans-serif;
    padding: 0px 2px 18px 0px;

}

.timeline ul li:nth-child(odd) {
    float: left;
    text-align: right;
    clear: both;

}

.timeline ul li:nth-child(even) {
    float: right;
    text-align: left;
    clear: both;

}

.left_content {
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--timeline-color);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--timeline-shadow-color);
    right: -6px;
    top: var(--timeline-bullet);
    z-index: 1;
}

.timeline ul li:nth-child(even):before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--timeline-color);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--timeline-shadow-color);
    left: -4px;
    top: var(--timeline-bullet);
}

.timeline ul li:nth-child(odd) .left_content {
    position: absolute;
    top: 12px;
    right: -155px;
    margin: 0;
    padding: 8px 16px;
    color: var(--timeline-white);
    box-shadow: 0 0 0 3px var(--timeline-date-shadow);
    border-radius: 18px;
}

h3.date{
   color: #3a5f95;
}

.timeline ul li:nth-child(even) .left_content {
    position: absolute;
    top: 12px;
    left: -155px;
    margin: 0;
    padding: 8px 16px;
    color: var(--timeline-white);
    box-shadow: 0 0 0 3px var(--timeline-date-shadow);
    border-radius: 18px;
}



@media (max-width: 1000px) {
.column {
  width: 100% !important;

}
    .timeline {
        width: 100%;
    }

    .main-headline{
      font-size: 40px;
    }

    .graphic{
      width: 100%;}



    .article-box{

      flex-direction: column;
    }

    .header{
      background-size: cover;

      min-height: 75vh;
    }
/*
#credits article{
  width: 90%
} */


  .article-right h2{
  margin-left: 0;
  text-align: left;
}

 .article-box h2{
  text-align: left;
}

.title-byline{
  margin-bottom: 2%;
  width: auto;
}


.article-box img{
  width: 100%;
}

.article-center{
  align-items: left;
}

.article-center h2{
  text-align: left;
  font-size: 1.8em;
}

.article-center img{
 margin-top: 0%;
}



    .timeline:before {
        left: 20px;
    }

    .timeline ul li:nth-child(odd),
    .timeline ul li:nth-child(even) {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        padding-bottom: 0em;
    }

    .timeline ul li:nth-child(odd):before {
        top: var(--timeline-bullet);
        left: 16px;
    }

    .timeline ul li:nth-child(even):before {
        top: var(--timeline-bullet);
        left: 16px;
    }

    .timeline ul li:nth-child(odd) .left_content,
    .timeline ul li:nth-child(even) .left_content {
        top: var(--timeline-bullet);
        left: 50px;
        right: inherit;
    }


}

.sectioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10%;
}
.row {
  display: flex;
  justify-content: center;
}
.column {
  width: 50%;
  display: inline-block;
  margin: 0 auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.cred1 {
  color: white;
  text-align: center;
  font-family: franklin-gothic-urw;
  font-weight: bold;
  padding: 0;
  margin-bottom: 3%;
}

.cred2 {
  color: white;
  text-align: center;
  font-family: minion-pro;
  padding: 0;
}

/* colours */
.color-letterone{
  background-color: #8b9bbc;
}

.color-yearone {
  background-color: #939354;
}

.color-yeartwo {
  background-color: #AAC5E6;
}

.color-yearthree {
  background-color: #ffdea7;
}

.color-yearfour {
  background-color: #cc846a;
}

.color-yeargrad {
  background-color: #ffb060;
}


.color-introduction {
  background-color: ghostwhite
}
.color-credits {
  background-color: #000000;
}

.color-violet {
  background-color: #7A4EAB;
}
.color-indigo {
  background-color: #4332CF;
}
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #98FB98;
}
.color-yellow {
  background-color: #F5BE6A;
}
.color-orange {
  background-color: #F19031;
}
.color-red {
  background-color: #e0474c;
}
.color-peach{
  background-color: #FFE5B4;
}
.color-black{
  background-color: #000000;
}

.color-memoriam {
  background-color: #1c2332;
}

.color-fbBlue{
  background-color: #3b5998;
}

.color-mint{
  background-color:#3eb489;
}

.color-pink{
  background-color:#FFC0CB;
}

.color-white{
  background-color:#f9f1f1;
}

.color-paleblue{
  background-color:#99ccff;
}

.color-next{
  background-color: #e4b68a;
}

.color-ghostwhite{
  background-color: ghostwhite;
}

/* In Memoriam: white text on dark background */
#in-memoriam .year-name,
#in-memoriam article h2,
#in-memoriam article p,
#in-memoriam article a,
#in-memoriam article a:visited {
  color: white;
}

#in-memoriam article img {
  opacity: 0.9;
}

/* Centered single-article layout for Grad and Memoriam */
#grad article,
#in-memoriam article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#grad article p,
#in-memoriam article p {
  text-align: left;
}

#grad .article-box,
#in-memoriam .article-box {
  max-width: 700px;
}