:root {
    --primary: #34a7ff; 
    --white: #fffffe; 
    --black: #141414; 
    --grey: #9ba4ad;
    --red:#ef4565;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Maven Pro', sans-serif;
    font-size: 1.6rem;
    background-color: var(--black);
    color:var(--white);
    padding-top: 15rem;
}

.container {
    width: 95%;
    max-width: 120rem;
    margin: 0 auto;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    padding:0;
    list-style: none;
    margin: 0;
}

.btn {
    all:unset;
    text-align: center;
    padding:1rem 2rem;
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-size:1.8rem;
    transition: transform .3s ease-in-out;
    font-weight:700;
    /* margin-top: 5rem; */
}

@media (min-width: 768px) { 
    .btn:hover {
        transform: scale(1.1);
    }
}

p {
    margin: 2rem 0;
    /* margin:2rem 0; */
    font-size: 1.8rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin:0;
}

h1 {
    font-size:3.6rem;
    font-weight:700;
    line-height: 1.2;
}

h2 {
    font-size:3.2rem;
}

h3 {
    font-size:2.8rem;
}

.border-heading::after {
    content: " ";
    display: block;
    width: 100%;
    border-bottom: .4rem solid var(--white);
}

section {
    margin-bottom: 5rem;
    scroll-margin-top: 7rem;
}

main, footer {
    scroll-margin-top: 7rem;
}

a {
    text-decoration: none;
    color: var(--white);
}

/* .observer{
    pointer-events: none;
    z-index: 1000;
    border: 4px solid red;
    position: fixed;
    height: 10px;
    top: 30%;
    left:0;
    right:0;
    bottom: 70%;
} */

/* width */
::-webkit-scrollbar {
    width: 1rem;
}
  
  /* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 .5rem var(--grey); 
    border-radius: 1rem;
}
   
  /* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary); 
    border-radius: 1rem;
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--red)  ; 
}