html, body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling */
    position: relative;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    }

    html::-webkit-scrollbar, body::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
}

header {
    margin: 0px,0px;
    padding: 5px,5px;
    background-color:transparent;
}


body {
    background-color: #302e2e;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.btn , .login-btn {
    background-color: #e70000;
    border: none;
    color: white;
    height:50px ;
    width: 170px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.btn:hover {
    background-color: #eee7e7;
    color: #e70000;
}
.nav-link {
    color: white; 
    margin-left: 20px;
    font-size: 1.1rem;

}



.tile {
    position: absolute;
    top: 90%;
    border-radius: 30px;
    background-color: red;
    opacity: 0.8;
    transform: rotate(45deg); /* Makes it a diamond shape */
    z-index: -1;
}

.tile.one {
    background-color:#e70000;
    width: 500px;
    height:500px;
    margin-top: -34%;
    margin-left: -10%;
    animation-delay: 0s;
}

.tile.two {
    background-color:grey;
    width: 500px;
    height:500px;
    margin-top: -34%;
    margin-left: 30%;
}

.tile.three {
    background-color: #e70000    ;
    width: 500px;
    height:500px;
    margin-top: -34%;
    margin-left: 70%;
}


@media (max-width: 740px) {
    .tile.three {
        display: None;
    }
    .tile.one {
        display: None;
    }

    .tile.two {
        display: None;
    }

    .container.home {
        margin-left: 0%;
        width: 100%;
        max-height: 30%;
        margin-top: 0%;
    }

}

.dropdown-menu .dropdown-item {
    color: white !important; /* Apply the color */
    font-size: larger;
}

.container.home {
    margin-left: 5%; 
    
    /* position: fixed;  */
    border-radius: 20px; 
    background: url('../img/team.jpg') no-repeat;
    background-size:100% 100%;
    /* background-position:100px 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 20px; 
    margin-top: 15%;
    z-index: 3;
    width: 90%;
    height: 80vh;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14vw;
    color:#e70000  ;
    background-color: #302e2e;

    
}
.member{
    color:#e70000  ;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.form-control.mr-sm-2{
    background-color: #302e2e;
    color: white;
    border: 5px solid white;
    border-radius: 20px;
    height: 50px;
    max-width: 400px;
    }
.form-control.mr-sm-2::placeholder {
    color: white;
}


.episode {
    display: flex;
    align-items: left;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    max-width: 100%;
    margin: 20px auto;
    border: none;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.episode img {
    max-width: 50%;
    max-height: 100%;
    border-radius: 8px;
    margin-right: 16px;
}

.episode .description {
    font-size: 1.2em;
    color: #dfe0ef;
    min-height: 100px;
    line-height: 0.8px;
    margin-bottom: 8px;
}

.episode .title {
    color: #f5f5f5;
}


.episode .text {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
}

.episode .read.more {
    text-decoration: none;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
}


@media ((max-width: 320px)) {
    .col-md.h {
        width: 150px;
    }
}


.navbar-brand {
    max-height: 100px;
}

@media (max-width: 950px) {

    .navbar-brand {
        max-height: 10vw;
    }
}