* {box-sizing: border-box;}

html, body {width:100%;height:100%;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;}
body {
display: flex;
flex-direction: column;
}


.index-head-content-wrapper {
flex: 1 0 auto;
background-image: url('/images/scarlet-homepage.jpg');
background-repeat: no-repeat;
background-size: 100vw auto;
height: calc(100vh - 200px) !important;
}

.head-content-wrapper {
flex: 1 0 auto;
background-image: linear-gradient(to bottom, #cecac8, white);
}

.footer-wrapper {
flex-shrink: 0;  
}

.footer {
height:30px;
text-align: center;
border-top: 1px #3c3c3c dotted;
color:#3c3c3c;
}

.logo {
padding: 10px 0 0 10px;
}

.align-right {
text-align: right;
}

.align-right a {
display:block;
color:#ed1c24;
text-decoration:none;
padding:3px;
font-family: "Archivo Black", sans-serif;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.align-right a:hover {
color:#3c3c3c;
}


.layout {
width: 100vw;
display: flex;
gap: 0px;
flex-wrap: wrap;
}

.header { grid-area: top-half;}
.content { grid-area: bottom-half;}

.index-header-layout {
width: 100vw;
height: 170px;
display: flex;
gap: 20px;
}

.header-layout {
width: 100vw;
height: 170px;
display: flex;
gap: 20px;
background-color:#3c3c3c;
}


.layout2 {
width: 100%;
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.grow1 { flex-grow: 1; }

.marginLeft {
margin-left: auto;
padding: 10px 20px 0px 0px;
font-family: "Archivo Black", sans-serif;
font-style: normal;
color:#ed1c24;
font-size: 1.5em;
}
.index-top-right{
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.name {
margin-top: 40vh;
width: 100vw;
height:100vh;
text-align: center;
font-family: "Lobster", sans-serif;
font-style: normal;
color:#ed1c24;
font-size: 15vw;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.portrait{
margin:-140px 0px 0px 0px;
}
ul {
list-style-type: none;
margin:0;
padding:20px;
width:200px;
}

li a {
display:block;
color:white;
text-decoration:none;
padding:3px;
font-family: "Archivo Black", sans-serif;
font-style: bold;
font-size: 1.3em;
}

.align-right-nav a {
display:block;
color:#ed1c24;
text-decoration:none;
font-family: "Archivo Black", sans-serif;
font-size: 1em;
text-align: right;
}

.align-right-nav a:hover {
display:block;
color:whitesmoke;
text-decoration:none;
font-family: "Archivo Black", sans-serif;
font-size: 1em;
text-align: right;
}

li.index-nav a {
display:block;
color:#ed1c24;
text-decoration:none;
padding:3px;
font-family: "Archivo Black", sans-serif;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
font-size: 2em;
}

li a:hover {
color:#ffdd00;
}

li.index-nav a:hover {
color:#3c3c3c;
}

li.highlight {
display:block;
text-decoration:none;
padding:3px;
font-family: "Archivo Black", sans-serif;
font-style: bold;
font-size: 1.3em;
background-color:#ffdd00;
}

.personal-statement {
width: 100%;
display: flex;
gap: 16px;
align-items: flex-start;
}
.scarlet-potrait {
width:200px;
height:200px;
border-radius: 10px;
margin: 10px 0px 0px 10px;
border: 1px solid #3c3c3c;
padding: 2px;
}
.statement-copy{
color:black;
font-size: 1.2em;
overflow:auto;
font-family:'Prosto One',cursive;font-size:1em;

}

.caption {font-family:'Prosto One',cursive;font-size:0.5em;}

.projects-layout {
width: 100%;
display: flex;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
}

.showcase {
width:350px;
height:auto;
}
.thumbnail-title {
width:350px;
height:auto;
color: #ffdd00;
display: block;
font-family: 'Prosto One',cursive;font-size:0.9em;
background-color:#3c3c3c;
padding: 2px 2px 2px 5px;
margin: 0px;
}

.showcase-item-layout {
width: 100vw;
height: 50px;
display: grid;
grid-template-rows: 100%;
grid-template-columns: repeat(3, 1fr);
gap: 10px 10px;
}

.showcase-thumbnail {
margin-top: 20px;
margin-left: 20px;
width:150px;
}
.showcase-piece {
width: 100%;
border-right: 1px #3c3c3c dotted;
height: calc(100vh - 200px) !important;
padding-right:5px;
}

.showcase-title {
font-family: "Archivo Black", sans-serif;
font-size: 1.2em;
margin-left: 20px;
}
.showcase-cation {
font-family: 'Prosto One',cursive;font-size:0.9em;
margin-left: 20px;
}

a.back {
display:block;
color:white;
text-decoration:none;
padding-left: 10px;
font-family: "Archivo Black", sans-serif;
font-size: 1em;
}
a.back:hover {
color:#ed1c24;
}

.showcase-image {
width:95%;
border: 1px #3c3c3c solid;
border-radius: 10px;
padding: 2px;
}