/* Custom page CSS
-------------------------------------------------- */
html, body {
  height: 100%;

}

body {
    background: #212224;
    color:#ffffff;
    display: flex;
  flex-direction: column;
}

.mainpad {margin-bottom: 25px;
padding-bottom:15px;
}

.navbar { 
height: 60px;
left: 0px;
top: 0px;
padding: 15px 16px 15px 16px;
background: #323436;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 24px;    
    
}

.navbar-brand {
font-family: 'Raleway', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 1.6em;
line-height: 28px;
text-transform: capitalize;
color: #FF6400 !important;   
    display: inline;
}

@media screen and (max-width: 500px) {
    .navbar-brand {
font-size: 1.2em; !important
    
}
    
.case a {
font-family: 'Raleway' !important;
font-style: normal;
font-weight: 400;
text-decoration-line: underline;
text-transform: capitalize;
color: #FFA164 !important;
}

.case a:hover {
    color: #B3BBD4 !important; 
    text-decoration-line: none;
    font-family: 'Raleway' !important;
font-style: normal;
font-weight: 400;
}

.case a:active {
    color: #B3BBD4 !important; 
    text-decoration-line: none;
    font-family: 'Raleway' !important;
font-style: normal;
font-weight: 400;
}

.case a:visited {
    text-decoration-line: none;
color: #FFA164 !important;
    font-family: 'Raleway' !important;
font-style: normal;
font-weight: 400;
}
  
}

.title-white {
    color: #ffffff !important;
    display: inline;
}

.nav-right {position: fixed; right:16px;}
.navbar-icon2 {margin-left: 24px;}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

h1 {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 28px;
text-transform: capitalize;
color: #FFFFFF;
}

h2 {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 28px;
text-transform: capitalize;
color:#B3BBD4;
}

.case p {
font-family: "Courier Prime", monospace;
font-style: normal;
font-weight: 400;
font-size: .9em;
line-height: 18px;
color: #FFFFFF;

}

.case ul {
font-family: "Courier Prime", monospace;
font-style: normal;
font-weight: 400;
font-size: .9em;
line-height: 20px;
color: #FFFFFF;
    list-style-type: circle;
  margin-left: 32px !important;
}

.case li {margin-left:16px;
padding-left: 16px;}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
    background: #ffffff;
}

.conport {
    position: absolute;
    top:84px;
    padding-left: 32px;
}

.disclaimer {font-size: .7em;

font-family: "Courier Prime", monospace;}

.portcard {padding:16px;
width: 325px;
height: auto;
background: linear-gradient(298.04deg, #26272A 25.86%, rgba(63, 66, 72, 0.3) 171.62%);
border: 1px solid #2D2E32;
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
border-radius: 8px;
margin-right: 24px;
    margin-bottom: 24px;
}

.portcardtitle {/* Interaction Chart */
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
display: flex;
align-items: center;
color: #FFFFFF;

}

.card-title {padding-left:8px; !important
font-family: 'Raleway'; 
font-style: normal; 
font-weight: 400;  
font-size: 18px; 
line-height: 19px;
display: inline;
align-items: center;
color: #FFFFFF;
}

.card-header {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 14px;

letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 16px;

}

.card-info {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 14px;
text-transform: capitalize;
color: #FFFFFF;
width:auto;
    display:inline;
    align-items: center;
    padding-top: 16px;

}

.card-info2 {padding-top: 0px;}

.card-blurb {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: .8em;
line-height: 1.2em;
color: #FFFFFF;
width:auto;
    display:inline;
    align-items: left;
    padding-top: 10px;

}

.card-link {bottom:0;
    padding-top: 16px;
text-align: center;}

.card-link a {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: center;
text-decoration-line: underline;
text-transform: capitalize;
color: #FFA164;
}

.card-link a:hover {
    color: #B3BBD4; 
    text-decoration-line: none;
}

.card-link a:active {
    color: #B3BBD4; 
    text-decoration-line: none;
}

.card-link a:visited {
    text-decoration-line: none;
    color:#B3BBD4;    
}

.about {
    width:100%;
    height: auto;
    padding: 16px;
background: rgba(50, 52, 54, 0.31);    
}

.about h1 {color: #FF6400;}

.about h2{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
color: #B3BBD4;
}

.about h3{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
color: #B3BBD4;
}

.about p {
font-family: "Courier Prime", monospace;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;

}

.about img {width: 100%;
  height: auto;}

.skills {
background: #212224;
box-shadow: 2px 2px 4px #323436, inset 2px 2px 4px rgba(0, 0, 0, 0.25);
border-radius: 12px;
padding: 16px;
}

.skills h2 {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 19px;
text-align: center;
text-transform: capitalize;
color: #B3BBD4;
}

.skills p {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 13px;
text-transform: capitalize;
color: #FFFFFF;

}



footer {
       width: auto;
    text-align: center;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: rgba(255, 255, 255, 0.65);
    padding:20px;
    position: relative;
    bottom:-200px;
  
}

footer a {

text-decoration-line: underline;
text-transform: capitalize;
color: #B3BBD4;
}

footer a:hover {
    color: #FFA164; 
    text-decoration-line: none;
}

footer a:active {
    color: #B3BBD4; 
    text-decoration-line: none;
}

footer a:visited {
    text-decoration-line: none;
    color:#B3BBD4;    
}