@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root{
    --font-logo: 'Audiowide', cursive;
    --font-title: 'Poiret One', cursive;
    --font-body: 'Quicksand', sans-serif;
    --font-pre-code: 'Fira Code', monospace;
}

body{
    font-family:var(--font-body)!important;
}
h1, h2, h3, h4, h5{
font-family:var(--font-title)!important;
font-weight: 900!important;
}
p, ul, ol, li{
    font-size: 25px!important;
    line-height: 2!important;
    text-decoration: none!important;
}

/* #region responsividade*/
@media (max-width: 767px) {
    .card {
        flex-direction: column;
        display: flex;
        align-items: center;
        padding: 10px;
        gap: 15px;
    }

    .card-img-top {
        width: 100px;
        height: auto;
        object-fit: cover;
    }

    .card-body {
        flex: 1;
    }

    .card-link {
        width: 95%;
        margin: 0 auto;
    }
    .post-interactions{
        flex-direction: column;
        align-items: center;
    }
    .post-navigation{
        flex-direction: column;
        align-items: center;
    }
}

/* #endregion*/

/* #region animações*/
@keyframes glow {
    0%, 100% {
      filter: drop-shadow(0 0 5px rgba(255, 100, 0, 0.6))
              drop-shadow(0 0 10px rgba(255, 60, 0, 0.4))
              drop-shadow(0 0 20px rgba(255, 20, 0, 0.2));
    }
    50% {
      filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.7))
              drop-shadow(0 0 20px rgba(255, 80, 0, 0.5))
              drop-shadow(0 0 30px rgba(255, 40, 0, 0.3));
    }
  }
/* #endregion*/

/* #region estilização do header e logo*/
.logo-img{
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 5px rgba(255, 100, 0, 0.6))
    drop-shadow(0 0 10px rgba(255, 60, 0, 0.4))
    drop-shadow(0 0 20px rgba(255, 20, 0, 0.2));
    animation:glow 2s infinite ease-in-out!important;
}
.devonfire-text{
    font-family:var(--font-logo) !important;
    font-size: 45px !important;
    font-weight: 600 !important;
    background: #EE471D !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: capitalize !important;
    letter-spacing: 2px !important;
    animation:glow 2s infinite ease-in-out!important;
}
header{
    font-family:var(--font-title)!important;
    font-weight:600!important;
}
/* #endregion */

/* #region estilização do card post*/
.card-link:hover .card{
    box-shadow:0 4px 8px rgba(238, 71, 29, 1)!important;
    transform: translateY(-2px)!important;
    transition: all 0.3s ease!important;
}
h5.card-title{
    font-size: 29px !important;
    font-weight: 900 !important;
    color:black!important;
}
p.card-text{
    font-family: var(--font-body)!important;
    font-weight:500!important;
    font-size:18px!important;
    color:black!important;
}
.publication-date{
    font-family:var(--font-title)!important;
    color:#EE471D!important;
    font-size:18px!important;
    font-weight:900 !important;
    text-shadow: 0 0 1px #EE471D;
}
/* #endregion*/

/* #region estilização do footer */
.footer{
    border-top:2px solid #EE471D;
    padding-bottom:50px;
    font-size:19px!important;
    font-family: var(--font-title)!important;
    font-weight: 900!important;
    text-shadow: 0 0 0.8px #EE471D, 0 0 0.8px #EE471D;
}
.footer a{
    color:#fff;
}
.footer a:hover{
    color: #EE471D;
}
/* #endregion */

/* #region estilização da página de postagem  */

.feature-image{
    border-radius: 50px!important;
    object-fit:cover!important;
    max-height:400px!important;
    width:100%!important;
}
.post p img{
    display: block;
    margin: 0 auto;
    border-radius: 50px !important;
    max-height: 500px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    cursor:pointer!important;
}

.post p a{
    color: #EE471D!important;
    font-weight: 900!important;
}
.article-content a{
    text-decoration: none!important;
    color: #EE471D!important;
    font-weight: 900!important;
}
code {
    color: #EE471D !important;
}

pre, .highlight {
    background-color: #383636 !important;
    color: white !important;
    font-family: "Fira Code", "Courier New", monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 1rem !important;
    border-radius: 5px !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

pre code {
    color: #EE471D !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    letter-spacing: 0.03em !important;
}




/* #endregion */

/* #region estilização dos botões e icones do blog */
.fa-brands{
    margin-right:5px;
    font-size:46px!important;
    text-decoration:none!important;
}
.fa-brands:hover{
    transform: translateY(-2px)!important;
    transition: all 0.3s ease!important;
    animation:glow 2s infinite ease-in-out!important;
}
.post-navigation{
    display: flex!important;
    justify-content: space-between!important;
    align-items: center!important;
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 0 20px!important;
}
.nextprev-group {
    display: flex;
    gap: 10px; /* Ajuste conforme desejar */
}

.btn-nextprev{
    background-color: #EE471D!important;
    border-color:#EE471D!important;
    color:white!important;
    text-decoration: none!important;
    padding:0.5rem 1rem!important;
    border-radius:0.25rem!important;
    font-weight:900!important;
    font-size:17px!important;
    font-family: var(--font-body)!important;
    display:inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease!important;
    cursor:pointer!important;
    white-space: normal!important;
    overflow-wrap:break-word!important;
    word-break:break-word!important;
    text-align:center!important;
    margin-bottom:10px!important;
}
.btn-nextprev:hover{
    background-color:#D63E1A!important;
    border-color:#D63E1A!important;
    text-decoration: none!important;
    margin-bottom:12px!important;
    transform: translateY(-2px)!important;
    transition: all 0.3s ease!important;
    animation:glow 2s infinite ease-in-out!important;
}
.btn-voltarlista{
    background-color: white!important;
    outline:2px solid #383636!important;
    color:#383636!important;
    text-decoration: none!important;
    padding:0.5rem 1rem!important;
    border-radius:0.25rem!important;
    font-weight:900!important;
    font-size:17px!important;
    font-family: var(--font-body)!important;
    display:inline-block;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease!important;
    cursor:pointer!important;
    white-space: normal!important;
    overflow-wrap:break-word!important;
    word-break:break-word!important;
    text-align:center!important;
    margin-bottom:10px!important;
}
.btn-voltarlista:hover{
    background-color:#383636!important;
    color:white!important;
    text-decoration: none!important;
    transform: translateY(-2px)!important;
    transition: all 0.3s ease!important;
    animation:glow 2s infinite ease-in-out!important;
}
.github-comment-button {
    display: inline-block;
    background-color: #24292e;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom:12px;
    transition: background-color 0.3s;
}
.github-comment-button:hover {
    background-color:#383636!important;
    color:white!important;
    text-decoration: none!important;
    transform: translateY(-2px)!important;
    transition: all 0.3s ease!important;
    animation:glow 2s infinite ease-in-out!important;
}
.post-interactions{
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    margin: 20px 0!important;
    width:100%!important;
}

/* #endregion */