Project-XR-website/docs/.vuepress/layouts/styles/index.scss

:root {
  --vp-c-text: #171923;
  --vp-c-accent: #171923 ;
  --back-to-top-c-icon: #171923;
  --navbar-height: 5rem;
  --vp-c-accent-bg: #171923;
  --vp-c-accent-hover: #171923;
  --light-pink: #bdb0bc;
  --px-bg-color: #ecebec;
  --cool-gray: #8e98a4; 
  --content-width: 1400px;
  // --vp-c-bg: #ecebec;
}
// $content-width: 50px;
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
       url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
  font-weight: 600;
  font-style: normal;
}

.vp-page .theme-default-content { 
  max-width: 100%;
  display: grid;
  // max-width: 1200px;
  margin: 0;
  padding: 0;
  // border: solid black 5px;
  // margin-top: 0 !important;
}


::-webkit-scrollbar {
  display: none;
}
html {
  scroll-behavior: smooth;

}
body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--px-bg-color);

  // overflow: hidden;
}




section {
  margin-bottom: 30%;

}

.vp-navbar {
  background-color: #ecebec;
}

.vp-page-meta {
  position: absolute;
}

.vp-page {
  display: flex;
  justify-content: center;
  padding-bottom: 0;
}


button.vp-toggle-color-mode-button {
  display: none ;
}

.theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
  margin-top: 0 !important;
;
}

h1, h2,  h3, p {
  // margin-top: 0 !important;
  margin-bottom: 0px !important;
  padding: 0 !important;
  border: 0;
  color: var(--vp-c-text);
  
}

h1 {
  font-size: 35px;
}
h3 {
  font-size: 1.5vw;
}

a {
  font-weight: 600;
}
button {
  color: black;
  width: 15vw;
  height: 5vw;
  font-size: 20px;
  font-weight: 600;
  background-color: #ecebec;

  border-radius: 5px;
  transition: scale 0.2s ease;

}

button:active {
  background-color: #d0d0d0;
  scale: 0.95;
}


@media (max-width: 768px) { 
  h1 {
    font-size: 20px;
  }
  p {
    font-size: 10px;
  }
  // h1, h2,  h3, p {
  //   font-size: 1vw;
  // }
}
@media (max-width: 419px) { 
  .theme-default-content h1 {
    font-size: 15px;

  }
  p {
    font-size: 10px;
  }
  .my-button {
    font-size:10px;
  }
}