/* BASIC STYLING */
html {
    /* NOTE smooth scroll not supported on Safari */
    scroll-behavior: smooth;
    font-size: 16px;
}

.fontstyleMain { 
    font-family: "urbanist", sans-serif;
}

.smlFontSize { 
    font-size: 0.95rem;
}

h1 { 
    font-size: 2.5rem;
    color: black;
}

h2 { 
    text-align: center;
    font-size: 3.5rem;
    margin: 0;
    margin-top: 2.75rem;
}

h3 { 
    color: #9987BD;
    font-size: 1.1rem;
    margin: 0.75rem;
    text-align: center;
}

h4 { 
    font-size: 2.5rem;
    margin-bottom: 2rem;
    margin-top: 6.5rem;
}

h5 {
    color: #9987BD;
    font-size: 1.1rem;
    margin-top: 2.5rem;
    margin-bottom: 0;
}

p {
    font-size: 1.1rem;
}

a { 
    text-decoration: none;
    color: #9987BD;
    /* CODE FROM https://www.dotnettricks.com/learn/stylesheet/css-to-force-long-text-and-urls-to-wrap-on-all-browser#:~:text=Sometimes%20we%20need%20to%20wrap%20a%20long%20text,line%20by%20defining%20css%20word-wrap%20property%20to%20break-word. */
    word-wrap: break-word;
}

a:hover, a:focus { 
    text-decoration: underline;
}

figure { 
    margin: 4.5rem 0;
}

figcaption { 
    padding: 0.5rem 0.3rem;
    font-size: 0.95rem;
    margin: 0 auto;
    text-align: center;
    max-width: 40rem;
}

li {
    font-size: 1.1rem;
    padding: 1rem;
}

.btn { 
    display: block;
    background-color: #9987BD;
    color: white;
    border: #9987BD solid 0.08rem;
    text-align: center;
    /* CODE FROM https://developer.mozilla.org/en-US/docs/Web/CSS/max-content */
    max-width: max-content;
    min-width: 20%;
    padding: 0.8rem;
    margin: 3rem auto;
}

.btn:hover, .btn:focus { 
    transition-duration: 0.5s;
    border: black solid 0.08rem;
    transform: scale(1.01, 1.01);
    text-decoration: none;
}

.quote {
    color: #a1964c;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 4rem auto;
    max-width: 30rem;
    text-align: center;
}

/* (future styling for input boxes) */
.inputField { 
    outline: 0;
    border: 0.1rem solid #9987BD;
    background-color: whitesmoke;
    height: 2rem;
    width: 100%;
    min-width: 6rem;
    max-width: 15rem;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    display: block;
}

.primaryColour {
    color: #9987BD;
}

.secondaryColour {
    color: #a1964c;
}

.lightBg { 
    background-color: #e7e7e7;
}

.darkBg { 
    background-color: #212121;
    color: white;
}

.textSpacer { 
    margin: 7rem;
}
/* END OF BASIC STYLING */

/* CONTAINERS */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    max-width: 72rem;
    margin: 0 auto;
}

.containerItem {
    flex: 1;
    min-width: 15rem;
    max-width: 26rem;
    margin: 2.75rem 2rem;
}

.indexContainerItem {
    flex: 1 30%;
    margin: 0.7rem 0.85rem;
    /* Important for maintaining size of item to fit indexProjectText */
    min-width: 18rem;
    max-width: 38rem;
    /* Allows for img zoom on hover */
    overflow: hidden;
}

/* Ensure that all items remain same size, despite some images being able to scale larger */
@media screen and (max-width: 65rem) {
    .indexContainerItem { height: 20rem; }
    }
@media screen and (min-width: 65rem) {
    .indexContainerItem { height: 24rem; }
    }

/* CODE FROM https://css-tricks.com/almanac/selectors/f/focus-within/ */
.indexContainerItem:focus-within {
    /* Ensure focus is applied despite overflow:hidden */
    outline: solid 1.5px black;
}

.singleColumnContainer {
    display: block;
    max-width: 57rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.headContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* % helps spacing scale when window shrinks */
    padding: 1rem 5%;
    justify-content: flex-end;
    text-align: end;
    font-size: 1.1rem;
}

.spacedContainer {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    /* NOTE % helps spacing scale when window shrinks */
    padding: 2rem 5%;
    justify-content: space-between;
    text-align: right;
    font-size: 1.1rem;
}

.rightItem {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: end;
}

/* Stack text if screen width is too small */
@media screen and (max-width: 30rem) {
    .rightItem {
        width: 10rem;
    }
}
/* END OF CONTAINERS */

/* HEADER & FOOTER */
.navLink {
    display: inline-block;
    color: black;
    /* padding: 0.5rem 1rem; */
    margin: 0.25rem 0.75rem;
    padding: 0.25rem;
    /* font-weight:300; */
}

.navLink:hover, .navLink:focus {
    text-decoration: none;
    color: #9987BD;
    transition-duration: 0.15s;
}

.currentPage {
    border-bottom: solid #e7e7e7 0.1rem;
}

.brandName {
    font-weight: bold;
    color: black;
    border: none;
}

.brandNameAccent {
    color: #9987BD;
    font-weight: lighter;
}

.brandName:hover, .brandName:focus {
    text-shadow: none;
    text-decoration: none;
    color: black;
}

.socialsIconLink {
    /* Separated to ensure padding isnt clickable */
    padding: 0 0.75rem;
}

.socialsIcon {
    /* 21px (1.3135 in rem) is MINIMUM defined by LinkedIn */
    width: 1.4rem;
    opacity: 70%;
}

.linkedIn {
    width: 1.65rem;
}

.socialsIcon:hover, .socialsIcon:focus {
    transition: all 0.15s;
    opacity: 100%;
}
/* END OF HEADER & FOOTER */

/* INDEX */
.landing {
    height: 100vh;
    min-height: 35rem;
}

.arrow {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 1.5rem;
    object-fit: contain;
    opacity: 80%;
    /* Add white base to separate arrow from background objects*/
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.arrow:hover, .arrow:focus {
    transition: all 0.15s;
    opacity: 40%;
}

.landingBox {
    background-color: #e7e7e7;
    z-index: -1;
    position: absolute;
    margin: 0 2%;
    width: 5%;
    min-width: 0.9rem;
    height: 50%;
}

/* hides arrow if theres not enough vertical window space */
@media screen and (max-height: 35rem) {
    .arrow {
        visibility: hidden;
    }
}

.landingText {
    text-align: left;
    padding: 2rem 5%;
    max-width: 75%;
}

@media screen and (max-width: 45rem) {
    .landingText { 
        margin: 0;
        max-width: 80%; 
        font-size: 3rem;
    }
    .landing {
        min-height: 41rem;
    }
}

@media screen and (min-width: 85rem) {
    .landingText { 
        font-size: 5rem;
        padding: 2rem 10%;
    }
    .landingBox {
        margin: 0 7%;
    }
    .arrow {
        width: 2rem;
    }
}

.noWrap {
    white-space: nowrap;
}

.newLine {
    display: block;
}

.text1 {
    animation: colourAnimate2 1s normal ease-in;
}

.text2 {
    animation: colourAnimate1 1.3s normal ease-in;
}

.text3 {
    animation: colourAnimate2 2s normal ease-in;
}

.text4 {
    animation: colourAnimate3 2.5s normal ease-in;
}
  
@keyframes colourAnimate1 {
    0% { color: rgba(255, 255, 255, 0); }
    100% { color: #9987BD; }
}
@keyframes colourAnimate2 {
    0% { color: rgba(255, 255, 255, 0); }
    100% { color: black; }
}
@keyframes colourAnimate3 {
    0% { color: rgba(255, 255, 255, 0); }
    100% { color: #a1964c; }
}

.indexContainerSpace {
    padding: 4rem 2rem;
}

.itemEmphasis {
    flex: 1 40%;
}

.indexProjectImg {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.8s ease;
}

.indexProjectImg:hover, .indexProjectImg:focus {
    transition: all 0.8s;
    /* CODE FROM https://www.geeksforgeeks.org/how-to-darken-an-image-using-css/ */
    filter: brightness(70%);
    transform: scale(1.1);
}

.indexProjectText {
    position: absolute;
    margin-top: -3rem;
    margin-left: 1rem;
    padding: 0.2rem 0.3rem;
}

.indexTextBg {
    background-color: rgba(225, 225, 225, 0.9);
}

.indexTextBgDark {
    background-color: #212121;
}
/* END OF INDEX */

/* ABOUT */
.aboutImgItem {
    min-width: 13rem;
    max-width: 13rem;
    margin: 0;
    margin-top: 2.25rem;
}
/* END OF ABOUT */

/* PROJECT ANALYSIS */
.projectLeadImg {
    width: 100%;
    max-height: 15rem;
    margin-top: 1.25rem;
    object-fit: cover;
}

.projectContainerItem {
    flex: 1;
    min-width: 10rem;
    max-width: 28rem;
}

.overview {
    margin: 2rem;
}

.projectImg {
    width: 100%;
    max-height: 27rem;
    object-fit: cover;
}

.imgSml {
    max-height: 15rem;
}

.imgLrg {
    max-height: 100%;
}

.imgContain {
    object-fit: contain;
}

.imgBorder {
    border: solid white 0.5rem;
}

iframe {
    width: 100%;
    height: 20rem;
    border: none;
}

.imgDisplayLeft {
    margin-left: -3rem;
    max-height: 18rem;
    margin-bottom: 2rem;
}
.imgDisplayRight {
    margin-left: 3rem;
    max-height: 18rem;
}

.captionSide {
    margin-top: 5rem;
    max-width: 20rem;
}

.figureClose {
    margin: 0.75rem 0;
}
/* END OF PROJECT ANALYSIS */