body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
    color: white;
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: "Knockout_Light";
    src: url("../fonts/Knockout-Light.otf") format("truetype");
}

@font-face {
    font-family: "Knockout_Normal";
    src: url("../fonts/Knockout-Normal.otf") format("trueType");
}

@font-face {
    font-family: "Knockout_Bold";
    src: url("../fonts/Knockout-Bold.otf") format("truetype");
}

.roboto_regular_base,
.robo_reg_26,
.robo_reg_22,
.robo_reg_16,
.robo_reg_12 {
    font-family: "Roboto_Regular";
    color: #1a1a1a;
}

.robo_reg_26 {
    font-size: 26px;
}

.robo_reg_22 {
    font-size: 22px;
}

.robo_reg_16 {
    font-size: 16px;
}

.robo_reg_12 {
    font-size: 12px;
}

.robo_reg_26.blue,
.robo_reg_22.blue,
.robo_reg_16.blue,
.robo_reg_12.blue {
    color: #007bff;
}

.robo_reg_26.gray,
.robo_reg_22.gray,
.robo_reg_16.gray,
.robo_reg_12.gray {
    color: #c0c0c0;
}

.roboto_medium_base,
.robo_med_26,
.robo_med_22,
.robo_med_16,
.robo_med_12 {
    font-family: "Roboto_Medium";
    color: #1a1a1a;
}

.robo_med_26 {
    font-size: 26px;
}

.robo_med_22 {
    font-size: 22px;
}

.robo_med_16 {
    font-size: 16px;
}

.robo_med_12 {
    font-size: 12px;
}

.robo_med_26.blue,
.robo_med_22.blue,
.robo_med_16.blue,
.robo_med_12.blue {
    color: #007bff;
}

.robo_med_26.gray,
.robo_med_22.gray,
.robo_med_16.gray,
.robo_med_12.gray {
    color: #c0c0c0;
}

.roboto_bold_base,
.robo_bold_26,
.robo_bold_22,
.robo_bold_16,
.robo_bold_12 {
    font-family: "Knockout_Light";
    color: #1a1a1a;
}

.robo_bold_26 {
    font-size: 26px;
}

.robo_bold_22 {
    font-size: 22px;
}

.robo_bold_16 {
    font-size: 16px;
}

.robo_bold_12 {
    font-size: 12px;
}

.robo_bold_26.blue,
.robo_bold_22.blue,
.robo_bold_16.blue,
.robo_bold_12.blue {
    color: #007bff;
}

.robo_bold_26.gray,
.robo_bold_22.gray,
.robo_bold_16.gray,
.robo_bold_12.gray {
    color: #c0c0c0;
}

.home_header {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/wallpaper/bricks.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.home_header .listen-us-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: 1px solid white;
    padding: 0.5rem 1rem;
}
@media only screen and (max-width: 600px) {
    .home_header .listen-us-wrapper {
        padding: 0.2rem 0.5rem;
    }
}
.home_header .listen-us-wrapper .red-dot {
    width: 15px;
    height: 15px;
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    -webkit-animation-duration: 1s;
}
.home_header .listen-us-wrapper .listen-us {
    font-family: "Knockout_Bold";
    font-size: 1rem;
    background: transparent;
    color: white;
    text-decoration: none;
}
.home_header .listen-us-wrapper:hover {
    background: #cef576;
    color: black;
}

.home_cards {
    position: relative;
    display: flex;
    gap: 2rem;
}
.home_cards .card {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 10px;
    background: transparent;
}
.home_cards .card img {
    border-radius: 10px;
    filter: grayscale(100%);
}
.home_cards .card img:hover {
    filter: inherit;
}
.home_cards .card .detail-card {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.home_cards .card .detail-card h1.neon-text {
    position: relative;
    color: #b7c88f;
    font-family: "Knockout_Bold";
    font-size: 2rem;
    text-shadow: 0 0 1rem #cef576;
}
.home_cards .card .detail-card h1.neon-text::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    color: #cef576;
    filter: blur(15px);
    z-index: -1;
}
.home_cards .card .detail-card h1.neon-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cef576;
    opacity: 0.5;
    filter: blur(20px);
    z-index: -2;
}
.home_cards .card:hover {
    -webkit-box-shadow: 0px 0px 40px 15px rgba(237, 111, 135, 0.29);
    box-shadow: 0px 0px 40px 15px rgba(237, 111, 135, 0.29);
}

.intro {
    margin-top: 3rem;
}
.intro .episode_divisor {
    margin-top: 1rem;
    border: 1px solid #cef576;
    width: 25%;
    height: 1px;
}
.intro .episode_title {
    font-family: "Knockout_Bold";
    font-size: 28px;
    line-height: 36px;
    margin: 20px 0px;
}

.episodes_container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: black;
    color: white;
    padding: 1rem 3rem;
}
@media only screen and (max-width: 600px) {
    .episodes_container {
        padding: 0.5rem 1.5rem;
    }
}
.episodes_container .episode {
    border-bottom: 1px solid #cef576;
    padding: 2rem 1rem;
}
@media only screen and (max-width: 600px) {
    .episodes_container .episode {
        padding: 0.5rem 0.2rem;
    }
}
.episodes_container .episode .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.episodes_container .episode .detail-wrapper {
    display: flex;
    flex-direction: column;
}
.episodes_container .episode .detail-wrapper .overtitle {
    font-weight: 500;
}
.episodes_container .episode .detail-wrapper .title {
    font-size: 2rem;
    font-weight: 500;
    font-family: "Knockout_Light";
}
.episodes_container .episode .detail-wrapper .description {
    font-weight: 200;
}
.episodes_container .episode .detail-wrapper .bottom {
    display: flex;
    padding: 1rem;
}
@media only screen and (max-width: 600px) {
    .episodes_container .episode .detail-wrapper .bottom {
        justify-content: center;
        align-items: center;
    }
}
.episodes_container .episode .detail-wrapper .bottom a {
    margin-left: auto;
    background-color: #cef576;
    color: black;
    padding: 0.7rem;
}
@media only screen and (max-width: 600px) {
    .episodes_container .episode .detail-wrapper .bottom a {
        margin-left: inherit;
        width: 100%;
        text-align: center;
    }
}
.episodes_container .episode:hover {
    background-color: #cef576;
    color: black;
    border-bottom: 1px solid rgba(0, 0, 0, 0.224);
}
.episodes_container .episode:hover .detail-wrapper .bottom a {
    background-color: black;
    color: white;
}

.video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.video-wrapper h1 {
    color: white;
}
.video-wrapper video {
    width: 620px;
    height: 440px;
    border: 1px solid #cef576;
    margin: 1rem;
}
@media only screen and (max-width: 600px) {
    .video-wrapper video {
        width: 100%;
        height: auto;
    }
}

.footer_wraper {
    background-color: #cef576;
}
.footer_wraper .footer-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}
@media only screen and (max-width: 600px) {
    .footer_wraper .footer-title {
        align-items: center;
    }
}
.footer_wraper .footer-title .divisor {
    width: 20%;
    border: 1px solid black;
    height: 1px;
}
.footer_wraper .footer-title h3 {
    font-family: "Knockout_Light";
    color: black;
    font-size: 3rem;
}
.footer_wraper .footer-title h6 {
    font-family: "Knockout_Light";
    color: black;
    font-size: 1.4rem;
}

.footer_wraper .footer-title .mail-link {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer_wraper .footer-title .mail-link img {
    width: 40px;
    height: 40px;
}

@media only screen and (max-width: 600px) {
    .footer_wraper .footer-title h3 {
        font-size: 2rem;
    }
    .footer_wraper .footer-title h6 {
        font-size: 1rem;
    }
}
.footer_wraper .icons-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 2rem;
    padding: 1.5rem;
}
.footer_wraper .icons-container .icon {
    cursor: pointer;
}
.footer_wraper .icons-container .icon img {
    width: 50px;
    height: 50px;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.glow {
    font-family: "Knockout_Light";
    margin-top: 2rem;
    font-size: 50px;
    color: #fff;
    text-align: center;
    animation: glow 1s ease-in-out infinite alternate;
}
@media only screen and (max-width: 600px) {
    .glow {
        font-size: 27px;
    }
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fdb4ca, 0 0 20px #fdb4ca, 0 0 30px #871618, 0 0 40px #871618, 0 0 50px #871618,
            0 0 60px #871618, 0 0 70px #871618;
    }
    to {
        text-shadow: 0 0 20px #fdb4ca, 0 0 30px #e23e64, 0 0 40px #ff4da6, 0 0 50px #e23e64, 0 0 60px #e23e64,
            0 0 70px #e23e64, 0 0 80px #e23e64;
    }
}

.mob_hidden {
    display: block;
}
@media only screen and (max-width: 767px) {
    .mob_hidden {
        display: none;
    }
}

.tab_hidden {
    display: block;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .tab_hidden {
        display: none;
    }
}