/* custom styles */

.my-container {
    text-align: center;
}

.button-container {
    text-align: center;
    margin-top:-100px;
}

/* Google ads sticky on top in the blog posts */
.sticky-top {
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:1030
}

.video-container {
    position: relative;
    width: 100%;
    /* padding-bottom: 56.25%; /* Ratio 16:9 */
    overflow: hidden;
    border-radius: 15px 15px;
}

.video-container iframe, .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px 15px;
}

.my-frames {
    padding-bottom: 5%;
}

code {
    font-size: x-small;
    display: block; /* Pour que chaque balise <code> soit sur sa propre ligne */
    background-color: #fff; /* Couleur de fond */
    border-left: 4px solid #607d8b; /* Barre bleu-gris à gauche */
    padding: 8px; /* Espace intérieur autour du contenu du code */
    margin: 8px 0; /* Marge supérieure et inférieure pour l'espacement entre les blocs de code */
    line-height: 1.5; /* Interligne très réduit */
}

/* Style pour mettre en valeur les mots de code */
.code-highlight code {
    border: 0 !important;
    font-family: "Courier New", Courier, monospace !important; /* Police adaptée pour le code */
    background-color: #f4f4f4 !important; /* Arrière-plan léger */
    color: #0056b3 !important; /* Couleur du texte */
    padding: 2px 6px !important; /* Espace autour du texte */
    border-radius: 4px !important; /* Bords arrondis */
    font-size: 0.95rem !important; /* Taille légèrement réduite */
    display: inline-block !important; /* S'assurer que ça reste inline */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Légère ombre intérieure */
}

.iframe-caption {
    text-align: center;
    font-size: 0.8em;
    font-weight: lighter;
    font-style: italic;
}

.background-white {
    background-color: #fff !important;
    border-radius: 15px 15px;
}

/* code with copy capabilities */
code.w-code {
    position: relative;
    background-color: #282c34;
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    overflow: auto;
    font-family: monospace;
    font-size: 0.7em;

    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: space-between; /* Centre horizontalement */
}

.copy-btn {
    /*position: absolute;*/
    /*top: 20%;*/
    /*right: 1%;*/
    background: linear-gradient(90deg, #1495a7 0%, #003687 167%);
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
}

.copy-btn:hover {
    background: linear-gradient(90deg, #1495a7 0%, #003687 100%);
}