legend {
    font-weight: bolder;
    padding-left: 15px;
}

nav {
    font-size: 1.4rem;
    padding-bottom: 1rem;
}

input::placeholder, textarea::placeholder {
    color: #eaeaea;
}

.err {
    color: red;
    display: none;
}
 
.form-control {
    background-color: rgba(85, 85, 85, 0.15);
}

.form-group > label {
    padding-left: 5px;
}

.jumbotron {
    color: white;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(to right, rgba(94, 94, 94, 0.1), rgba(171, 255, 255, 0.4)), url(../../images/somewhereInOregon.jpg);
    background-size: cover;
}

.toast {
    position: absolute;
    top: 10rem;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
    font-size: larger;
}

.fade {
    transition: opacity 0.5s linear !important;
}

.portfolio {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 15px;
    width: 48%;
    vertical-align: middle;
}

.portfolio img {
    max-width: 100%;
}

div.dt-length > select {
  margin-right: 10px;
}

div.dt-search > label {
  margin-right: 10px;
}

#side-words, #side-words-small {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    color: white;
    font-size: 3.5rem;
    font-weight: bolder;
    background: url(../../images/fallWork.jpg);
    background: linear-gradient(to right, rgba(189, 189, 189, 0), rgba(31, 31, 31, 0.48)), url(../../images/fallWork.jpg);
    background-size: cover;

}

#side-words-small {
    font-size: 2.5em;
}

#other, #mailGroup {
    display: none;
}

#idLinkedInIcon {
    background-color:rgb(0, 102, 170);
    border-radius:6px;
    color:white;
    cursor:pointer;
    display:inline-block;
    font:bold 20px Arial, Helvetica, sans-serif;
    height:25px;
    margin-top:1px;
    text-align:center;
    width:25px;
}

#idLinkedInIcon:hover {
    background-color:#06d;
}

#linkedinAnchor:link {
    color: white;
}

#linkedinAnchor:visited {
    color: white;
}


#linkedinAnchor:active {
    color: rgba(243, 243, 243, 0.65);
}

#portfolioPics img{
    max-width: 18%;
}

#met-method, #other, #err-met {
    margin-bottom: 1rem;
}

footer {
    background-color: #555;
    color: white;
    padding: 15px;
    font-size: 3rem;
}

@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height: auto;}
}

body:has(> #logBody) {
    height: 100VH;
    overflow: auto;
    display: flex;
    flex-direction: column;

    & > div#logBody {
        flex-grow: 2;
        & > div.row.content {
            height: 100%;
        }
    }
}