body {
  color: #ddd;
}


a {
  color: #ddd;
}


h1 {
  color: #eee;
  font-size: 6em;
}


h2 {  font-size: 3em;}

body {
  background-color: #000;
  background-image: url('background3.jpg');

   
 background-position: top center; 
background-repeat: no-repeat; /* Empêche la répétition de l'image */
    
min-height: 100vh; /* S'assure que l'image de fond couvre au moins la hauteur de la fenêtre */

  width: 100%; /* S'assure que le body occupe toute la largeur */
 background-size: 100% auto; 

}

.code-font {

    font-family: 'Courier New', Courier, monospace;

    font-weight: bold;
    color: white;
overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
font-size: calc(3vw); 
}



p {
  font-size: 2em;
}


* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #000;
  color: #ffffff;
  padding: 15px;
text-align: center;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #333;
  color: #ddd;
  font-size: 3em;
}


.col-3.menu ul li {font-size: 3em;
}

.menu li:hover {
  background-color: #666;
}

.aside {
  background-color: #333;
  padding: 15px;
  color: #ddd;
  text-align: center;
}

.footer {
  background-color: #222;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 1300px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}


.code-font {

font-size: calc(2vw); }



  body {
    background-image: url('background.jpg');
  }


h1 {font-size: 3em;}
p {  font-size: 1.2em;}
.col-3.menu ul li {font-size: 1.5em;
}
h2 {  font-size: 1.5em;}

}


@media only screen and (min-width: 1800px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

.code-font {

font-size: calc(1.5vw); }

h1 {font-size: 3em;}
p {  font-size: 1.2em;}
.col-3.menu ul li {font-size: 1.5em;
}

h2 {  font-size: 1.5em;}



}


img {
  max-width: 100%;
  height: auto;
}