.head {}

.bodyclass {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.container1 {
    display: flex;
    justify-content: space-between;
    height: 7vh;
    overflow: hidden;
}

.menu {

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
}

.navsearch {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navsearch form {
    align-items: center;
    display: flex;
}

.threebarbutton {
    border: none;
    background-color: white;
}

.youtubeicon {
    width: 92px;
}

.threebar {
    margin-left: 5px;
    margin-right: 15px;
    margin-top: 2px;
    width: 28px;
    height: 23px;
    cursor: pointer;
}


.createicon,
.bellicon {
    width: 24px;
    margin: 0px 6px;
}

.search {
    width: 64px;
    height: 40px;
    cursor: pointer;
    background-color: whitesmoke;
    border: 1px solid #d3d3d3;
}

.searchbar {
    height: 35px;
    width: 40vw;
    margin-left: 58px;
    border: 1px solid #d3d3d3;
    padding-left: 7px;
}

.bell {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.profile {
    width: 35px;
    border-radius: 20px;
}

.bell1,
.bell2,
.mainprofile {
    background: none;
    border: none;
}

.box2 {
    display: flex;
    flex-direction: column;
    width: 20vw;
}

.style-scope yt-icon {
    display: flex;
    flex-direction: column;
}


.box3 {
    width: 20vw;
    border-top: 1px solid #ccc;
}

.container2 {
    overflow-y: auto;
    overflow-x: hidden;
    width: 17vw;
    height: 93vh;
}

.container2::-webkit-scrollbar {
    background-color: transparent;
    width: 15px;
}


.container2::-webkit-scrollbar-track {
    background-color: transparent;
}

.container2::-webkit-scrollbar-thumb {
    border-radius: 20px;
    border: 4px solid transparent;
    background-color: transparent;
    background-clip: content-box;
}


.container2:hover::-webkit-scrollbar-thumb {
    background-color: rgba(27, 11, 11, 0.2);
}

.box4 {
    display: flex;
    flex-direction: column;
    width: 20vw;
    border-top: 1px solid #ccc;
}

.box5 {
    display: flex;
    flex-direction: column;
    width: 20vw;
    border-top: 1px solid #ccc;
}


.box6 {
    display: flex;
    flex-direction: column;
    width: 20vw;
    border-top: 1px solid #ccc;

}


.box7 {
    display: flex;
    flex-direction: column;
    width: 20vw;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

}

.box7button,
.box6button,
.box5button,
.box4button,
.homebutton2 {
    border: none;
    width: 20vw;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0px 20px 0px 20px;
}

.homebutton {
    display: flex;
    background-color: white;
    align-items: center;
    border: none;
    padding: 0px 20px 0px 20px;
}

.container2 .Names {
    background: none;
    border: none;
    font-size: 7px;
    display: flex;
    color: rgba(97, 95, 95, 0.995);

}

.box8 p {
    font-size: 12px;
    text-align: initial;
    margin: 0;
    margin-left: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #8b8888;
    margin-top: 10px;
}

.homebutton p,
.homebutton2 p,
.box4button p,
.box5button p,
.box6button p,
.box7button p {
    margin-left: 20px;
}


.container3 nav {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    height: 7vh;
}


.style2 {
    border: 1px solid lightgrey;
    border-radius: 58px;
    padding: 6px 10px;
    background-color: #ebebeb;
    cursor: pointer;
    width: auto;
    height: 33px;
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px;

}

.main {
    display: flex;
    overflow: hidden;
    height: 100%;
}

.container3 {
    width: 83vw;
    border-top: 1px solid #ccc;

}

.videos {
    display: grid;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ebebeb;
    grid-template-columns: repeat(4, 1fr);
    height: 84vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 17px;
    padding-bottom: 0px;
}

.ingridients {
    display: flex;
    width: 80%;
}

.hat h1 {
    font-size: 13px;
    margin: 10px;
    text-align: left;
    width: 96%;


}

.hat p {
    display: flex;
    margin: 2px -9px 1px 3px;
    color: grey;
}

.contentbtn {
    background: none;
    border: none;
    margin: 4px 0px;
    padding: 0px;
}

.contents {
    margin-left: 5px;
    margin-right: 5px;

}

#google {
    color: rgb(201, 183, 183);
    margin-left: 25px;
}

.microphone {
    border: none;
    background-color: white;
    cursor: pointer;
}

.voiceicon {
    height: 25px;
    width: 25px;
    border: 8px solid whitesmoke;
    border-radius: 30px;
    background-color: whitesmoke;
}


.searchbar:hover,
.search:hover,
.style2:hover,
.contentbtn:hover,
.box7button:hover,
.box6button:hover,
.box4button:hover,
.homebutton2:hover,
.homebutton:hover,
.box2-esasy:hover {
    background-color: #ccc
}

.box2-esasy {
    background: none;
    border: none;
    display: grid;
    justify-items: center;
    width: 100%;
    font-size: 10px;
    padding: 10px 0px;

}

.box2-main {
    justify-items: center;
    width: 100%;
}

.box8-button {
    background: none;
    border: none;
}



@media (max-width:1313px) {

    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8,
    #google {
        display: none;
    }

    .container2 {
        width: 10vw;
    }

    .container3 {
        width: 90vw;
    }

}

@media (min-width:1313px) {


    .videos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding-bottom: 35px;
    }

    .box2-main {
        display: none;
    }

}


@media (max-width:1000px) {
    .videos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:800px) {
    .videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .searchbar {
        width: 20vw;
    }

    .container3 {
        width: 100%;
    }
}

@media(max-width:600px) {
    .videos {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .searchbar {
        display: none;
    }

    .searchbar {
        display: none;
    }

    .remove {
        pointer-events: none;
        display: block;
        background: none;
        border: none;
        margin: 0px 6px;
    }

    .microphone,
    .search {
        display: none;
    }


}

@media (max-width:700px) {
    .container2 {
        display: none;
    }
}

@media (min-width:600px) {
    .remove {
        display: none;
    }
}

@media (max-width:400px) {
    .remove {
        display: none;
    }
}