:root {
    --red: #E50914;
    --black: #131313;
}

* {
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--black);
    overflow-x: hidden;
}

/* working class */
.bege {
    background-color: blanchedalmond;
}

.navbar-brand {
    height: 50px;
}

.carousel-caption{
    text-align: left;
}

.title-banner{
    /* color: var(--red); */
    font-weight: 600;
    text-shadow: 2px 2px 3px var(--black) ;
}

/* "My list" carousel */
.my-list-carousel {
    position: relative;
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 350px;
}

.my-list .slide {
    height: 300px;
    z-index: 0;
  }

.my-list {
    position: absolute;
    top: 0px;
}

.slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

h3 {
    color: whitesmoke;
}

.control {
    background: transparent;
    height: 300px;
    width: 3rem;
    font-size:5rem;
    color: white;
}

.control:hover {
    background-color: rgb(13,13,13,0.4);
}

.previous {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

.previous:hover {
    box-shadow: 10px 0 10px rgb(13,13,13,0.4);
}

.next {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
}

.next:hover {
    box-shadow: -10px 0 10px rgb(13,13,13,0.4);
}

/* Top 10 carousel */
.top-10-carousel {
position: relative;
}

.top10 {
    z-index: 2;
}

/* Hides padding above the slides */
.tns-nav{
    visibility: none;
    height: 0;
}

.top10-number {
    height: 100%;
    font-size: 312px;
    font-weight: 600;
    margin-right: -40px;
    line-height: 320px;

    /* Creating text-stroke with transparent letters, I got that from Codepen */
    /* Faux outline for older browsers */
    color: white; /* Unfortunately you can't use transparent here … */
    text-shadow:
	   -1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff
}


/* Real outline for modern browsers */
@supports((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
    .top10-number {
        color: transparent;
        -webkit-text-stroke: 5px grey;
		text-stroke: 5px grey;
        text-shadow: none;
    }
}

/* Hiding Top 10 controls */
#controls-top-10 {
    visibility: hidden;
}

/* Movie carousel */
.movies-carousel {
    position: relative;
}
.controls-movies {
    position: relative;
    z-index: 2;
}

/* Series carousel */
.series-carousel {
    position: relative;
}
.controls-series {
    position: relative;
    z-index: 2;
}

/* Social buttons */
.social-spread {
    color: white;
    font-size: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer {
    font-size: 14px;
}

.footer a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
}

.footer a:hover {
    color: rgba(255,255,255,1);
}