styles.css

:root {
    /* --color1: #FA9F42; */
    --color1: black;
    --color2: #721817;
    /* --color3: #2B4162; */
    --color3: white;
    --highlight0: #FF000088;
    --highlight1: #FFA50088;
    --highlight2: #FFFF0088;
    --highlight3: #00800088;
    --highlight4: #0000FF88;
    --highlight5: #4B008288;
  }


@font-face {
font-family: 'Inter';
src:  url('font/Inter/Inter-Black.woff') format('woff'),
url('font/Inter/Inter-ExtraLight.woff') format('woff'),
url('font/Inter/Inter-Regular.woff') format('woff'),
url('font/Inter/Inter-Bold.woff') format('woff'),
url('font/Inter/Inter-Light.woff') format('woff'),
url('font/Inter/Inter-SemiBold.woff') format('woff'),
url('font/Inter/Inter-ExtraBold.woff') format('woff'),
url('font/Inter/Inter-Medium.woff') format('woff'),
url('font/Inter/Inter-Thin.woff') format('woff');
  }

@font-face {
font-family: 'InterMedium';
src: url('font/Inter/Inter-SemiBold.woff') format('woff');
}

a {
    text-decoration: unset;
    color: unset;
}

body{
    font-family: 'Inter';
    color:var(--color1);
    background-color: var(--color3);
}

#verse{
    font-family: 'InterMedium';
    user-select: text;
    -webkit-user-select: text;
}

.inner-body {
    margin: auto;
    width: 35%;
    padding-top:20%;
  }

#date{
    font-weight:900;
    font-size:20px;
    color:var(--color1)
}







.highlight-button{
  width: 25px;
  aspect-ratio: 1;
  border-radius: 100px;
}


.highlight-ui{
  transition: opacity 0.5s ease-in-out;
}


.highlight-0 {background-color: var(--highlight0);}
.highlight-1 {background-color: var(--highlight1);}
.highlight-2 {background-color: var(--highlight2);}
.highlight-3 {background-color: var(--highlight3);}
.highlight-4 {background-color: var(--highlight4);}
.highlight-5 {background-color: var(--highlight5);}

#highlight0{background-color: var(--highlight0);}
#highlight1{background-color: var(--highlight1);}
#highlight2{background-color: var(--highlight2);}
#highlight3{background-color: var(--highlight3);}
#highlight4{background-color: var(--highlight4);}
#highlight5{background-color: var(--highlight5);}


.top-container{
  display:grid;
  grid-template-columns: 30% auto;
}

.speaker{
  width: 80%;
  margin:auto;
  object-fit: cover;
  object-position: top;
  border-radius: 100px;
  aspect-ratio: 1;
}

/* .highlight-container{

} */