/* CSS EXERCICES.HTML */



li a:hover {

  color: #1595c8;

  transition: all 0.25s ease;

}



ul li ul li a:hover {

  padding-left: 10px;

  border-left: 2px solid #1595c8;

  transition: all 0.25s;

}



.darkmode--activated .nav__links a:hover {

  color: #1595c8;

  transition: all 0.3s;

}



.darkmode--activated .nav__links a:focus {

  color: #1595c8;

  transition: all 0.3s;

}



a.nav-a-exercices:after {

  content: '';

  display: inline-block;

  width: 40px;

  height: 6px;

  background-color: #1595c8;

  -webkit-transform: skew(-30deg) translateX(-50%);

  -moz-transform: skew(-30deg) translateX(-50%);

  -o-transform: skew(-30deg) translateX(-50%);

  tranform: skew(-30deg) translateX(-50%);

  position: absolute;

  bottom: -1rem;

  left: 50%;

  opacity: 1;

}



/* ------------------------------------------------------------------------------------ */



.main-title:after {

  content: '';

  display: inline-block;

  width: 100px;

  height: 12px;

  background-color: #1595c8;

  -webkit-transform: skew(-30deg);

  -moz-transform: skew(-30deg);

  -o-transform: skew(-30deg);

  tranform: skew(-30deg);

  position: absolute;

  bottom: -2rem;

  left: 0;

  margin-bottom: 15px;

}



h3.main-subtitle {

  margin-top: 50px;

}



.main-page {

  margin-bottom: 2000px;

  z-index: 5;

}



#left {

  float:left;

  width:50%;

}



#center {

  float:right;

  width:50%;

}



@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}



/* Darkmode */

.darkmode--activated .accordion {

  background-color: #333;

  color: #ccc;

  transition: all 0.3s;

}

.darkmode--activated .accordion:hover {

  background-color: rgb(80, 80, 80);

  transition: all 0.3s;

}

.darkmode--activated .accordion-content p {

  color: #ccc;

  transition: all 0.3s;

}

.darkmode--activated .accordion-content p.warning-msg {

  color: #9F6000;

  transition: all 0.3s;

}

.darkmode--activated .accordion-content {

  background-color: rgb(75, 75, 75);

  transition: all 0.3s;

}

.darkmode--activated button.accordion.is-open {

  background-color: rgba(64,64,64);

  transition: all 0.3s;

}

/* Boutons actifs */

button.accordion-actif {

  width: fit-content;

  background-color: #1595c8;

  border: none;

  outline: none;

  text-align: left;

  padding: 15px 20px;

  font-size: 18px;

  color: white;

  cursor: pointer;

  transition: all 0.3s;

  margin-top: 5px;

}

button.accordion-actif:after {

  content: "\f078";

  font-family: "fontawesome";

  font-size: 18px;

  float: right;

  margin-left: 15px;

}

button.accordion-actif.is-open:after {

  content: "\f077";

}

button.accordion-actif:hover,

button.accordion-actif.is-open {

  background-color: dodgerblue;

}



/* Contenu du bouton */

.accordion-content {

  background-color: #eee;

  border-left: 1px solid whitesmoke;

  border-right: 1px solid whitesmoke;

  padding: 0 20px;

  max-height: 0;

  overflow: hidden;

  transition: all 0.3s;

}

.accordion-content p {

  margin-top: 10px;

}

.fa-eye {

  margin-right: 10px;

}

.fa-download {

  margin-right: 10px;

}



/* Sub-boutons */

.btn {

  margin: 10px 5px 10px;

  background-color: rgb(64, 64, 64);

  border: none;

  border-radius: 100px;

  color: white;

  padding: 12px 20px;

  cursor: pointer;

  font-size: 15px;

  transition: all 0.3s;

}

.btn:hover {

  background-color: rgb(90, 90, 90);

  transition: all 0.3s;

}





img.view {

  filter: brightness(0.7);

  transition: all 0.5s;

  margin: 15px;

  width: 10%;

  height: 10%;

}



img.view:hover {

  filter: brightness(1);

  transform: scale(1.05);

}



/* ------------------------------------------------------------------------------------ */



/* DEADLINE */



h4 {

  color: red;

  display: flex;

  font-size: 17px;

  margin-top: 15px;

  margin-left: 25px;

  margin-right: 25px;

}

h4:before, h4:after{

  content: "";

  flex: 1 1;

  border-bottom: 1px solid;

  margin: auto;

}

h4:before {

  margin-right: 10px;

}

h4:after {

  margin-left: 10px;

}

.fa-arrow-circle-right {

  align-self: center;

  vertical-align: middle;

  margin-left: 5px;

  margin-right: 5px;

}