/* CSS VARIABLES */
:root {
  --black: #000;
  --gray: #333;
  --lightgray:#D8D8D8;
  --white: #fff;
  --highlight: #007bff;

  --border-color: var(--black);
  --background-color-primary: var(--black);
  --background-color-primary-hover: var(--gray);
  --text-color: var(--black);
  --neg-text-color: var(--white);
  --text-highlight: var(--highlight);
  --text-shadow: var(--lightgray);
}

/* BTSTRP */

a {
  color: var(--text-highlight:);
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: var(--text-highlight);
  text-decoration: none;
  background-color: transparent;
  border-bottom: 2px dashed
}
.text-primary {
  color: var(--text-color)!important;
}
.card.podcast-element {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid var(--border-color);
}
.card-title.podcast-title {
  font-size: 2rem;
  font-weight: bolder;
  text-shadow: -5px 5px var(--text-shadow);
}
.card-body {
  padding-left: 0;
  padding-right: 0;
}
.btn-primary {
    color: var(--neg-text-color);
    background-color: var(--background-color-primary);
    border-color: var(--background-color-primary);
    margin-bottom: 1rem;
}
.btn-primary:hover {
  color: var(--neg-text-color);
  background-color: var(--background-color-primary-hover);
  border-color: var(--background-color-primary);
}
.btn-primary:not(:disabled):not(.disabled):active {
  color: var(--neg-text-color);
  background-color: var(--background-color-primary-hover);
  border-color: var(--background-color-primary);
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem var(--background-color-primary-hover);
  box-shadow: none;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.col {
  padding-left:0;
  padding-right: 0;
}


/* LAYOUT MOBILE */
.home-header {
  background-color: var(--black);
  color: var(--neg-text-color);
}
.podcasts {
  margin-bottom: 1rem;
}
.podcast-details {
  /* margin-bottom: 1rem; */
  border-top: 1px solid var(--lightgray);
}
.postcast-element {
  width: 100%;
}

/* LAYOUT DESKTOP */