:root {
   --azure-bgn: hsl(180, 100%, 97%);
}

body {
   background-image: none;
   /* background-color: var(--azure-bgn); */
   background-image: url(../images/svg/vanishing-stripes.svg);
   font-family: "Work Sans", Arial, sans-serif;
   min-width: 300px;
}


.col-sm-8 {
   width: 75%;
   border: 1px solid rgb(204, 204, 204);
   background-color: rgb(255, 255, 255);
   color: darkgrey;
   margin: 3rem auto;
}

.resume-container {
   padding: 7%;
   color: rgb(64, 64, 64);
   font-weight: 200;
}

img {
   max-width: 150px;
   border: 1px solid rgb(192, 192, 192);
   border-radius: 2px;
   padding: 0;
}

h1, li, li>a, a:hover, .section .col-sm-10 h2 {
   color: rgb(187, 30, 30);
}

h1, h2 {
   font-size: 2.3rem;
   text-transform: uppercase;
   font-weight: 300;
   text-align: center;
}

h1 {
   font-size: 2.3rem;
}

h2 {
   font-size: 1.3rem;
   padding-bottom: 1.6rem;
}

li {
   /* display: inline-block; */
}

.col-sm-2 {
   width: 20%;
}

.col-sm-7 {
   width: 55%;
}
.col-sm-10 {
   width: 80%;
}

.row .header {
   text-align: justify ;
}
.intro {
   text-indent: 3rem;
   line-height: 1.6rem;
   font-size: 1.1rem;
   padding-left: 3%;
}

.first-row-skills {
   margin-bottom: 0.1rem;
}

ul {
   /* border-left: 1px solid rgb(192, 192, 192); */
   list-style: circle;
   font-weight: 200;
   line-height: 1.6rem;
   padding-left: 1rem;
}

ul a {
   text-decoration: none;
}

ul a:hover {
   text-decoration: underline;
}


.row .project {
   margin-bottom: 1rem;
}

.section .col-sm-10 h2 {
   padding-top: 1.5rem;
   text-align: left;
   padding-bottom: 0.25rem;
} 

.skills ul li{
   color:rgb(64, 64, 64)
}

h3 {
   text-transform: uppercase;
   font-weight: 200;
   font-size: 1.15rem;
}

h4 {
   text-transform: uppercase;
   font-weight: 400;
   font-size: 1rem;
}

h5 {
   text-transform: uppercase;
   font-weight: 200;
   font-size: 0.9rem;
}

span {
   background-color: rgb(235, 235, 235);
   display: block;
   text-align: right;
   padding: 2%;
   border-radius: 2px;
}

.project .col-sm-2 a {
   display: block;
   text-align: right;
   text-decoration: none;
   color:rgb(187, 30, 30)
}

.place-and-time {
   text-align: right;
}

.col-sm-10 li {
   color:rgb(64, 64, 64);
   list-style-type:circle
}

/* Download section styles */
#resume-docs {
   margin-top: 4rem;
}

.resume-download {
   display: flex;
   justify-content: center;
}

a {
   margin-top: 3%;
}

a img {
   float: right;
   border: 2px solid transparent;
   height: 56px;
   padding: 4px;
   border-radius: 2px;
   margin: 0 10px;
}

a img:hover {
   border: 2px solid rgb(192, 192, 192);
}

a img:active {
   border: 2px solid rgb(240, 188, 104);
}



@media screen and (max-width: 1600px) {
   .col-sm-8 {
      width: 85%;
   }
   
}

@media screen and (max-width: 1320px) {
   .col-sm-8 {
      width: 90%;
   }
}

@media screen and (max-width: 1200px) {
   .container {
      max-width: 1000px;
   }

   .col-sm-2 {
      width: 100%;
   }

   .col-sm-3 {
      width: 100%;
   }

   .col-sm-7 {
      width: 100%;
   }

   .col-sm-10 {
      width: 100%;
   }
   .mx-auto {
      margin-bottom: 2rem;
   }

   .place-and-time {
      margin-bottom: 0;
   }

   span {
      padding: 1%;
   }
   br {
      display: none;
   }
   ul {
      width: 100%;
   }
   li {
      width: 100%;
      margin: 0 auto;
   }
}

@media screen and (max-width: 768px) {
   .col-sm-7 {
      width: 100%;
      padding-bottom: 2rem;
      padding: 0;
   }

   .col-sm-3 {
      width: 100%;
   }

   .mx-auto {
      margin-bottom: 2rem;
   }

   li {
      width: 100%;
   }
}