:root {
  --course-item-hover-clr: #3890f5;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  /*background-color: #f4f4f4;*/
  background-color: #f9f9f9;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align to the top */
  height: 100vh; /* Full height of the viewport */
  padding-top: 40px; /* Space from the top */
  flex-wrap: wrap;
}

* {
  text-decoration: none;
  /*box-sizing: border-box;*/
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard syntax */
  /*font-family: mfont;*/
  font-weight: 500;

  font-family: "Google Sans Flex", sans-serif;
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 0;
}

.course-container {
  width: 100%;
  max-width: 540px; /* Limit max width */
}

h3 {
  color: white;
  font-size: 20px;
  margin: 8px 0px;
}

.course-item {
  /*background: #ffffff;*/
  background: #8A8A8A;
  padding: 15px;
  margin: 0px 0px 20px 0;
  /*border-radius: 8px;*/
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-align: center; /* Center text inside each course item */
  
  box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.25);
}

.course-item:hover {
  /*background-color: #e0e0e0;*/
  background-color: var(--course-item-hover-clr);
  transform: translateY(-3px);
}

.course-item p {
  margin: 10px 0 0;
  font-size: 16px;
}

/* Styles for the semester list inside the course */
.semester-list {
  list-style: none;
  padding: 10px 20px 0px 20px;
  display: none; /* Hide by default */
  margin: 0;
  transition: width 0.2s;
}

.course-item:has(.semester-list:hover) {
  background: #8A8A8A;
  /*transform: translateY(3px);*/
}

.list-folder:has(.semester-list:hover) {
  background: #575757!important;
}

.semester-item {
  /*background-color: #f1f1f1;*/
  background-color: #575757;
  color: white;
  padding: 20px;
  font-size: 18px;
  margin: 15px 0px 7px 0;
  border-radius: 8px;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

a
{
  color: white;
}

.semester-item:hover a{
  color: black;
}

.semester-item:hover {
  /*background-color: #ddd;*/
  background-color: white;
  color: black;
  transform: translateY(-3px);

}

.list-folder
{
  background: #575757;
}

.enn_:hover, .corr_:hover, .image_:hover, .chapt_:hover, .supptp_:hover, .fiche_:hover, .corrtp_:hover, .exam_:hover {
    background-color: white!important;
}

.enn_corr:hover{
  background: white!important;
}

.home-footer {
  max-width: none;
  width: 100%;
  background-color: #292929;
  padding: 40px 0px 10px 0px;
  /*margin: 170px 0px 0px 0px;*/
  margin: 270px 0px 0px 0px;
}

.home-footer-item {
  background-color: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.home-footer-item h3, h2 {
  color: white;
}

.home-footer-item-1 {
  margin-bottom: 60px;
  padding: 0px 450px;
}

.home-footer-item-2 {
  margin-bottom: 30px;
  /*margin-bottom: 60px;*/
}

.home-footer-item-3 {
  margin-bottom: 60px;
}

.home-footer-item:hover {
  background-color: transparent;
  cursor: default;
}

@media only screen and (max-width: 1350px) {
  .home-footer-item-1 {
    padding: 0px 330px;
  }
}

@media only screen and (max-width: 1150px) {
  .home-footer-item-1 {
    padding: 0px 230px;
  }
}

@media only screen and (max-width: 950px) {
  .home-footer-item-1 {
    padding: 0px 120px;
  }
}

@media only screen and (max-width: 700px) {
  .home-footer-item-1 {
    padding: 0px 60px;
  }
  .card
  {
    /*transform: scale(0.8);*/
    width: 82vw;
    
  }
}

@media only screen and (max-width: 450px) {
  .home-footer-item-1 {
    padding: 0px 25px;
    font-size: 20px;
  }
  .home-footer-item-3 {
    padding: 0px 60px;
  }
  .card
  {
    /*transform: scale(0.6);
    width: auto;*/
    width: 82vw;
    /* margin-left: -64px;
    margin-right: -64px;*/
  }
}