@font-face {
    font-family: HelveticaNeueLT;
    src: url('/HelveticaNeueLT.ttf');
  }
@font-face {
    font-family: HelveticaNeueLT33;
    src: url('/HelveticaNeueLT33.ttf');
  }
  @font-face {
    font-family: HelveticaNeueLT35;
    src: url('/HelveticaNeueLT35.ttf');
  }

html, body {margin: 0; height: 100%; overflow-x: hidden}

#homepage {
    background-color: #e62ff9;
   font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
    width: 100vw;
}

h1 {
    text-align: left;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';

}
dt {
    text-align: center;
   
  }


.home {
    display: flex;
    background-color:#e62ff9;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
    text-align: center;
    justify-content: center;
    align-content: center;
    height: 115vh;
}

#lowerHome {
    background-color: #3b90d7;
    justify-items: center;
    align-items: center;
}

#lowestHome {
    display: flex;
    flex-direction: column;
    background-color: #04c382;
    justify-items: center;
    text-align: center;
}

#mainpic {
    width: 40%;
    height: 75%;
    margin-top: 5%;
    justify-content: center;
    background-color: transparent;
}

#mainpic img {
    width: 321px;
    height: 400px;

    box-shadow: 10px 10px 5px rgb(48, 48, 48);;
}

#greeting {
    display: flex;
    flex-direction: column;
    margin-left: -5%;
    width: 55%;
    color: rgb(255, 255, 255);
    font-size: 30px;
    margin-top: 20%;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
    font-weight: 700;
}

#greeting b {
    font-size: 45px;
    font-weight: 700;
    font-family: 'HelveticaThin';
}
#greetinglowest {
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    width: 35%;
    color: rgb(255, 255, 255);
    font-size: 30px;
    margin-left: 32.5%;
}

#greetinglowest b {
    font-size: 45px;
}

.textbox {
    width: 45%;
    height: 25%;
    bottom: 0;
    margin-left: 27.5%;
}

#icon_pics img {
    width: 100%;
    height: 65px;
}

.divider {
    display: flex;
    flex-direction: row;
    width: 106%;
    height: 115vh;
    padding: 0px;
    margin-left: -4%;
}

.left {
    background-color: #ef1847;
    height: 100%;
    width: 100%;
    margin-left: -6%;
    text-align: center;
    align-content: center;
    justify-content: center;
    display: flex;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT','helvetica-w02-light','HelveticaThin','sans-serif'; 
}
.left h3{
   
    font-size: 35px;
    color: #ffffff; 
    width: 45%;
    font-weight: 700;
    font-family: 'HelveticaThin';
}

.right {
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
    margin-right: -3%;
    justify-content: center;
    align-content: center;
    display: flex;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
}

.topRightImg{
    height: 50%;
    
}

#educationlist {
    align-items: left;
    flex-direction: column;
    margin-left: 3%;
}

#awardslist {
    align-items: left;
    flex-direction: column;
    margin-right: 6%;
}

.lowerLeft {
    background-color: #ffe0e3;
    height: 102%;
    width: 100%;
    margin-left: -6%;
    margin-top: -0.5%;
    display: flex;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';

}

.lowerRight {
   background-color: #fd8b80;
   height: 102%;
   width: 100%;
   margin-right: -3%;
   margin-top: -0.5%;
   display: flex;
   font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT','helvetica-w02-light','HelveticaThin','sans-serif'; 

}

.university {
    display: flex;
}

#ncclogo, #novalogo, #montpellierlogo, #msulogo {
    height: 100%;
    width: 20%;
}

.uniBio {
    display: flex;
    flex-direction: column;
    max-width: 65%;
    flex-wrap: wrap;
}

#educationlisttitle {
    font-size: 30px;
}

#awardslisttitle {
    font-size: 30px;
}

#ncclogo:hover, #novalogo:hover, #montpellierlogo:hover, #msulogo:hover {
    height: 102%;
    width: 22%;
    transition: height 750ms ease-out, width 750ms ease-out;
}



/* research page stylings */
#researchpage {
    background-color: #db9fc6;
    background-image: url('./maysonwebsitebackground.png');
}

#navbar a {
    display: flex;
    font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
    font-size: 25px;
    font-weight: 700 !important;
    color: #3b3831;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    text-justify: center;
 
    transform-origin: left bottom;
    transform: rotate(90deg);
    transition: color 0.15s ease;
    }

    #navbar a:hover,
    #navbar a:focus,
    #navbar a:active
    {
        color: #fefeff;
    }

    #navbarLinksContainer {
    display: flex;
    flex-direction: column;
    margin-top: -100%;
    bottom: 0%;
    height: 100%;
    justify-content: space-evenly;
    align-content: center;
    }

    #navbar {
        width: 5%;
        height: 100vh;
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        right: 0;
        left: 95%;
        top: 0;
        background-color: #fede7b;
    }

    .linkBackToPortfolio {
        position: fixed;
        top: 7%;
        left: 5%;
        height: 5vh;
        width: 28vw;
        text-decoration: none;
        background-color: transparent;
        font-size: 27px;
        color: #3b3831;
        font-weight: 700;
        font-family: 'HelveticaThin';
        transition: color 0.15s ease;
    }
    .linkBackToPortfolio:hover,
    .linkBackToPortfolio:focus,
    .linkBackToPortfolio:active  {
        color: #fefeff;
    }

    .research {
        display: none;
        flex-direction: column;
        background-color: #fede7b;
    }

    .research:hover,
    .research:focus,
    .research:active {
        background-color: 0px 0px #fee8a8;
    }

    .project {
        display: flex;
        flex-direction: column;
        max-width: 75%;  
        font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
        text-align: left;
        flex-wrap: wrap;
        margin: 50px 40px 50px 50px;
    }

    .research b {
        font-size: 22px;
    }

    .research i {
        font-size: 20px;
    }

    #researchlisttitle {
        font-family: 'HelveticaNeueLT35', 'HelveticaNeueLT33', 'HelveticaNeueLT', 'HelveticaNeue', 'sans-serif';
        font-size: 25px;

    }

    /* Slideshow container */
    .slideshow-container {
    max-width: 75%;
    position: relative;

    }

    /* Next & previous buttons */
    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
    right: 0;
    border-radius: 3px 0 0 3px;
    }

    .prev {
        right: 95.5%;    
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
    background-color: rgba(79, 79, 79, 0.8);
    }

    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
    color: #000000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }

    /* The dots/bullets/indicators */
    .dotRow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 10%;
        margin-top: -2%;
        margin-left: 40%;
    }
    .dot {
        cursor: pointer;
        height: 10px;
        width: 10px;
        position: sticky;
        
        background-color: #3b3831;
        border-radius: 50%;

        transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
    background-color: #fefeff;
    }

    /* Fading animation */
    .fade {
    animation-name: fade;
    animation-duration: 1.5s;
    }

    @keyframes fade {
    from {opacity: .2}
    to {opacity: 1}
    }