* {
	margin: 0;
	
	
}

html,body{
	height:100%;
	font-family: 'Old Standard TT';
}


h1, h2, h3, h4, h5, p{
	margin-bottom: 20px;
}

.subSection a {
    color: blue;
	text-decoration: none;
}


.arrow_right {
  width: 0; 
  height: 0; 
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
  border-left: 180px solid grey;
}

.writingCarouselWrapper{
	width:95%;
	margin:auto;
}

nav{
	position:fixed;
	z-index:99;
	height:60px;
	padding-top:20px;
	width:100%;
	background-color: rgba(0,0,0,.5);
	text-align:center;
	font-size:25px;
}

nav a{
	text-decoration:none;
	color:white;
	margin-left: 30px;
	line-height: 50px;
}

nav a:hover{
	box-sizing: border-box;
	border:1px solid white;
}

.photobox {
	height:76%;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

.subSection {
	height:60%;
	background-color: white;
	padding:40px;
}


.sectionWrapperHeader{
	font-family:courier new;
	width: 90%;
	font-size:36;
	margin:auto;
	
}
	
.sectionWrapperBox{
	margin:auto;
	font-family:courier new;
	width: 90%;
	height: 80%;
	background-color:white 	;
	border-top:2px solid #d1cccc;
	border-bottom:2px solid #d1cccc;
	padding-top:10px;
	padding-bottom:10px;
	overflow:hidden;
}

@media only screen and (max-width: 600px) {
    .aboutBoxLeft {
        display: none;
    }
}

.aboutBoxLeft{
	float:left;
	width:35%;
	height:100%;
	background-image: url("../images/konradface_alternate_focus_1.jpg");
	background-repeat:no-repeat;
	background-size: auto 100%;
	box-sizing: border-box;	
	border:5px solid #d1cccc;
	}


.aboutBoxRight{
	float:right;
	width: 65%;
	height:100%;
	box-sizing: border-box;
	padding:30px;
	font-size:30px;
	}



.writingBoxLeft{
	float:left;
	width:40%;
	height:100%;
	background-image: url("../images/typewriter_3.jpg");
	background-repeat:no-repeat;
	background-size: auto 100%;
	box-sizing: border-box;
	border:5px solid #d1cccc;
	}


.academicBoxRight{
	float:right;
	width: 30%;
	height:100%;
	background-image: url("../images/whiteboard_1.jpg");
	background-repeat:no-repeat;
	background-size: auto 100%;
	box-sizing: border-box;
	border:5px solid #d1cccc;
	overflow:hidden;
	}

.academicBoxLeft{
	float:left;
	width:70%;
	height:100%;
	background-color:#f4f4f4;
	overflow:hidden;
	}


.writingBoxRight{
	float:right;
	width: 60%;
	height:100%;
	background-color:#f4f4f4;
	}

	
.printout{
	background-color:white;
	margin-top:20%;
	margin:auto;
	height:80%;
	padding:5px;
	width:80%;
	font-size:12px;
	font-style:bold;
	text-align:center;
	box-shadow:5px 5px #cec9c6;
	
}
	
.photoBoxOne{
	background-image: url("../images/olympics_2.jpg");
	height:25%;
}


.photoBoxTwo{
	background-image: url("../images/pen_6.jpg")
	
}

.photoBoxThree{
	background-image: url("../images/forest_1.jpg")
	
}

.workSlide{
    margin:10px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.photoBoxFour{
	background-image: url("../images/library_1.jpg")
	
}


@media only screen and (max-width: 1000px) {
    .aboutBoxLeft {
        display: none;
    }
}

/* Hide face image and expand text area */
@media only screen and (max-width: 1000px) {
    .aboutBoxLeft {
        display: none;
    }
    .aboutBoxRight {
        width: 100%;
        float: none;     /* stop floating so it stacks */
    }
}


/* Short Stories section: hide left image and expand carousel */
@media only screen and (max-width: 1000px) {
    .writingBoxLeft {
        display: none;
    }
    .writingBoxRight {
        width: 100%;
        float: none;  /* stop floating so it takes full width */
    }
}


/* Academic section: hide right image and expand left panel below 1000px */
@media only screen and (max-width: 1000px) {
    .academicBoxRight {
        display: none;
    }
    .academicBoxLeft {
        width: 100%;
        float: none;   /* stack and take full width */
    }
}



/* Keep academic carousel images inside their white cards */
#academicSection .printout {
    overflow: hidden; /* clip any accidental overflow */
}

#academicSection .workSlide {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tighter behavior on narrow screens */
@media (max-width: 1000px) {
    #academicSection .printout {
        height: auto;     /* let the card grow with its content */
        margin-top: 16px; /* smaller top margin than the default 20% */
        padding: 10px;
    }
    #academicSection .workSlide {
        max-height: 50vh; /* prevent super-tall images from spilling */
        object-fit: contain;
    }
}