body{
    margin: 0;
    font-size: 1rem;
    font-family: cursive;
}
#bgVid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
/* Set the width and height of the scrollbar */
::-webkit-scrollbar{
    width: 12px;
    height: 12px;
}
/* Track (the area behind the thumb) */
  ::-webkit-scrollbar-track {
    background-color: rgb(242, 242, 242, 0.3);
}
  
  /* Handle (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background-color:darkred;
    border-radius: 6px;
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: red;
    box-shadow: 0 0 10px  rgba(85, 85, 85, 0.8);
}
.container-main{
    display: grid;
    grid-template-rows: repeat(5 1fr);
    height: auto;
}
.header{
    grid-row: 1 / 2;
    text-align: center;
    color: white;
    text-shadow: 5px 5px 4px black; 
    background:linear-gradient(to bottom, rgba(128, 0, 128, 0.5) 50%, rgba(0, 0, 255, 0.5));
}
.navigate{
    grid-row: 2 / 3;
    background:linear-gradient(to bottom, rgba(0, 0, 255, 0.5), rgba(0, 255, 242, 0.5));
}
.navbar{
    display: flex;
    justify-content: space-evenly;
}
.nav-icon{
    width:50px;
    height:50px;
    position: relative;
    bottom:10px;
    filter: invert(1);
    
}
.nav-item{
    text-align: center;
    text-decoration: none;
    color:white;
    filter: drop-shadow(5px 5px 3px black);
}
.nav-item:hover{
    color: black;
    filter: drop-shadow(5px 5px 3px white);
}
.nav-icon:hover{
    filter: invert(0);
}
.activeNav{
    border: 3px dashed white;
    padding: 5px;
    border-radius: 30px;
    filter: drop-shadow(5px 5px 3px black);
}
.para{
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background:linear-gradient(to bottom, rgba(0, 255, 242, 0.5), rgba(100, 205, 86, 0.5));
}
.para1{
    grid-column: 1 / 2;
    display: flex;
    justify-content: center;
}
.para3{
    grid-column: 2 / 3;
    font-size: 1.5rem;
    color: white;
    text-shadow: 5px 5px 4px black; 
}
.socials1, .socials2, .socials3{
    filter: drop-shadow(3px 3px 4px black);
}
.socials1:hover, .socials2:hover, .socials3:hover{
    filter: drop-shadow(3px 3px 4px white);
}
.container{
    grid-row: 4 / 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
    text-align: center;
    background:linear-gradient(to bottom, rgba(100, 205, 86, 0.5), rgba(193, 167, 53, 0.5));
}
.edit-link{
    text-decoration: none;
    font-size: 1.5rem;
    color:white;
    text-shadow: 5px 5px 4px black; 
}
#price{
    font-size: 1.5rem;
    color:white;
    text-shadow: 5px 5px 4px black; 
}
.footer{
    grid-row: 5 / 6;
    background:linear-gradient(to bottom, rgba(193, 167, 53, 0.5),  rgba(128, 128, 128, 0.5));
    color: white;
    text-align: center;
    text-shadow: 5px 5px 4px black; 
}
.pfp{
    width: 20rem;
    border-radius: 50%;
    filter: drop-shadow(5px 5px 4px black);
    transition: border-radius 0.3s ease-in;
    transition: filter 0.3s ease-out;
}
.pfp:hover{
    border-radius: 30%;
    filter: drop-shadow(5px 5px 4px white);
}
.image{
    width: 100%;
    border-radius: 50px;
    filter: drop-shadow(5px 5px 4px black);
    transition: border-radius 0.4s ease-in;
    transition: filter 0.3s ease-out;
}
.image:hover{
    border-radius: 100px;
    filter: drop-shadow(5px 5px 4px white);
}
@media only screen and (max-width: 1400px) and (min-width: 1300px){
    .container-main{
        height:2000px;
    }
    
}
@media only screen and (max-width: 1300px) and (min-width: 1200px){
    .container-main{
        height:2000px;
    }
}
@media only screen and (max-width: 1200px) and (min-width: 1200px){
    .container-main{
        height:2000px;
    }
}
@media only screen and (max-width: 1100px) and (min-width: 1000px){
    .container-main{
        height:2000px;
    }
}
@media only screen and (max-width: 1000px) and (min-width: 900px){
    .container-main{
        height:2000px;
    }
}
@media only screen and (max-width: 900px) and (min-width: 800px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
}
@media only screen and (max-width: 800px) and (min-width: 700px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }

}
@media only screen and (max-width: 700px) and (min-width: 600px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
}
  
@media only screen and (max-width: 600px) and (min-width: 500px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
    .pfp{
        width: 16rem;
    }
}
@media only screen and (max-width: 500px) and (min-width: 400px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
    .pfp{
        width: 16rem;
    }
}
@media only screen and (max-width: 400px) and (min-width: 300px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
    .pfp{
        width: 10rem;
    }
}
@media only screen and (max-width: 300px) and (min-width: 200px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
    .pfp{
        width: 10rem;
    }
}
@media only screen and (max-width: 200px) and (min-width: 100px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 0.5rem;
    }
    .pfp{
        width: 10rem;
    }

}
@media only screen and (max-width: 100px) and (min-width: 0px){
    .container-main{
        height:2000px;
    }
    .container{
        grid-template-columns: repeat(1, 1fr);
    }
    #price, .edit-link, .para3, .header{
        font-size: 1rem;
    }
    .pfp{
        width: 10rem;
    }
}