/*
  STUDENT PAGE STYLES
  This file controls the look of the student problems selection page.
  Buttons, blocks, spacing, and colors are defined here.
*/
html{
    scroll-behavior: smooth;
}


/* White button used for "Participant" options */
.Part{
  padding: 10px 20px;
  border-radius: 5px;
  background-color: white;
  color: #154bbf;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Red button used for "Problems" or important actions */
.Pro{
  padding: 10px 20px;
  border-radius: 5px;
  background-color: red;
  color: white;
  font-weight: 500;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Grey background section that holds the big blue blocks */
.containers{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: whitesmoke;
  padding: 40px;
}


/* Stack all big blue blocks vertically with spacing */
.block-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* Main large blue gradient blocks containing text and problem summaries */
.Block-1,
.Block-2,
.Block-3,
.Block-4,
.Block-5 {
  display: flex;
  gap: 15px;
  background: #154bbf;
  background: linear-gradient(0deg,rgba(21, 75, 191, 1) 0%, rgba(0, 94, 255, 1) 100%);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  text-align:left;
  font-size: 25px;
  font-weight: 500;
   text-align: justify;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lift animation when hovering over a block */
/* Hover effect for a “lift” animation */
.Block-1:hover,
.Block-2:hover,
.Block-3:hover,
 .Block-4:hover,
 .Block-5:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

/* Headings for the blue blocks */
/* Headings and text */
.block-group h1 {
  color: white;
  margin-bottom: 10px;
}
.block-group h2 {
  text-align: center;
  font-size: 40px;
  color:  #154bbf;
  margin-bottom: 10px;
}

/* Big link button inside blocks */
.block-group a {
  text-align: center;
  font-size: 25px;
  color: white;
  background: #154bbf;
  background: linear-gradient(0deg,rgba(21, 75, 191, 1) 0%, rgba(0, 94, 255, 1) 100%);
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

/* White text inside blue blocks */
.block-group p {
  font-size: 25px;
  color: white;
  margin-bottom: 20px;

}

.block-group button:hover {
  background-color: #0037a3;
}

/* Dark blue section for selecting specific problem categories */
.Selection-Containers{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#0037a3;
  padding: 40px;
}

/* Group of smaller white blocks */
.s-block-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Individual small white blocks inside selection area */
.s-Block-1,
.s-Block-2,
.s-Block-3,
.s-Block-4{
 
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  width: 100%;
  text-align: center;
  font-size: 7vw;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Text inside the small white selection blocks */
.s-block-group h1 {
  
  font-size: clamp(18px, 2vw, 24px);
  color: red;
  margin-bottom: 10px;
}
.s-block-group h2 {
  text-align: center;
  font-size: 40px;
  color: #154bbf;
  margin-bottom: 10px;
}

.s-block-group p {
  font-size: 16px;
  color: #154bbf;
  margin-bottom: 20px;
}

.s-block-group li{
   font-size: 16px;
   color: #154bbf;
   margin-bottom: 20px;
}