body{
    background-image: url(./asset/background.jpg);
    background-size: cover,;
    background-repeat: no-repeat;
    background-position: 20% 50%;
        background-attachment: fixed;
    }
.menubar{
    display:flex;
    justify-content: center;
    
}

nav{
    background: linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#1d1d1d 55%,#202020 98%,#000 100%);
  box-shadow: rgba(0,0,0,.3) 0 3px 8px;
  border-left: 1px solid #4b4b4b;
  border-right: 1px solid #4b4b4b;
  border-bottom: 1px solid #000;
  padding: 2px 5px 4px 5px;
  font-weight: 2rem;
  font-family: "Segoe UI Semilight",Tahoma,Geneva,Verdana,sans-serif,Arial,Helvetica,sans-serif;
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
  position: relative;  
  font-size: 16.3px;
  color: #dadada;
     list-style-type: none;
     margin-top: 4px;
    margin-bottom: 0px; /* space between content and nav bar */ 
}
.container4banner{
    display: flex;
    justify-content: center;

}
.banner {
    background-image: url(./asset/2.png);
    max-width: 1300px;
    width:100%;
    height: 300px;
    background-size:cover;
    background-position: 30% 17%;
    display: grid;
    align-items: center;
    box-shadow: 20px 20px 20px black;

}
nav ul{
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 30px;
    margin: 0;
    padding: 15px;


}
    nav ul a{
        color: #dadada;
        text-decoration: none;
    }
    input{
        padding: 8px 15px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        
    }
    nav ul .search {
        margin-left:auto
    }

h1 {
    color: #e9e9e9;
      font-family: "Segoe UI Semilight",Tahoma,Geneva,Verdana,sans-serif,Arial,Helvetica,sans-serif;
      
     font-size: 3rem;
      display: grid;
  justify-items:flex-end;

     padding:30px;

  text-shadow: 4px 5px 4px #000000;





}
.foreground{

background-color: #e0e0e0;
    padding: 30px 50px; /* Adjust padding as needed */
    padding-top: 2%;
    margin: 0 auto;
    max-width: 1200px; /* Or whatever width you want */
    min-height: 100vh; /* Ensures it has some height even when empty */
    display: flex;
      box-shadow: 0 0 10px 0 black;
}


*/ 
nav ul li a {
    padding: 13px 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.25);
    color: #fff;
}

.Hdivider{
   border: 1px solid #ccc; /* Adds a thin bottom border */
  margin: 20px 0; /* Adds vertical spacing */


}

.Vdivider{
justify-content: start;
height: 100vh; 
width: 1px;
margin-left: 50px;
margin: 30px;
background-color: #a9a9a9;



}
.main-content{
    flex:3.5;
    padding: 20px;

    

}
.side-content {
    flex:1;
padding: 10px;

}


.text_feild{
    display: inline-block;
    border: 4px solid;
   
      border-top: 10px solid #174c6f;      /* Light on top */
    border-left: 10px solid #7ba4c0;     /* Light on left */
    border-right: 10px solid #022742;    /* Dark on right */
    border-bottom: 10px solid #003154;   /* Dark on bottom */
      box-shadow: 0 0 10px 0 black;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;

margin: auto;
      background: url(asset/vectordelia_65.jpg), linear-gradient(to bottom, #908c8c 0%, #c8c8c8 100%);
     
      background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
      background-position-x: center;
background-position: center;
background-size: cover;
}


.text_feild img {
margin: 10px;
width: 650px;
margin-top: 20px;
      box-shadow: 0px 3px 5px  black;


}
.thumbnail {
  background-color: #c9c9c9;
margin: 10px;
width: 650px;
height: 400px;
margin-top: 20px;
      box-shadow: 0px 3px 5px  black;
}

.text_feild h3{
    margin: 0 0 0.8rem 0;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 108px;
  color: #0e213c;
  line-height: 1.3;

  
  

    
}

.meta {
     color: #5e5e5e;
    text-align: start;}

.exerpt {  margin: auto;
    font-family:Arial, Helvetica, sans-serif;  font-size: 1.25rem;
  color: #131313;
  line-height: 1.6;

  max-width: 
  500px; 
  white-space: nowrap;
  gap: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px;
}


.read-more {
  color: #090c0b;
  font-weight: bold;
  text-decoration: none;
  padding-right: 0.5rem;
  border-right: 1px solid #ccc;
}


.views, .comments {
  color: #888;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.views::before {
  content: "👁";
}

.comments::before {
  content: "💬";
}

.titlenews{
      font-family: "Arial", sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #333333;
}

.Hdivider {
   border: 1px solid #ccc; /* Adds a thin bottom border */
  margin: 60px 0; /* Adds vertical spacing */
  max-width: 70%;

}

.main-content {
    background-image: url(asset/534371.png);
    background-position-y: -1000;
    background-position-x: -400px;
    background-repeat: no-repeat;
background-size: 600px;
padding-top: 10rem;



}


.blog-header {
  position: absolute;
  display: inline-block;
  margin: 2%;
}

.blog-header-box {
  position: relative;
  z-index: 2;
left: 110%;
bottom: 180px;
}

/* the justin beiber block header */
.blog-header-box h2 {
    
  margin: 0;
  font-family: 'Arial Black', 'Impact', sans-serif;
  font-size: 1.93rem; /*size*/
  font-weight: bold;
  color: #36465D; /* dark purple */
  background: linear-gradient(to bottom, #f0f0f8 0%, #d8d8e8 50%, #c8c8d8 100%);
  border: 4px solid #5d74a3;
  border-radius: 0px;
  padding: 1rem 2.0rem; /* HxW bogger or smaller box*/
  letter-spacing: 0.08em;
  text-transform: capitalize;
  box-shadow: 
    0 8px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);

}