* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: saturate(0);
}

main{
    display: grid;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100vh;
    grid-template-areas: 
    'left middle right'
    'chances chances chances';
    font-family: 'Funnel Display', sans-serif;
}

body {
    margin-top: 4vh;
    background-color: black; /* Black */
    min-height: 100vh;
    color: #333;
    display: grid;
    place-content: center;
    padding: 0;
    overflow: hidden; /* Hide scrollbar */
    font-weight: 300;
}

.bento-grid {
    width: 50vw;
    margin: 1rem;
    display: grid;
    grid-auto-columns: 1;
    grid-auto-rows: 5.1vh; /* overall height is dependent on this */
    gap: 20px;
    grid-template-areas: 
    'box1 box2 box2 box3'
    'box1 box2 box2 box3'
    'box1 box2 box2 box3'
    'box1 box2 box2 box3'
    'box1 box5 box6 box3'
    'box4 box5 box6 box3'
    'box4 box5 box6 box3'
    'box4 box7 box8 box8'
    'box4 box7 box8 box8'
    'box4 box7 box8 box8';
}

.bento-grid .container {
    /* border-radius: .9rem; */
    overflow: hidden;
}

/* setting up colors */

.bento-grid .container:nth-child(1) {
    background-color: #7f8c8d; /* Asbestos */
}

.bento-grid .container:nth-child(2) {
    background-color: #95a5a6; /* Concrete */
}

.bento-grid .container:nth-child(3) {
    background-color: #bdc3c7; /* Silver */
}

.bento-grid .container:nth-child(4) {
    background-color: #d5d8dc; /* Light Grey */
}

.bento-grid .container:nth-child(5) {
    background-color: #ecf0f1; /* Clouds */
}

.bento-grid .container:nth-child(6) {
    background-color: #f2f3f4; /* White Smoke */
}

.bento-grid .container:nth-child(7) {
    background-color: #e5e8e8; /* Gainsboro */
}

.bento-grid .container:nth-child(8) {
    background-color: #f7f9f9; /* Snow */
}

/* code everybox */

.bento-grid .container:nth-child(1) {
    grid-area: box1;
}

.bento-grid .container:nth-child(2) {
    grid-area: box2;
}

.bento-grid .container:nth-child(3) {
    grid-area: box3;
}

.bento-grid .container:nth-child(4) {
    grid-area: box4;
}

.bento-grid .container:nth-child(5) {
    grid-area: box5;
}

.bento-grid .container:nth-child(6) {
    grid-area: box6;
}

.bento-grid .container:nth-child(7) {
    grid-area: box7;
}

.bento-grid .container:nth-child(8) {
    grid-area: box8;
}

/* .container {
    display: flex;
    gap: 2rem;
} */

#chances {
    text-align: center;
    color: white;
    font-size: 4vh;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    font-family: 'Funnel Display', sans-serif;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.1; }
}

#chance-percentage.flicker {
    animation: flicker 0.1s infinite;
}

#chances h2 {
    background-color: white;
    color: black;
    display: inline-block;
    padding: 0 5px;
    margin-bottom: .5vh; /* Add space after the subtitle line */
    width: 100%; /* Make the background color fit the width of the whole div */
    height: 8.1vh;
    text-align: center; /* Center the text */
}

#report1, #report2 {
    width: 23vw;
    height: 100%;
    /* background-color: #703a3a; */
    padding: 1rem;
    font-size: 1.5vh;
    overflow-y: hidden; /* Hide vertical scrollbar */
    color: whitesmoke;
}

#report1 {
    margin-left: 30px;
    grid-area: left;
}

#bento-grid-wrapper {
    grid-area: middle;
}

#report2 {
    margin-right: 30px;
    grid-area: right;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

#report2::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

#chances {
    grid-area: chances;
}

#background {
    width: 100%;
    height: 30vh;
    /* background-color: #7f8c8d;*/
}

#background p {
    margin-bottom: 0rem; /* Add space between items */
}

#academic-stats {
    width: 100%;
    height: 25vh;
    /* background-color: #95a5a6;*/
}

#academic-stats p {
    margin-bottom: 0rem; /* Add space between items */
}

#awards {
    width: 100%;
    height: 27vh;
    /* background-color: #bdc3c7;*/
}

#extracurriculars {
    width: 100%;
    height: 35vh;
    /* background-color: #d5d8dc; */
}

#essays {
    width: 100%;
    height: 20vh;
    /* background-color: #ecf0f1; */
}

border{
    font-family: 'Funnel Display', sans-serif;
}

/* 滚动文本的公共样式 */
.scrolling-text {
  position: fixed;
  overflow: hidden;
  font-size: 16px;
  color: black;
  z-index: 9999;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.scrolling-text.top {
  top: 0;
  left: 0;
  width: 100vw;
  height: 20px;
  border-top: 2px solid white;
  background-color: white;
}

/* 底部滚动文本 */
.scrolling-text.bottom {
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 20px;
  background-color: white;
}

/* 左侧滚动文本 */
.scrolling-text.left {
  top: 20px;
  left: 0;
  width: 20px;
  height: 100vh;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background-color: white;
}

/* 右侧滚动文本 */
.scrolling-text.right {
  top: 0;
  right: 0;
  width: 20px;
  height: 100vh;
  writing-mode: vertical-rl;
  background-color: white;
}

.award, .extracurricular {
  margin-bottom: 1rem; /* Add space between each item */
}

h2 {
    background-color: white;
    color: black;
    display: inline-block;
    padding: 0 5px;
    margin-bottom: .5vh; /* Add space after the subtitle line */
}

strong {
    font-weight: 800;
}

#qrcode {
    width: 100%;
    height: auto;
    margin-top: 1.2vh;
    background-color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
}

#social-media {
    margin-left: 5px;
    line-height: 2.5vh;
    color: #656565;
    font-size: 0.7vw;
}