body{
    font-size: x-large;
    background-image: linear-gradient(rgb(87, 77, 77),rgb(59, 52, 52));
}


.header{
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: white;
    border-style: solid;
}

a{
    color: white;
}


.nav-Right{
    margin-left: auto;
}

.content{
    color: white;
}

.videos{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 25px;
    width: 203%;
}

.videoCard{
    display: flex;
    gap: 10px;
    border-style: none;
    flex: 0 0 auto;
    width: 250px;
}

.videoCard .thumbnail {
    width: 200px;     /* fixed width */
    height: 110px;    /* fixed height */
    object-fit: cover; /* makes sure it crops nicely without stretching */
    border-radius: 6px; /* optional, looks nicer */
}

.videoCard p{
    width: 250%;
    color: white;
}

.videoCard a{
    color: white;
    text-decoration: none;
}

.author{
    opacity: 50%;
}

.topPageChannel img{
    width: 10%;
    border-radius: 50%;
}
.topPageChannel{
    display: flex;
    gap: 10px;
    align-items: center;
}


.user img{
    border-radius: 50%;
}

.pfp{
    width: 20%;
    border-radius: 50%;
}

.interactions{
    display: flex;
    width: 100%;
    height: 4%;
}

.interactions img{
    width: 20%;
}

.subscribe-box a{
    font-size: xx-large;
}

#toggle-menu{
    font-size: x-large;
    float: right;
    margin-right: 20px;
}

.header form input{
    height: 40%;
    font-size: x-large;
    border-width: 5px;
}

.header form button{
    height: 20%;
}