:root{
--clr-1:#0d3b66;
--clr-2:#faf0ca;
--clr-3:#f4d35e;
--fw-400:400;
--fw-700:700;
--fw-900:900;
--ff-regular:'Poppins, sans-serif';
--ff-style:"Bitcount Single Ink, system-ui";
}
*{
    padding:0px;
    margin:0px;
    box-sizing:border-box;
    font-family:var(--ff-regular);
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
header{
    padding:1rem 2rem;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--clr-2);
}
header .navbar{
    display:flex;
    justify-content:space-around;
    align-items:center;
}
header .navbar .logo{
    color:var(--clr-1);
    font-weight:var(--fw-900);
    font-size:2em;
    padding:10px 15px;
}
header .navbar .logo span{
    color:var(--clr-3);
    margin:-8px;
}
header .navbar .nav-item, header .navbar .nav-btn{
    padding:10px 15px;
    border-radius:15px;
    cursor:pointer;
}
header .navbar a{
    color:var(--clr-1);
    font-weight:var(--fw-700);
    padding:10px 15px;
    font-size:15px;
}
header .navbar .nav-item:hover{
    background:var(--clr-1);
}
header .navbar .nav-item:hover a{
    color:var(--clr-2);
}
header .navbar .nav-btn{
    background:var(--clr-3);
}
.vb-image{
    width:100%;
    height:100%;
}
.Homepage{
     padding:5em 0;
}
.Homepage .intro{
    background:url(../library/introbg.jpg);
    background-size:cover;
    align-items:center;
    padding:5em 1em;
}
.Homepage .intro p{
    width:57rem;
   padding:5px 4em;
   font-size:18px;
   line-height:35px;
  color:var(--clr-1);
  letter-spacing:2px;
}
.Homepage .intro h1{
    text-transform:uppercase;
    text-shadow:1px 2px 3px rgba(255,255,255,.2), 2px 3px 4px rgba(255,255,255,.3);
    color:var(--clr-1);
    width:57rem;
   padding:1em 2em;
   line-height:45px;
}
.Homepage .intro .link{
    padding:30px 4em;
}
.Homepage .link a{
    padding:10px 20px;
    border:1px solid var(--clr-1);
    border-radius:15px;
    color:var(--clr-1);
    font-weight:700;
    letter-spacing:2px;
}
.Homepage .link a:hover{
 border:1px solid var(--clr-3);
 background:var(--clr-3);
}
.Homepage .collection{
    display:grid;
    grid-template-columns:auto auto;
    gap:40px;
    background:var(--clr-1);
    color:var(--clr-2);
}
.Homepage .collection .coll-img{
    padding:4rem;
}

.Homepage .collection .coll-text{
    padding:6rem 4rem;
}
.Homepage .collection .coll-text p{
    padding:20px 0px;
     font-size:16px;
   line-height:35px;
   letter-spacing:1px;
  text-align:justify;
}
.Homepage .collection .coll-text h1{
    text-align:justify;
}
.Homepage .collection .link a{
    color:var(--clr-2);
    border:1px solid var(--clr-2);
}
.Homepage .collection .link a:hover{
    color:var(--clr-1);
}