/* Inspired by https://github.com/LeoColomb/perfectmotherfuckingwebsite/blob/main/fuckingstyle.scss */

body {
  max-width: 650px;
  margin: 40px auto;
  padding: 0 10px;
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #444;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


#head {
    font-size: 2em;
    font-weight: bold;
}

h1 > a {
    color: #444;
}

footer {
    margin-top: 48px;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #c9d1d9;
    background: #0d1117;
  }

  a:link {
    color: #58a6ff;
  }
}

img {
    width: 100%;
}

/* Style pour les échantillons de code */

.highlight {
    position: relative;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks inside the code */
    max-width: 100%; /* Make sure it doesn’t exceed the container's width */
    border-radius: 6px;
    padding: 10px;
    background-color: #f7f7f7;
}

pre {
    margin: 0; /* Remove margin for the pre element */
    margin-top: 20px; /* Laisser de la place au copy-button */
}

code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Use a monospace font */
    font-size: 14px; /* Set a comfortable font size */
    line-height: 1.5; /* Set line height for readability */
}

.copy-button {
    position: absolute; /* Position the button */
    top: 10px; /* Adjust the button's vertical position */
    right: 10px; /* Adjust the button's horizontal position */
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 3px; /* Rounded corners for the button */
    padding: 5px 10px; /* Padding for the button */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 12px; /* Font size for button text */
    z-index: 10; /* Ensure button is above other elements */
}

.copy-button:hover {
    background-color: #0056b3; /* Darken the button on hover */
}

/* Style pour les citations */

blockquote {
    font-style: italic; /* Italicize the text for a classic quote look */
    border-left: 3px solid #ccc; /* Light grey left border for emphasis */
    margin: 10px 0; /* Top and bottom margin to separate from other content */
    padding: 10px 15px; /* Padding to give space around the text */
    background-color: #f9f9f9; /* Light grey background for subtle contrast */
    color: #333; /* Dark grey text for readability */
}

blockquote p {
    margin: 0; /* Remove default paragraph margin inside blockquote */
}


/* Style pour l'affichage des articles */

.articles li {
    margin-bottom: 6px;
}

.articles {
    list-style: none;
    padding-left: 10px;
}

.article-item {
    display: flex;
    align-items: center; /* Vertically center the items */
    margin-bottom: 10px; /* Add some space between list items */
}

.article-date {
    margin-right: 10px; /* Space between the date and the title */
    font-size: 12px;
    width: 60px;
    text-align: right;
}

.article-title {
    flex: 1; /* Allow the title to take up the remaining space */
}

.legend {
    text-align: center;
    font-size: small;
    font-style: italic;
    margin-top: -16px;
}

.podcast {
    width: 300px;
}

/* Style pour les formulaires */

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
  padding: 0.5em 0.6em;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="submit"] {
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}


form input, form textarea {
    margin-bottom: 12px;
}

form em {
    font-size: 14px;
    font-style: normal;
}

/* Style pour les grilles de photo */

.pictures-grid {
    display: flex;
    gap: 1%;
}

.pictures-grid a {
    width: 24%;
}

.pictures-grid img {
    width: 100%;
    aspect-ratio: 1;  /* for square */
    object-fit: cover; /* maintains aspect ratio without distortion */
}