body {
    border-color: aqua;
    border-width: 2px;
}

.container-fluid {
    text-align: center;
}

.navbar-collapse {
    text-align:left;
    float:left;
}

.btn-close {
    float: right;
    display: inline-block;
}


.navbar-toggler {
    display: inline-block;
    float: right;
    font-size: 1em;

}

.offcanvas-body {
/*    color: aqua;*/
    display: inline-block;
    float: left;
    font-size: 1.5em;
    line-height: .75em;
}

#demo {
    color: chartreuse;
    margin-bottom: .5em;
    line-height: .5em;
}

#andrew {
    margin-left: .8em;
    padding-top, padding-bottom: 16px;
    font-size: 1.25em;
}


.row-flex {
    display: flex;
    flex-wrap: wrap;
}


#myHeader {
    height: 100%;
    align-items: flex-start;
    vertical-align: middle;
    margin-bottom: 15%;
}
.link {
    margin-bottom: .5em;
    color: black;
    cursor: pointer;
}


#landingCarousel {
    display: inline-block;
    border: 1px;
    border-color: black;

}

.carousel-inner {
    vertical-align: top;
}

#nav {
    margin-top: 2.5em;
}

p {
    color: black;
    
}

#container {
    border: 5px;
    border-color: black;
}
.caption {
    color: gray;
    font-size: .9em;
    margin-top: 1em;
}

.img-fluid {
    max-height: 80vh;
}

#aboutPage {
    text-align: left;
}


.off-canvas {
    width: 100vw;
    
}

.dropdown-item {
    background-color: green;
    display: block;
    
}

.nav-item {
    display: block;
}

.dropdown:active {
    background-color: black;
    display: block;
    
}
/* hovering */


.nav {
    color: gray;
}
p {
    
}

#toggle {
    color: gray;
}

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


a:visited, details > summary:active {
    color: black;
}


strong:hover, a:hover, .link:hover, .nav-link:hover, #toggle:hover {
    color: lightseagreen;
/*    background-color: plum;*/
    text-decoration: none;
}

h3 {
    font-size: 1em;
}

a.nav-link {
    color: black;
}

#active  {
    color: lightseagreen;
}

.navbar-active-color {
    color: rebeccapurple;
}
a:active, details > summary:active {
    color: green;
}

strong {
    font-weight: normal;
}

a.active-page {
    color: greenyellow;
}
#aboutLink {
    color: lightslategrey;
}

#aboutLink:hover {
    color: palevioletred;
}

   body {
        margin: 1%
    }
@media (min-width: 768px) { 
    .navbar-toggler {
    display: none;
}
    h1 {
        margin-bottom: 1em;
    }
    .offcanvas-body.col.col-md-2 {
        
    }
    
 #andrew {
    margin-left: 0em;
}
    
    .offcanvas-body {
    font-size: 1.25em;
    }
    
    #myHeader {
    margin-bottom: 1%;
}
    #andrewPortrait {
    max-height: 40vh;
    width: auto;
}
}

@media only screen and (orientation: landscape) and (max-width:320px) {
    #landingCarousel {
        height: 100vh;
    }
/*
    #myCarousel {
        height: 100vh;
    }
*/
    
    #myHeader {
        margin: 2%;
    }
    
    .img-fluid {
        max-height: 100vh;
    }
}