/* ------ Global ------ */
:root {
  --black: #000000;
  --gloss-black: #070707;
  --light-black: #1f2833;
  --grey: #909191;
  --purple: #9354ce;
  --light-purple: #AC58FC;
  --white: #ffffff;
  --yellow: #f1cb44;
  --light-yellow: #fad84c;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--light-black);
}

.pointer {
  cursor: pointer;
}

/* ------ Colours ------ */
.white {
  color: var(--white);
}

.grey {
  color: var(--grey);
}

.light-purple {
  color: var(--light-purple);
}

.black {
  color: var(--black);
}


/* ------ Backgrounds ------ */

.bkg-gloss-black {
  background-color: var(--gloss-black);
}

.bkg-light-black {
  background-color: var(--light-black);
}

/* ------ Fonts ------ */
.tilt-neon {
  font-family: 'Tilt Neon', san-serif;
}

.nunito {
  font-family: 'Nunito', san-serif;
}

/* ------ Headers ------ */
.header {
  font-size: 3.4rem;
}

.small-header {
  line-height: 1.6rem;
}

.medium-header {
  font-size: 2.1rem;
}

/* ------ Links ------ */
a {
  text-decoration: none;
}

.p-link {
  color: var(--light-purple);
}

.p-link:hover {
  color: var(--purple);
}

.nav-link {
  color: var(--white);
  font-size: 1.4rem;
}

.nav-link:hover {
  color: var(--light-purple) !important;
}

.nav-link:active {
  color: var(--light-purple) !important;
}

.nav-link:visited {
  color: var(--white);
}

.selected-link{
  color: var(--light-purple) !important;
}

.zoom {
  transition: ease-in-out 0.3s;
}

.zoom:hover {
  transform: scale(1.05);
  transition: ease-in-out 0.3s;
}

/* ------ Components ------ */

@media (max-width: 768px) {
  .modalBookImage {
    max-height: 300px;
  }
}


@media (max-width: 575px) {
  .podcast-card {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .podcast-card {
    width: 50%;
  }
}


.dark-card {
  transition: background-color 0.5s ease;
  background-color: #181818;
  border-radius: 15px;
}

.dark-card:hover {
  background-color: var(--light-purple);
}

.dark-card-selected {
  background-color: var(--light-purple);
}

.video-card {
  border: 8px solid rgba(30, 38, 48, .9);
  transition: ease-in-out 0.3s;
}

.video-card:hover {
  border:8px solid rgba(172, 88, 252, .9);
}

.quote-card {
  background-color: #1b2226;
  border-radius: 10px;
}

footer {
  color: var(--white);
}

.footer-logo {
  width: 60px;
  height: 60px;
}

.footer-link {
  color: var(--white);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.footer-link:hover {
  color: var(--light-purple) !important;
}

.navbar {
  background-color: var(--light-black);
}

.navbar-logo {
  height: 70px;
}

.pagination {
  float: right;
  flex-wrap: wrap !important;
  margin-right: 0px;
}

.podcast-bkg {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(172%2c 88%2c 252%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c300.331C60.744%2c302.977%2c126.068%2c308.625%2c176.957%2c275.35C227.732%2c242.15%2c238.975%2c175.375%2c270.432%2c123.502C306.963%2c63.261%2c386.572%2c15.595%2c376.787%2c-54.174C367.009%2c-123.895%2c280.523%2c-151.405%2c225.685%2c-195.557C180.882%2c-231.629%2c136.71%2c-264.172%2c84.909%2c-289.173C23.59%2c-318.768%2c-36.407%2c-361.435%2c-104.165%2c-354.754C-176.328%2c-347.639%2c-255.762%2c-315.514%2c-290.955%2c-252.114C-326.022%2c-188.94%2c-270.468%2c-111.858%2c-278.831%2c-40.09C-286.844%2c28.68%2c-362.429%2c89.606%2c-338.338%2c154.514C-314.528%2c218.664%2c-230.157%2c233.272%2c-167.319%2c260.354C-113.57%2c283.519%2c-58.473%2c297.784%2c0%2c300.331' fill='%23a447fc'%3e%3c/path%3e%3cpath d='M1440 1089.571C1535.649 1066.2640000000001 1611.165 1004.1379999999999 1703.5230000000001 970.049 1829.768 923.453 2017.21 971.2 2081.3 852.8720000000001 2143.848 737.391 2015.603 606.141 1966.629 484.282 1929.179 391.098 1885.701 305.93399999999997 1828.355 223.48899999999998 1764.249 131.325 1714.112 20.93399999999997 1611.955-25.625 1504.806-74.46000000000004 1373.951-79.71000000000004 1265.925-32.846000000000004 1161.662 12.384999999999991 1122.004 134.07600000000002 1047 219.46300000000002 971.336 305.602 860.215 362.829 823.086 471.301 782.897 588.711 790.681 720.309 836.024 835.827 882.691 954.7180000000001 960.8679999999999 1072.848 1078.62 1122.318 1192.437 1170.135 1320.055 1118.798 1440 1089.571' fill='%23b469fc'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.podcast-bar {
  background-color: var(--gloss-black);
}

/* ------ Buttons ------ */
.btn-purple {
  background-color: var(--light-purple);
  color: var(--white);
}

.btn-purple:hover {
  background-color: var(--purple);
  color: var(--white) !important;
}

.btn-amazon {
  background-color: var(--light-yellow);
  color: var(--light-black);
}

.btn-amazon:hover {
  background-color: var(--yellow);
  olor: var(--light-black);
}

.btn-black, .btn-black:hover {
  background-color: var(--black);
  color: var(--white);
}

.btn-red {
  background-color: #FF0000;
  color: var(--white); 

}

.btn-red:hover {
  background-color: #e50000;
  color: var(--white) !important;
}

.btn-light-black, .btn-light-black:hover, .btn-light-black:active, .btn-light-black:hover:active, .btn-light-black:visited, .btn-light-black:focus {
  background-color: var(--light-black);
  color: var(--white);
}

.btn-120 {
  width: 120px;
}