/*Copyright Jonathan de Laine 2021*/

/*CSS is used to control styling of text and sections marked up in HTML*/
/*Call out the class or ID used in HTML using '.' icons or modify segments like body*/

.navbar { 
    /* Annoyingly, this header inherits "body" properties (width) despite being outside the body in HTML */
    /* Plausible fix: set max-width in "allpanels" instead of container(body)*/
    /* Fix worked perfectly!*/
    position: sticky;
    top: 0;
    z-index: 1; /*Brings navbar to front*/
    padding-top: 0;
    /* padding: 25px 5% 5% 25px; */
    box-shadow: 0px 3px 8px -3px gray;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 60px;
    margin: -10px 0 0 0;
    font-family: Helvetica;
    color: #aaa;
}
.logo {
    position: relative;
    padding: 0 5%;
    margin: 0;
    /* border: 2px solid green; */
}
.nav-container {
    /* border: 2px solid blue; */
    text-align: right;
    width: 50%;
}
.nav-container a {
    padding: 0 20px;
}
.nav-icons {
    padding: 0 5%;
    /* border: 2px solid red; */
}

.site-container {
    margin: 0; /*removed annoying space bug */
    padding: 0;
    float: none;
    background-color: aliceblue;
}
* {
    box-sizing: border-box;
}

a {
  text-decoration: none;  
  color: #aaa;
}
a:visited {
    text-decoration: none;
    color: #aaa;
}
a:hover {
    text-decoration: none;
    color: #FDB515;
    cursor: pointer;
}
.aboutmecontainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px 0 0 0;
    width: 100%;
    /* padding-top: 35px; */
    /* box-shadow: 0px 3px 8px -3px #787FF6; */
    background: radial-gradient(
        circle at top left,
    #75BdE0,
    #3B7097
    );
}
.aboutme {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-width: 1200px;
    margin: 0;
    padding: 2% 0 4% 0;
    margin-left: auto;
    margin-right: auto;
    /* border: 2px solid red; */
    
}
.aboutmetext {
    display: block;
    position: relative;
    width: 60%;
    /* border: 2px solid orange; */
    
    font-family: helvetica;
    color: white;
}
.aboutmetext p {
    color: white;
}
.aboutmetext h2 {
    display: block;
    font-family: helvetica;
    text-align: center
}
.aboutmetext h3 {
    display: block;
    font-family: helvetica;
    text-align: center
}
.aboutmetext span {
    color: #FDB515;
    padding-left: 5px;
}
.aboutmeimg {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 40%;
    height: auto;
    min-height: 30%;
    /* border: 2px solid navy; */
    background-image: url("images/Graduation.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.thumbimg {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
}
.specialtablerow {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    /* border: 2px solid magenta; */
}
.specialimgcontainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 75px;
    height: 75px;
}
.thumbimgEx {
    display: block;
    padding: 0;
    width: 100%;
    height: 100%;
}
.specialimgcontainer:hover {
    display: block;
    position: relative;
    width: 100%;
    height: 40vh;
    object-fit: fill;
    z-index: 999;
}
.specialtextcontainer {
    display: block;
    position: relative;
    width: calc(100% - 75px);
    height: auto;
}
.hiremecontainer {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    justify-content: center;
    padding: 35px 0 20px 0;
    /* border: 2px solid orange; */
}
.hiremecontainer p {
    display: block;
    position: relative;
    margin-right: 20px;
    font-size: 11pt;
    font-family: helvetica;
    color: white;
}
.hireme {
    display: block;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    font-family: helvetica;
    font-size: 15pt;
    padding: 15px 45px 15px 45px;
    cursor: pointer;
}
.hireme:hover {
    color: #FDB515;
    border: 1px solid #FDB515;
}

.hireme:visited {
    color: white;
    border: 1px solid white;
    text-decoration: none;
}

.contactinfo { /*Use JS to change to Flex on click */
    display: none;
    overflow: auto;
    flex-wrap: flex;
    position: relative;
    width:100%;
    /* border: 2px solid cadetblue; */
}
.censor {
    display: flex;
    flex-wrap: wrap;
    background: none;
    color: white;
    border: none;
    font-family: helvetica;
    width: 30%;
    white-space: nowrap;
    margin: 20px 20px 0px 20px;
    /* border: 2px solid green; */
}
.censor:hover .default{
    display: none;
}
.censor:hover .hiddenemail:before{
    content: "delaine.jon@gmail.com";
}
.censor:hover .hiddenalt:before{
    content: "caljono@berkeley.edu";
}
.censor:hover .hiddenphone:before{
    content: "(479) 871-9626";
}

.skillspanel {
    display: block;
    position: relative;
    width: 100%;
    background: white;
    margin: 0;
    padding: 0;
    /* border: 2px solid purple; */
}
.skillspanelinner {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    /* border: 2px solid orange; */
    padding: 55px 0 30px 0;
}
.skillitem {
    display: block;
    position: relative;
    filter: grayscale(100%);
    /* border: 2px solid red; */
    margin: 15px 30px 15px 30px;
}

.aboutwebsite {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 25px 0 0 0;
    max-width: 1200px;
    background-color: white;
    align-items: center;
    justify-content: center;
    /* border: 2px solid blueviolet; */
    font-family: helvetica;
    
}
.webthumb {
    display: block;
    position: relative;
    width: 35%;
    margin: 0;
    padding: 0;
}
.webexplanation {
    display: block;
    position: relative;
    width: 60%;
    margin: 0;
    padding: 0 0 0 5%;
}
.imagepanels {
    display: block;
    position: relative;
    width: 30%;
    margin: 0;
    padding: 0;
}
.allpanels {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   margin-top: 0;
   max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
   /* border: 2px solid yellow; */
   background-color: white;
}
.headerlinebreak {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    /* border: 2px solid green; */
    background-color: white;
    align-items: center;
    margin: 25px 0 0 0;
    padding: 25px 0 0 0;
}
.allpanels h2 {
    display: block;
    width: 10%;
    font-family: helvetica;
    /* border: 2px solid yellow; */
    margin-left: 25px;
    margin-right: 25px;
}
.allpanels p {
    display: block;
    width: 70%;
    font-family: helvetica;
    text-align: center;
    font-size: 10pt;
    /* border: 2px solid maroon; */
    text-align: left;
    margin: 0 0 0 15px;
}
.panel {
    cursor: pointer;
    position: relative;
    padding: 0;
    border: none;
    max-width: 45%;
    background-color: white;
    /* border: 2px solid blue; */
    margin-left: auto;
    margin-right: auto;
}
.panel-img {
    display: block;
    width: calc(50% - 0.5px);
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}
.panel-overlay-text {
    display: none;
    opacity: 0;
    transition: 0.2s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 1;

    text-align: center;
    font-family: ktcg;
    font-size: 20px;
    color: white;

    /* border: 2px solid red; */
}
.panel-content {
    display: none; /*Use JS to change to display: block*/
    overflow: auto;
    /* padding: 0px 15px;   */
    font-family: sans-serif;
    background: white;
    width: 100%;
}
.banner {
    display: flex;
    color: white;
    padding: 10px 0 0 0;
    margin: 25px 0 0 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    /* border: 2px solid purple; */
    background: radial-gradient(
        circle at top right,
    #75BdE0,
    #3B7097
    );

}
.banner-thumbnail-container {
    padding: 25px;
}
.banner-thumbnail {
    position: relative;
    /* border-radius: 75%; */
    object-fit: cover;
    width: 300px;
    height: 300px;
    border: 2px solid white;
}
.banner-titledesc {
    position: relative;
    text-align: right;
    width: 50%;
    padding: 0 0 0 20%;
    font-family: helvetica;
    /* border: 2px solid orange; */
}
.panel-content p {
    display: block;
    padding: 25px 15px;
}
.panel-content h2 {
    display: block;
    padding: 25px 15px 0px 15px;
}
.summary {
    display: block;
    border: 2px solid yellow;
}
.Challenge {
    display: block;
    /* border: 2px solid red; */
}
.ChallengeContainer {
    display: flex;
    flex-wrap: wrap;
    /* border: 2px solid midnightblue; */
}
.ChallDescription {
    display: block;
    /* border: 2px solid pink; */
}
.ChallDescription h2 {
    display: block;
    width: 30%;
    
}
.ChallDescription p {
    display: block;
    width: 65%;
}
.challimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 560px;
    height: 315px;
}
.ControllerContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.SchemeIMG {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid orange;
}
.ChallResults {
    display: block;

}
.ChallResults img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.electromechanical {
    display: block;
    border: 2px solid black;
}
.electromechanical-container {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid green;
}
.electromechanical-tools {
    text-decoration: none;
    width: 50%;
    border: 2px solid blue;
}
.electromechanical-text {
    width: 50%;
    padding: 0;
    border: 2px solid red;
}
.assembly {
    display: block;
    width: 100%;
}
.ExImagesContainer{
    display: flex;
    justify-content: center;
}
.ExImage {
    display: block;
    position: relative;
    width: 30%;
    height: auto;
}
.ProjectImages {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid purple;
}
.ProjectImages h2 {
    display: block;
    width: 100%;
}
.ProjectImgPanel {
    display: block;
    width: 40%;
    height: 40vh;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    /* border: 2px solid black; */
}
.software {
    display: block;
}
.software-container {
    display: flex;
    flex-wrap: wrap;
}
.software ul {
    /* display: block; */
    text-decoration: none;
    width: 25%;
    border: 2px solid blue;
}
.software-text {
    width: 75%;
    /* display: block; */
    border: 2px solid red;
}
.software-images {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid orange;
}
.ImageDisp {
    display: block;
    width: calc(35% - 0.5px);
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 2px solid black;
}
.ImageDesc {
    width: 65%;
    text-align: center;
    padding: 175px 0px 0px 0px;
    border: 2px solid olive;
}
.footnote {
    display: block;
    width: 100%;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 10pt;
    font-family: Helvetica;
}
.media {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 25px;
}

.Design {
    display: Flex;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 2px solid green;
}
.DesignPanel {
    display: block;
    position: relative;
    width: 25%;
    margin: 0;
    padding: 0;
    border: 2px solid yellow;
}
.PanelExplanation {
    display: block;
    position: relative;
    width: 50%;
    margin: 0;
    padding: 0;
    border: 2px solid brown;
}
.DesignPanelExtended {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 2px solid purple;
}
.TestingandResults{
    display: Flex;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 2px solid black;
}
.TestImg {
    display: block;
    object-fit: fill;
    width: 30%;
    height: 40vh;
    margin: 0;
    padding: 0;
}
.TestResults {
    display: block;
    width: 50vw;
    margin: 0;
    padding: 0;
    border: 2px solid maroon;
}
.TestResults p {
    margin: 0;
    padding: 5%;
}
.MedalDisplay {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 2px solid skyblue;
}
.casedesign {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid sandybrown;
}
.designblip {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

.designblip p {
    display: block;
    position: relative;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.casedesignimg {
    display: block;
    position: relative;
    width: 45%;
    height: 30vh;
    margin: 0;
    padding: 0;
}
.casedesignimgSBS {
    display: block;
    position: relative;
    width: 45%;
    height: 30vh;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}
.casedesigntext {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 50%;
    border: 2px solid mediumorchid;
}
.casedesigntextlarge {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 2px solid mediumorchid;
}
.casedesigntext h3 {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}
.filldiv {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.subtitle {
    display: block;
    position: relative;
    width: 100%;
}

.collapse {
    display: block;
    position: relative;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
}
.panel-overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #000;
    width: 100%;
    height: 100%;
}

/*Javascript*/
.panel-content-active + .panel-content { 
    display: block;
}
.contactinfo-active + .contactinfo {
    display: flex;
}
.panel:hover .panel-overlay-text {
    display: block;
}
.panel:hover .panel-img {
    opacity: 0.75;
}
.panel:hover .panel-overlay{
    display: block;
    opacity: 0.35;
}



footer {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 60px;
    padding-bottom: 60px;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    /*border: 2px solid blue;*/
    clear: both;
}
.footer-nav {text-align: center;}
.footer-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.footer-nav li {
    display: inline-block;
    padding: 0 5px 20px 5px;
}
.footer-text{
    display: block;
    font-family: Helvetica;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-transform: none;
    width: 100%;
    color: #ddd;
}