@import "styles.css";

.coursContainer {
  display: flex;
  width: 100%;
  height: 100%;
}

.coursAside {
  background-color: var(--fifthColor);
  overflow-y: auto;
}

.menuCours {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coursItem {
  width: 100%;
  text-align: center;
  margin-bottom: 0.1rem;
  transition: all 0.9s ease-in-out;
}
.coursItem:hover {
  background-color: var(--firstColor);
}

.coursLink {
  width: 100%;
  padding: 0.2rem 1.5rem;
  font-size: calc(0.1rem + 18px);
  color: var(--secondColor);
}

.coursContents {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--fourthColor);
  overflow-y: auto;
}

.coursTitle {
  margin-bottom: var(--defaultSpace);
  font-family: var(--firstFontFamily);
  font-size: calc(var(--defaultFontSize) + 2rem);
  text-shadow: 0.1rem 0.1rem 0.5rem var(--firstColor);
  text-align: center;
}

.coursText {
  text-align: justify;
  margin-bottom: calc(var(--defaultSpace) + 1rem);
  font-size: calc(0.1rem + 14px);
  border-radius: 0.5rem;
  text-shadow: 0.1rem 0.1rem 1rem var(--firstColor);
}

@media only screen and (max-width: 768px) {
  .header {
    min-height: 20vh;
    display: flex;
    font-size: .2rem;
    flex-direction: column;
  }

  .container{
    padding: 0;
    margin: 0;
  }
}

@media only screen and (max-width: 480px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .coursContainer {
    position: sticky;
    top: 50vh;
    flex-direction: column;
    height: 100vh;
    z-index: -1;
    margin: 0;
  }

  .coursAside {
    height: 30vh;
  }
}