html,body{
    margin: 0;
    padding: 0;
}

header{
    /* height: 100px; */
    background-color: rgb(234, 153, 4);
    padding: 20px;
    position: fixed;
    z-index: 10;
    width: 100%;

   
}

header h1{
    text-align: center;
}



.form-container{
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 1px solid white; */
}



.filter-form > *{
    margin: 0 20px;
    display: inline-block;
}

.filter-form  label {
    font-size: 25px;
    font-weight: bold;
}

select {
    /* width: 220px; */
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background-color: #f0f0f0;
    appearance: none; /* removes default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
}

option {
    background-color: white;
    color: black;
    font-size: 14px;
}

.videofiltersubmit{
    font-size: 15px;
    background-color: rgb(255, 115, 0);
    padding: 10px;
    /* position: relative;
    left: 20px; */
    border-radius: 10px;
    color: white;
    width: 100px;
    border: 1px solid white;
    margin: 0 5px;
}
.videofiltersubmit:hover{
    background-color: rgb(255, 85, 0);
}

body{
    background-color: rgb(54, 54, 54);
    color: white;
   
}

main{
    padding: 200px 40px 80px 40px;
    width: 80%;
    
    margin: 0 auto;
}

.videos-flex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-basis: 320px;
    
}
.video-container{
    margin: 20px 20px;
    /* height: 350px; */
    background-color: rgb(25, 25, 25);
    padding: 10px;
    border-radius: 10px;
    width: 320px;
}

.video-container h3{
    height: 50px;
    padding: 5px;
}
.meta{
    position: relative;
    background-color: rgb(255, 115, 0);
    padding: 10px;
    bottom: 10px;
    font-weight: bold;
   
}



/* pagination */
.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a, .pagination strong {
    margin: 0 5px;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    color: white;
}

.pagination strong {
    background-color: orange;
    color: white;
    background-color: orange;
}

.pagination a:hover {
    background-color: #ddd;
    color: black;
}

.add-area{
    float: right;
   
}

.add-popup{
    display: none;
}

.button-div{
    margin: 25px;
}

.add-btn{
    background-color: rgb(223, 146, 2);
    color: white;
    padding: 10px;
    width: 150px;
    font-size: 18px;
    border-radius: 10px;
}

.add-btn:hover{
    
    background-color: rgb(255, 115, 0);
}

.add{
    background-color: #33333300;
    font-size: 50px;
    box-shadow: none;
    background: none;
    border: none;
    box-shadow: none;
    float: right;
    margin: 20px 0 80px 0;
    /* text-align: right; */
    position: relative;
    left: 100px;
    width: 100px;
    
}

.fa-solid.fa-plus{
    border: 1px solid orange;
    color: orange;
    padding: 20px;
    border-radius: 100%;
    background-color: orange;
    color: white;
    border: 1px solid white;

}

.fa-solid.fa-plus:hover{
    background-color: rgb(255, 136, 0);
    color: white;
    border: 1px solid white;
}

footer{
    height: 100px;
    background-color: rgb(20, 20, 20);
    clear: both;
}