@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jersey+10&display=swap');

:root{
  --grad1: linear-gradient(150deg, var(--accent1), var(--accent3), var(--accent2) 80%);
    --grad2: linear-gradient(90deg, var(--accent1), var(--dark) 80%);
    --grad3: linear-gradient(-90deg, var(--accent1), var(--dark) 80%);
  --accent1: #591db0;
    --accent2: #8b3bff;
    --accent3: #d936e7;
    --accent4: #74cbdc;
    --white: #fff;
    --white1: #ddd;
    --dark: #111;
    --dark1: #222;
    --dark4: #1b0448;
}

body {
  background-image: url("https://i.imgur.com/HQEymFM.png");
  background-size:cover;
}

.acch1{
  font-family:'jersey 10';
  font-size:64px;
  font-weight:500;
  line-height:10px;
}

main{
  height: 500px;
  width: 400px;
  background-color: var(--dark);
  color:white;
padding:20px;
  border-radius: 25px;
  border: 1px solid var(--accent1);
  outline: 1px solid var(--accent1);
  outline-offset: 5px;
}

.container{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height:100vh;}

.mainbody{
  height:100%;
  overflow:auto;
}

.accvid{
  opacity:0.8;
}

::-webkit-scrollbar {
    width: 7px;
    height: 5px;
    border-radius: 6px;
    border: 1px solid var(--accent1);
    padding: 1px
}

::-webkit-scrollbar-track {
    background-color: var(--dark2);
    border-radius: 6px
}

::-webkit-scrollbar-thumb {
    background: var(--grad1);
    border-radius: 10px;
    border: 2px solid var(--dark);
    outline: 1px solid var(--accent1)
}