/* Imports Lato */

.lato-thin {
font-family: "Lato", sans-serif;
font-weight: 100;
font-style: normal;
}

.lato-light {
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: normal;
}

.lato-regular {
font-family: "Lato", sans-serif;
font-weight: 400;
font-style: normal;
}

.lato-bold {
font-family: "Lato", sans-serif;
font-weight: 700;
font-style: normal;
}

.lato-black {
font-family: "Lato", sans-serif;
font-weight: 900;
font-style: normal;
}

.lato-thin-italic {
font-family: "Lato", sans-serif;
font-weight: 100;
font-style: italic;
}

.lato-light-italic {
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: italic;
}

.lato-regular-italic {
font-family: "Lato", sans-serif;
font-weight: 400;
font-style: italic;
}

.lato-bold-italic {
font-family: "Lato", sans-serif;
font-weight: 700;
font-style: italic;
}

.lato-black-italic {
font-family: "Lato", sans-serif;
font-weight: 900;
font-style: italic;
}

/* Sets the background to white and a default color and font for text */

body {
    background-color: #F9F5F1;
    color: black;
    font-family: "Lato", sans-serif;
    font-size: 1.65vw;
}

/* Gets rid of default styling on links */

a {
    color: black;
    text-decoration: none;
}

/* Header section */

/*
Menu
*/

li {
    margin-bottom: 3vh;
}

/* Menu with home, work, etc. */

#menu {
    top: 0;
    padding-top: 3vh;
    padding-bottom: 4vh;
    margin: 0;
    z-index: 9000;
    transition: 0.4s;
    min-height: 10vh;
    max-height: 10vh;
    font-size: 2vw;
}

/* Menu alignment */

.nav_list {
    padding-left: 0;
}

.nav__list,
.nav__link {
    display: flex;
    justify-content: center;
    align-items: end;
    column-gap: 6vw;
    list-style: none;
}

.nav__link {
    flex-direction: column;
    align-items: center;
    row-gap: 0;
    font-weight: 600;
    color: black;
    opacity: 0.7;
}

/* Menu hover animation */

.nav__link:hover {
    opacity: 1.0;
    transition: 0.1s;
    transition-timing-function: ease-in-out;
}

/* Some space at the bottom of the menu and icon sizing */

.nav__icon {
    margin-bottom: 2vh;
    max-width: 60%;
}

/* Animation of fading in */

.fadein {
    -webkit-animation: fadeIn 1.2s both;
    -moz-animation: fadeIn 1.2s both;
    -o-animation: fadeIn 1.2s both;
    animation: fadeIn 1.2s both;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
        -moz-transform: translateY(50px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
        -o-transform: translateY(50px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title */

h1 {
    position: relative;
    text-align: center;
    color: black;
    font-size: 6vw;
    margin-bottom: 5vh;
}

/* Product Description */

#product_description {
    position: relative;
    text-align: center;
    color: black;
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 5vh;
}


/* Organization Logo */

#orglogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;
    width: 6.3vw;
}

/* Mockup */

#mockup {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    width: 45vw;
}

/* Div for left and right margins */

.marginleftright {
    margin: auto 5vw auto 5vw;
}

/* Spacing between sections */

.spacer {
    margin-bottom: 10vh;
}

/* Turns sections into 3D cards */

.cards {
    padding: 5vh 7vw;
    background-color: white;
    border-radius: 30px;
    margin-bottom: 15vh;
}

/* .cards:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow 0.3s ease-in-out;
} */

/* Grid for question, methods, impact */

#qmi {
    display: grid;
    grid-template-columns: 32% auto auto;
    grid-gap: 5vw;
}

/* Style h2 */

h2 {
    font-size: 2.1vw;
    color: rgb(53, 53, 53);
}

/* Style text */

#qmi p, #qmi ul {
    font-weight: 600;
}

/* QMI Icons Style */

#qmi img {
    margin-top: 7vh;
    width: 6vw;
}

/* Smaller text  */

#smaller_text p, #smaller_text li{
    font-size: 1.4vw;
    font-weight: 400;
}

/* Styling the product link */

#productlink > p {
    background-color: #C4ECFF;
    border: none;
    color: black;
    font-weight: bold;
    padding: 32px 16px;
    text-align: center;
    display: block;
    margin-left: 25vw;
    margin-right: 25vw;
    border-radius: 20px;
}

#productlink > p:hover {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow 0.3s ease-in-out;
}

/* Style for quotes/important parts */

h3 {
    text-align: center;
    font-size: 2.7vw;
}

/* Accordions */

.accordion {
    border-radius: 5px;
    border-radius: 10px;
    background: #e2f6ff;
    margin-top: 7vh;
    margin-bottom: 7vh;
}

.accordion_label,
.accordion_content {
    padding: 3vh 2vw;
}

.accordion_label {
    display: block;
    font-weight: 600;
    color: rgb(53, 53, 53);
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}

.accordion_label:hover {
    background: rgba(147, 217, 250, 0.18);
    border-radius: 10px;
}

.accordion_label::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 12px;
    height: 6px;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:black;" /></svg>');
    background-size: contain;
    transition: transform 0.4s;
}

.accordion_content {
    font-size: 1.4vw;
    background: white;
    line-height: 1.6;
    display: none;
}

.accordion_input {
    display: none;
}

.accordion_input:checked~.accordion_content {
    display: block;
}

.accordion_input:checked~.accordion_label::after {
    transform: translateY(-50%) rotate(0.5turn);
}

/* Centering the text under the featured images */

.images {
    text-align: center;
}

/* Style for the featured images */

.images > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40vw;
}

/* Making the End user image smaller */

#target {
    width: 35vw;
}

/* Adding space between consecutive images in ideation */

#ideation > .images > img {
    margin-bottom: 5vh;
}

/* Making the heuristic evaluation screenshot larger */

#he_ut > .images > img {
    width: 60vw;
}

/* Styling the links for my team members */

/* #team_duration > ul > a {
    color: #00a2ed;
} */

/* Key Findings and Design Implications */

.changes {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
    margin-bottom: 15vh;
}

/* Making #he_ut key findings more wide */

#he_ut_kf {
    width: 90vw;
}

/* Making the prototype GIF larger */

#prototype_gif {
    width: 80vw;
}

/* Making the SUS viz larger */

#SUS {
    width: 18vw;
}

/* Making the presentation collage larger */

#challenges > .images > img {
    width: 45vw;
}

#thank_you {
    font-size: 2vw;
    text-align: center;
    line-height: 8vh;
    transition: 0.4s;
}

/* Styling the links for more case studies */

#more {
    margin-top: 10vh;
    margin-bottom: 5vh;
}

#more img {
    width: 30vw;
    opacity: 0.9;
    transition: 0.4s ease-in-out;
}

#more img:hover {
    width: 31.5vw;
    opacity: 1;
}

#more_flex {
    display: flex;
    justify-content: center;
    align-items: end;
    column-gap: 6vw;
    list-style: none;
    text-align: center;
    font-weight: bold;
}

#more p {
    font-size: 2.15vw;
}

#email:hover {
    opacity: 0.6;
}

/* Footer */

#footer {
    background-color: #F9F5F1;
    position: absolute;
    width: 100vw;
    left: 0;
    padding: 4vw;
}

/* Aligning the social media icons with CSS flexbox */

#footflex {
    display: flex;
    justify-content: center;
    align-items: end;
    column-gap: 6vw;
    margin-bottom: 3vh;
    margin-right: 8vw;
}

/* LinkedIn item */

#linkedin {
    width: 4.5vw;
    opacity: 0.65;
    transition: 0.4s;
    border-radius: 6px;
}

#linkedin:hover {
    opacity: 1.0;
}

/* Copyright [Year] Eli Marietta */

#copyright {
    text-align: center;
    margin-right: 8vw;
}

/* Icons attribution */

#attribution {
    text-align: center;
    margin-right: 8vw;
}

#attribution a:hover {
    text-decoration: underline;
}

/* Responsiveness for tablets */

@media screen and (max-width: 999px) {

    body {
        font-size: 4.9vw;
    }

    #menu {
        z-index: 9000;
        padding: 0;
        min-height: 2vh;
        max-height: 2vh;
        font-size: 4.5vw;
        margin-bottom: 12vh;
    }

    .nav__menu {
        padding-left: 0;
        padding-right: 0;
        padding-top: 2vh;
        padding-bottom: 0vh;
        display: grid;
        align-content: center;
    }

    .nav__list {
        justify-content: center;
        column-gap: 6vw;
        padding-left: 0;
    }

    .nav__link {
        opacity: 0.7;
    }

    h1 {
        font-size: 10vw;
        margin-bottom: 2vh;
    }

    #product_description {
        font-size: 6vw;
    }

    .marginleftright {
        margin-left: 1vw;
        margin-right: 1vw;
    }

    /* Organization Logo */

    #orglogo {
        width: 17.2vw;
        margin-bottom: 0;
    }

    #title_qmi_spacer {
        margin-bottom: 8vh;
    }

    #qmi {
        display: block;
    }

    #qmi h2 {
        font-size: 5vw;
    }

    #qmi img {
        width: 15vw;
    }

    #smaller_text p,
    #smaller_text li {
        font-size: 4vw;
    }

    #productlink>p {
        margin-left: 17vw;
        margin-right: 17vw;
    }

    .cards > h2, #duration > h2 {
        font-size: 7vw;
        text-align: center;
        margin-bottom: 7vh;
    }

    .rrgrid {
        display: block;
    }

    h3 {
        font-size: 6vw;
        margin-top: 5vh;
    }

    .accordion_label,
    .accordion_content {
        padding: 3vh 6vw;
    }

    .accordion_content {
        font-size: 4vw;
    }

    .images>img {
        width: 60vw;
    }

    #reflection {
        margin-bottom: 6vh;
    }

    #thank_you {
        font-size: 5vw;
        line-height: 5vh;
    }

    #more h2 {
        font-size: 5vw;
        text-align: center;
    }

    #more img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 60vw;
    }

    #more img:hover {
        width: 60vw;
    }

    #more p {
        font-size: 5vw;
    }

    /* Footer */

    #linkedin {
        width: 9vw;
    }

    #footflex {
        margin-bottom: 0;
    }

    /* Copyright [Year] Eli Marietta */

    #copyright {
        margin-bottom: 6vh;
    }

    #copyright>h2 {
        font-size: 5.5vw;
    }
}

/* Responsiveness for landscape on tablets and phones */

@media screen and (max-width: 999px) and (orientation:landscape) {

    #menu {
        min-height: 10vh;
        max-height: 10vh;
        margin-bottom: 30vh;
    }
}