:root{
  --white: #fff;
  --black: #000;
  --midGray: #ddd;
  --shadowGray: #afafaf;
  --buttonBlue: #5a81ce;
  --berdGreen: #8dc63f;
  --berdGreenLt: #8ec63f10;
  --berdPurple:#67308f;
  --berdPurpleLt: #67308f2c;
  --berdPurpleMed: #67308f91;
  --crimson: #dc143c;
  --berdYellow: #d7df23;
  --berdYellowLt: #d6df2315;
}

/* TRANSFORMS */
.berd:hover {
    transform: rotate(-20deg);
    -webkit-filter: drop-shadow(0px 0px 0px var(--shadowGray));
    filter: drop-shadow(0px 0px 0px var(--shadowGray));  
}
/* image transform on index pg and byline */
.moveup:hover {
  transform: translate(1px, -5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  font-size: 2rem;
  color: var(--berdPurple);
}

/* OVERLAY */
.image{
  display: block;
  width: 100%;
  height: auto;
}
.overlay{
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .2s ease;
  background-color: var(--berdPurple);
}
.overlay-text {
  color: var(--white);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.card:hover .card-img-overlay {
  opacity: 1;
}

/* COOKIE FORMATTING */
.cookie-overlay {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #fff;
  z-index: 2051;
  line-height: 20px;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  /* display: block; */
}
.cookie-overlay > div:first-child {
  width: 458px;
}
.cookie-overlay a {
  text-decoration: underline;
}
.cookie-overlay .close-cookies {
  cursor: pointer;
}
/* @media (max-width: 767.98px) {
  margin-bottom: 0;
  border-radius: 0;
}   */

.cookie-overlay > div:first-child {
    width: auto;
 }


/* FORMATTING */
/* indent a line */
.movein {
  /* text-indent: 50px; */
  padding-left: 3rem;
}
/* li formating in values box */
.values>li{
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}
/* Format div for resume berd */
@media (max-width: 768px) {
  .img-fluid-resume {
    width: 40%;
    height: auto;
  }
}
/* Give Berd a shadow */
.berd{
  -webkit-filter: drop-shadow(0px 25px 8px var(--shadowGray));
  filter: drop-shadow(0px 25px 8px var(--shadowGray));
}

/* Format accordion div for mobile */
@media (max-width: 768px) {
  button.accordion {
    width: 100%;
  }
}


/* NAV */
/* nav text color */
.navbar-light .navbar-nav .nav-link {
  color: var(--black);
}
/* show purple background on hover */
.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--white);
  background-color: var(--berdPurple);
}
/* show purple background on dropdown items on hover */
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--white);
  text-decoration: none;
  background-color: var(--berdPurple);
}
/* show black line under active page name */
/* .navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
  border-bottom: 2px solid var(--black);
} */


/* Accordions */
.accordion {
	width: 50%;
	display: inline-block;
	text-align: left;
	font-weight: 500; 
	 background-color: var(--berdGreenLt); 
	/* color: var(--black); */
  padding: 5px;
	margin: 20px 0px;
}


.hide{
	display:none;
	}
.show{
	display:block;
}

/*Colors and gradients*/

/* sea green to navy blue */
.bg-gradient{
	background-image: linear-gradient(to right, rgb(133,173,173), rgb(0,0,77));
}

/* digital media yellow */
.bg-yellow{
	background-color: var(--berdYellow);
}
.bg-yellowpale{
	background-color: var(--berdYellowLt);
}
.bg-yellowgradient{
	background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(215, 223, 35));
}
.btn-yellow {
  color: var(--black);
  background-color: var(--berdYellow);
  border-color: var(--berdYellow);
}
.btn-yellow:hover {
  color: var(--black);
  background-color: var(--berdYellowLt);
  border-color: var(--berdYellow);
}

/* web tech green */
.bg-green{
	background-color: var(--berdGreen);
}
.bg-greenpale{
	background-color: var(--berdGreenLt);
}
.bg-greengradient{
	background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(141, 198, 63));	
}
.btn-green {
  color: var(--black);
  background-color: var(--berdGreen);
  border-color: var(--berdGreen);
}
.btn-green:hover {
  color: var(--black);
  background-color: var(--berdGreenLt);
  border-color: var(--berdGreen);
}

/* previous work purple */
.bg-purple{
	background-color: var(--berdPurple);
}
.bg-purplepale{
	/* background-color: var(--berdPurple); */
  background-color: var(--berdPurpleLt);
}
.bg-purplegradient{
	background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(103, 48, 143));	
}
.btn-purple {
  color: var(--white);
  background-color: var(--berdPurple);
  border-color: var(--berdPurple);
}
.btn-purple:hover {
  color: var(--black);
  background-color: var(--berdPurpleMed);
  border-color: var(--berdPurple);
}

.bg-black{
	background-color: var(--black);
}
.shadow-white{
  box-shadow: 0.4rem 0.4rem 0.25rem rgba(255, 255, 255, .25);
}
.monarchfill{
  background-color: rgba(80, 134, 104, .42);
}
.blk{
  color:var(--black);
}
.bg-light {
  background-color: #f8f9fa !important;
}

/*Section headers*/
.webtechhead{
  padding: 25px 20px 5px 40px;
  text-shadow: 1px 1px gray;
}
.digmedhead{
  padding: 25px 20px 5px 40px;
  text-shadow: 1px 1px gray;
}
.prevworkhead{
  padding: 25px 20px 5px 40px;
  text-shadow: 1px 1px gray;
}

/* HR */
.asldm{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-top: 5px solid var(--berdYellow);
}
.aslwt{
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-top: 5px solid var(--berdGreen);
}
.aslpw{
      margin-top: 1rem;
      margin-bottom: 1rem;
      border-top: 5px solid var(--berdPurple);
}
.aslres{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-top: 4px solid var(--black);
}

/* PADDING */
/*Padding for grid container*/
/* .container-fluid-ASL, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding: 70px;
  margin-right: auto;
  margin-left: auto;
} */
.aslcontpad{
  width: 100%;
  padding: 70px;
  margin-right: auto;
  margin-left: auto;
}
.picpad{
  width: 100%;
  padding: 0px 70px 0px 70px;
  margin-right: auto;
  margin-left: auto; 
}
/*Padding for footer container*/
.container-fluid-ASLfoot, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding: 40px;
  margin-right: auto;
  margin-left: auto;
}
.smpadding{
  padding: 5px;
}
.mdpadding{
  padding: 10px;
}
.rowPad{
  padding:70px 0 70px 0;
}
.footer{
	padding-bottom: 20px;
}
.noBorder{
  border: 0px;
} 
.space{
  margin: .5rem;
}

/* width for card-img */
/* .card-img,
.card-img-top,
.card-img-bottom {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 50%;
} */

/* GAME  */

.figure-game {
  margin-left: auto;
  margin-right: auto; 
  padding: 1rem;
}
.button-game{
  padding: 5px;
}
.button-resetG{
  background-color: #dae0e5;
}
.button-reset{
  background-color: var(--buttonBlue);
  color: var(--white);
}
.rowPadGame{
  padding:0 5px 0 5px;
}
.yesBlue{
  background-color: var(--buttonBlue);
}
.noRed {
  background-color: var(--crimson);
}
.outlined {
  border: 1px solid;
  border-color: var(--black);
}
.required {
  color: var(--crimson);
}

/* SKILLS BAR */
.skillContainer {
  width: 100%;
  background-color: var(--midGray);
}
.skillp{
  margin-top: 1rem;
  margin-bottom: 0;
}
.skills {
  text-align: right;
  color: var(--black);
}
.skillbtn{
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.html{width: 80%; background-color: var(--berdGreen);}
.css{width: 80%; background-color: var(--berdGreen);}
.bs4{width: 60%; background-color: var(--berdGreen);}
.js{width: 40%; background-color: var(--berdGreen);}
.jq{width: 40%; background-color: var(--berdGreen);}
.jsn{width: 40%; background-color: var(--berdGreen);}
.xml{width: 40%; background-color: var(--berdGreen);}
.hsc{width: 60%; background-color: var(--berdGreen);}
.balsam{width: 50%; background-color: var(--berdGreen);}
.xd{width: 50%; background-color: var(--berdGreen);}
.dwvr{width: 80%; background-color: var(--berdGreen);}
.ps{width: 90%; background-color: var(--berdYellow);}
.indd{width: 60%; background-color: var(--berdYellow);}
.ai{width: 60%; background-color: var(--berdYellow);}
.an{width: 60%; background-color: var(--berdYellow);}
.ae{width: 50%; background-color: var(--berdYellow);}

/* CONTACT FORM */
.form-row {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em;
  flex-wrap: wrap;
}
input {
  margin: 0.5em;
  border-radius: 4px;
  border: 1px solid #002b80;
}
/* Error Handling */
.invalid-feedback {
  display: none;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
  flex: 100%;
}
/* selects every .invalid-feedback element/class that is preceeded by a .is-invalid element/class 
does NOT display the div*/
.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Selects all .is-invalid elements/class, and
.form-check-label element/class that is preceeded by a .is-invalid element/class 
When needed, this div is displayed.*/
.is-invalid, .is-invalid ~ .form-check-label {
  border-color: #dc3545;
  color: #dc3545;
}

label {
  margin-left: 0.5rem;
  margin-bottom: 0rem;
  margin-top: .5rem;
}
textarea{
  margin-left: 0.5rem;
}

/* FAVICONS */
/*For fa-fa icons <i>.  All <i> elements where parent is a <button> element*/
button>i{
  float: right;
}

i{
padding: 5px;
float: none;
/*	vertical-align: middle;*/
}

/*For fa-fa icons <i>.  All <i> elements where parent is a <p> element.  
Margin-right allows text to center on <i> */
/* p>i {
float: left;
padding:0px;
margin-right: 10px;
} */