/* CSS HEX pallete  */
   :root {
       --blue-sapphire: #22577aff;
       --light-blue: #add5fd;
       /* --cadet-blue: #38a3a5ff; */
       --main: #23384e;
       /* --bs-light */
   }

   body {
       background: var(--main);
       font-family: "Roboto", sans-serif;
   }

   .main {
       max-width: 1080px;
       margin-top: 1rem;
       margin: auto;
       /* box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.212); */
       width: 90vw;
   }

   .name-contact {
       background-color: var(--bs-light);
       display: flex;
       justify-content: center;
       min-height: 200px;
       margin: 20px 0;
       border-radius: 5px 5px;
   }

   .name-div {
       text-align: center;
       font-size: calc(.8rem + .5vw);
       margin: auto;
   }

   .name {
       font-size: calc(1.5rem + .5vw);
       font-weight: 400;
       text-decoration-line: underline;
       text-decoration-style: dashed;
   }

   #contacts {
       align-self: center;
       vertical-align: middle;
       background-color: var(--main);
       color: var(--bs-light);
       border-radius: 15px;
       height: 90%;
       width: 90%;
       margin: auto;
       padding: 1rem;
   }

   .contact {
       height: 100%;
       align-content: center;
       /* padding: 10px; */
   }

   .contact>div {
       font-size: calc(0.6rem + 0.5vw);
       align-items: center;
       align-self: center;
       margin-top: .8vh;
   }

   @media (max-width: 767px) {

       #contacts {
           height: 50px;
           padding: 1rem .5rem;
       }

       .contact {
           display: flex;
           flex-direction: row;
           justify-content: space-around;
           margin: 1px;
       }

       .contact div {
           font-size: calc(.7rem + .6vw);
           margin-top: 5px;
       }
   }

   .section-container {
       background-color: var(--bs-light);
       display: flex;
       justify-content: center;
       min-height: 150px;
       margin: 10px 0;
       border-radius: 5px 5px;
       padding: 0 1rem;
   }

   .section-container>div {
    width: 100%;
   }

   .section-title {
       color: #fff;
       font-size: 1.3rem;
       line-height: 1.3rem;
       background: var(--blue-sapphire);
       padding: 1rem 2rem;
       margin: 1rem 0 1rem 0;
       border-radius: 15px;
       display: block;
   }

   #skills {
       font-size: calc(.8rem + .2vw);
       font-weight: 300;
   }

   .bg-skill {
       /* background: #23384e; */
       background: var(--blue-sapphire);
       color: var(--light-blue);
   }

   .bg-span {
       background: transparent;
       /* background: #ddd; */
   }

   .middle-section {
       flex-wrap: wrap;
   }

   #exp-title {
       width: 100%;
   }

   #recent-header {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       background: var(--main);
       color: #fff;
       padding: 1rem;
   }

   .recent-company {
       font-size: calc(2rem + 1vw);
   }

   .recent-date {
       font-size: .8rem;
   }

   #recent-resp {
       padding: 0 1rem;
       background: var(--main);
       color: #fff;
   }

   #recent-resp h3 {
       color: var(--light-blue);
       font-size: 1.2rem;
   }

   #recent-resp ul {
       list-style-type: none;
   }

   #recent-resp ul>li {
       margin: 5px 0;
   }

   #recent-resp ul ul>li {
       font-size: .9rem;
       list-style-type: disc;
       margin: 0;
   }

   #recent-resp ul ol>li {
       font-size: .9rem;
       list-style-type: none;
       margin: 0;
   }

   .accordion .card {
       border: none;
       margin-bottom: 2px;
   }

   /* .accordion .accordion-header {
background: #21c2a2;
} */

   .accordion .accordion-header h2 {
       color: #fff;
       font-size: 1rem;
       font-family: "Roboto", sans-serif;
       font-weight: 500;
   }

   .accordion .accordion-header h2 span {
       float: left;
       margin-top: 10px;
   }

   .accordion .accordion-header button {
       color: #22577a;
       font-size: 1.2rem;
       line-height: 1rem;
       background: #c7f9cc;
   }

   .accordion .accordion-header button:hover {
       color: #1174d8;
   }

   .accordion-wrapper {
       margin-bottom: 5px;
   }


   #experience .accordion .accordion-header button {
       color: var(--light-blue);
       font-size: .9rem;
       line-height: 1rem;
       background: #22577a;
       padding: .25rem;
   }

   #experience .accordion .accordion-header button.collapsed {
       color: #000;
       font-size: .9rem;
       line-height: 1rem;
       background: #ddd;
       padding: .25rem;
   }

   #experience .accordion .accordion-header button::after {
       color: #000;
   }



   .exp-header {
       width: 150px;
       display: block;
       margin-right: auto;
       padding-right: initial;
   }

   .exp-header.date {
       width: 50px;
       display: block;
       margin-right: auto;
       text-align: center;
   }

   .spacer {
       display: block;
       min-height: 10px;
       margin-bottom: 0px;
   }

   .skillspan {
       display: inline-block;
       padding-right: .5rem;
       padding-left: .5rem;
   }

   .responsibility-span {
       font-size: .8rem;
       background: #ddd;
       margin-top: 2px;
       padding: .25rem 1rem;
   }

   #cert-embed {
       background: ivory;
       display: inline-block;
   }

   #print {
       position: fixed;
       left: 2rem;
   }