bundle.css

:root{
    --headFont: "DM Sans", sans-serif;
    --everythingFont: 'Open Sans', sans-serif;
    --goldColor: #FFCD00;
}



/** Basic styling */
html{width: 100%;
    height: 100%;
    box-sizing: border-box;}

@media (max-width: 720px) {
    #body {
        width: 103%;
    }
}
body{
    overflow-x: hidden;
    margin:0;
    font-family: var(--everythingFont);
    line-height: 1.5;
    color:#111;
}
#body {

    width:80%;

    max-width: 1740px;

}


#body:not(.footer) {
    margin:auto;
}
#body:not(.dropdown) {
    margin:auto;
}

/*STRIKETHROUGH text in <s> */
s {text-decoration:line-through; text-decoration-thickness:2px;}

/*.trapezoid !*MAKE SET SIZE FOR SMALLER SCREENS*!*/
/*{   z-index: -1;*/
/*    position: absolute;*/
/*    right: 0px;*/
/*    top: 0px;*/
/*    opacity: 0.5;*/
/*    border-bottom: 50em solid #ffeeb3 ;!*SHAPE HEIGHT*!*/
/*    border-left: 450px solid transparent;*/
/*    border-right: 0px solid transparent;*/
/*    height: 0;*/
/*    width: 40vw;*/
/*    transition: height 0.5s;*/
/*}*/


#Erieimg, #YellowTrap {
    z-index: -100;
    position: absolute;
    right: 0px;
    top: 0px;
    background-repeat: no-repeat;
    background-position-x: right;
    height: 52em;
}
@media (min-width: 1880px){
    #Erieimg, #YellowTrap {
        padding-right: 20vw;
    }
}
@media (min-width: 1880px){
    #Erieimg {
        opacity: 1;
    }
}

/*  ********************************TRAPEZOID SCALING DONT TOUCH*** */

@media (min-width: 1334px){
    #Erieimg, #YellowTrap {
        height: 55em;
    }
}
@media (max-width: 1334px){
    #Erieimg{
        opacity: 1;
    }
}
/********************************/
@media (max-width: 1090px){
    #Erieimg, #YellowTrap {
        height: 60em;
    }
}
@media (max-width: 1090px){
    #Erieimg {
        opacity: 0.8;
    }
}
/********************************/
@media (max-width: 805px){
    #Erieimg, #YellowTrap {
        height: 55em;
    }
}
@media (max-width: 805px){
    #Erieimg {
        opacity: 0.6;
    }
}
/*****************************/
@media (max-width: 650px){
    #Erieimg, #YellowTrap {
        height: 38em;
    }
}
@media (max-width: 650px){
    #Erieimg {
        opacity: 0;
    }
}
/*****************************/
@media (max-width: 545px){
    #Erieimg, #YellowTrap {
        height: 45em;
    }
}
@media (max-width: 420px){
    #Erieimg, #YellowTrap {
        height: 50em;
    }
}

@media (max-width: 344px){
    #Erieimg, #YellowTrap {
        height: 55em;
    }
}
/*  ************************************END TRAPEZOID SCALING   */


/** *********************************Footer **/
footer {
    position: absolute;
    left: 0vw;
    font-size:1em;
    background-color: #ffeeb3;
    width: 100vw;
}
footer #content {
    padding-left: 3vw;
}
.footer-info{
    padding-top: 20px;
}
.footer-info p{
    margin: 5px;
}
ul.social-media-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;

}
.social-media-list img {
    min-width: 30px;
    max-width: 40px;
    width:3vw;
    padding: 0 10px
}
/** *********************************END Footer **/

/* *******************************Header and navbar styling */
/** Links */
a { color: #2a7ae2; }
a:visited { color: #1756a9; }

/**/

header {
    padding: 0vh 5vw 0vh 5vw;
    position: static;
    z-index: 1;
    display:flex;
    margin: 0 auto;
    max-width: 1000px;
}

header#main-header{
    margin-bottom: 4em;
    opacity: revert;
}

header#othertop {
    min-height: 150px;
    height: 20vh;
    width: 100%;
    padding:0;

}

@media (min-height: 970px), (max-width: 1580px) {
    header#othertop {
        height: 15vh;
    }
}
@media (min-height: 1300px) {
    header#othertop {
        height: 10vh;
    }
}
@media (min-height: 1700px) {
    header#othertop {
        height: 5vh;
    }
}
@media(max-width: 408px) {
    header#othertop {
        height: revert;
    }
}
nav {
    padding: 0vh 5vw 0vh 5vw;
    margin: 75px auto 50px auto;
    position: relative;
    display:flex;
    flex-direction: row;
    width: fit-content;

    /*position: sticky;
    top: 0;*/
}

@media (max-width: 1246px){
    nav{
        margin: 75px 0 50px 0;
    }

}
.dropbtn {
    background-color: #ffeeb3;
    color: black;
    padding: 16px;
    font-size: 2em;
    border: none;
    cursor: pointer;
    width: 100vw;
}

/*.dropbtn:hover {*/
/*    background-color: rgb(255, 255, 255);*/
/*}*/
/*.dropbtn:active, :visited {*/
/*    background-color: rgb(255, 238, 170);*/
/*}*/

.dropdown {
    padding: 0vh;
    margin: 0px 0 50px 0;
    width: 100vw;
    position: relative;
    display: none;

}
.dropdown img {max-width: 20px;
padding-left: 10px;}

@media (max-width: 999px){
    .dropdown{
        display: inline-block;
    }
    nav {
        display: none;
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(255, 255, 255, 0.95);
    width: 100vw;
    overflow: auto;
    box-shadow: 0px 8px 56px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin: 0;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 1.2em;

}

/***** DELETE .link WHEN ALL NAV LINKS WORK *****/
.link { color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 1.2em;
}
.dropdown a:hover {background-color: #ffeeb3;}

.show {display: block;}

nav ul {
    list-style-type: none;
    padding-left: 0vw;

}
#myDropdown {
    list-style-type: none;
    padding-left: 0vw;
    margin:auto;
    background-color: #ffeeb3;
}
nav ul li {
    font-size: 1.2em;
    display:inline;
    padding: 0 1.5em 0 .5em;
}
div.logo-nav {
    display:flex;
    flex-direction:column;
    height: fit-content;
    width: 100%;
}


#intro {
    /*padding: 0 25% 0 108px;*/
    padding: 0 20vw 1vh 0vw;
    font-size: 1.2em;
    margin: 1vw 0 1vw 0;
    /*max-height:495px;*/
}
@media screen and (min-width: 1441px){
    #intro {
        padding: 0 10vw 1vh 0vw;
    }
}
@media screen and (min-width: 2441px){
    #intro {
        padding: 0 0vw 1vh 0vw;
    }
}
@media screen and (max-width: 875px){
    #intro {
        padding: 0 10vw 1vh 0vw;
    }
}
@media screen and (max-width: 805px){
    #intro {
        padding: 0 0vw 1vh 0vw;
    }
}
@media (max-width: 650px) {
    #intro{
        font-size: .8em;
    }
}
/* *******************************END Header and navbar styling */

/* ********************************main page content */
main {
    margin: 0 auto;
    padding: 5vh 5vw 5vh 5vw;
    font-size: 1.2em;
    max-width: 1000px;
}
main ul li {
    margin-bottom: 10px;
}
@media (max-width: 650px) {
    main, footer{
        padding: 5vh 0vw 5vh 0vw;
        font-size: .8em;
    }
    main ul {
        padding-left: 20px;
    }

}

section#title {
    display: flex;
    flex-direction: row;
}
@media (max-width: 650px){
    section#title{
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 650px){
    section#title, section#other-title p{
        text-align: center;
    }
}


section#other-title {
    background-color:#ffeeb3;
    padding-left: 40px;
    display: flex;
    flex-direction: row;
}
@media (max-width: 650px){
    section#other-title{
        flex-direction: column;
        align-items: center;
        padding-left: 0px;
    }
}
/**/
figure.logo {
    margin: 0;
    padding-top: 2%;
}
figure.logo img#kdh-logo {
    position: initial;
    clip: rect(0px,65px,60px,0px);
    width:5.5vw;
    min-width:40px;
    max-width: 100px;
}
section h1{
    font-family: var(--everythingFont);
    margin: 0;
    font-size:7vw;
    line-height: 1;
    word-spacing: .1em;
    width: 50vw;
    height: revert;
    max-width: 1000px;
}
@media only screen and (min-width: 1650px) {
    section h1{
        font-size: 120px;
    }
}
@media (max-width: 650px){
    section h1{
        font-size: 3em;
        text-align: center;
        width: 80vw;
    }
}
/*@media (max-width: 500px){*/
/*    section h1{*/
/*        font-size: 2.3em;*/
/*    }*/
/*}*/
h2 {
    font-size: 2em;
}
#homeText h2{
    text-align: center;
}

#keynoteSect{
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-height: 100%;
}
.keynoteImg {
    display: flex;
    flex-direction: column;
    margin: auto auto 30px auto;
}
@media (max-width: 850px){
    #keynoteSect {
        flex-direction: column;
    }
}
.keynoteImg figcaption{
    margin: auto;

}
.keynoteImg img{
    max-height: 300px;
    image-resolution: 40dpi;
}

@media (max-width: 850px){
    .keynoteImg img {
        height: auto;
        width: 200px;
    }
}
/*figure.erie-behrend {*/
/*    flex-grow: 1;*/
/*}*/
/*img#erie-behrend {*/
/*    width:100%;*/
/*    max-width:250px;*/
/*    min-width:90px;*/
/*}*/


#behrendHomeLink {
    margin: 0;
}
/* ********************************END main page content */

/* ************************************About page */
#organizers {
    accent-color: #ffeeb3;
    display: flex;
    flex-direction: row;
    
}
@media (max-width: 995px) {
    #organizers {
        flex-direction: column;
    }
}
@media (min-width: 500px) {
    #organizers div {margin-left: 2em;}
}
/* ************************************END About page */




/** *********************************Registration page **/
#price {
    margin: 0;
    font-weight: bold;
}
#regPrice {
    list-style: none;
    margin: 0;
}
#campusMap {
    display: flex;
    flex-direction: row;
}
#campusMap img{
    width: 90%;
    max-width: 400px;
}
/** *********************************End Registration page **/


/** *********Local Attractions Page *********** **/
figure.loc {
    width:50%;
    padding:5px;
    margin-left: 0;
}

figure.loc figcaption{
    font-style: italic;
    font-size:smaller;
}

figure.loc img {
    max-width:80%;
    width:700px;
}
@media (max-width: 1077px){
    figure.loc img {
        max-width:100%;
    }
}
@media (max-width: 570px){
    figure.loc {
        width:100%;
        padding:5px;
    }
    figure.loc img {
        max-width:100%;
    }
}



/** *********END Local Attractions Page *********** **/

/*********************Abstract Page**/
p:has(.affil) {
    font-size: 0.8em;

}
p:has(.affil, i.name) {
    margin: 0;
}

#abstracts div {
    margin-bottom: 60px;
}

#dash {
    margin: 10px;
    list-style-type: none;
}
#dash > li {
    text-indent: -20px;
}
#dash > li:before {
    content: "-";
    text-indent: -20px;
}

/*********************END Abstract Page**/

/*********************Schedule Page**/
h4 {font-style:italic}
.sessionCont {
 margin-left: 50px;
}
@media (max-width: 650px) {
    .sessionCont{ margin-left: 20px;}
}
.schedule strong{
    font-weight: 900;
}
.auth {
    font-size:.8em;
    margin-top:0;
    margin-bottom:0;
}

/*********************END Schedule Page**/