body, html{
    padding:0;
    margin:0;
    user-select: none;
    background-color: var(--body-bg);
    width:100vw;
    height:100vh;
    /* overflow-x:hidden; */
    box-sizing:border-box;


    /* scroll-behavior: smooth; */
}
@font-face{
    font-family: 'alpino-bold';
    src: url('../fonts/alpino-bold.woff');
}
@font-face{
    font-family: 'avant-garde';
    src: url('../fonts/AVGARDD_2.TTF')
}
@font-face{
    font-family: 'avant-garde-n';
    src: url('../fonts/AVGARDN_2.TTF')
}
@font-face{
    font-family: 'avant-garde-do';
    src: url('../fonts/AVGARDDO_2.TTF')
}



/* //declare the colors variables */
:root{
    --black: #000000;
    --dark-brown: #B7AB98;
    /* --dark-brown:#9a8e7e; */
    --light-brown:#4d4d4d;
    --body-bg:#111011;
    --orange: #eb5939;
}

a{
    text-decoration:none;
    color:inherit;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.test-block{
    height:100vh;
    width:100vw;
}

#mouse-container{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
}
#mouse{
    position:absolute;
    top:0;
    left:0;
    height:1rem;
    width:1rem;
    border-radius:50%;
    background-color:var(--orange);
    
    top:var(--y );
    left:var(--x );
    transform:translate(-50%, -50%);
}