@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";

:root {
    --ig-royal-blue: #405DE6;
    --ig-blue: #5B51D8;
    --ig-purple: #833AB4;
    --ig-dark-pink: #C13584;
    --ig-purple-red: #E1306C;
    --ig-red: #FD1D1D;
    --ig-dark-orange: #F56040;
    --ig-orange: #f77737;
    --ig-yellow: #FCAF45;
    --ig-light-yellow: #FFDC80;
}

.navbar-item img {
    max-height: 2.5rem;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-size: 100%;
    background: #111;
    color: #9d9c9c;
}

.has-background-dark {
    background-color: #111 !important;
}

.button[disabled], fieldset[disabled] .button {
    background: #c1c1c1;
}

.has-text-gray {
    color: #ccc;
}

.has-text-gray {
    color: #ccc;
}
.has-ig-royal-blue {
    color: var(--ig-royal-blue);
}
.has-ig-blue {
    color: var(--ig-blue);
}
.has-ig-purple {
    color: var(--ig-purple);
}
.has-ig-dark-pink {
    color: var(--ig-dark-pink);
}
.has-ig-purple-red {
    color: var(--ig-purple-red);
}
.has-ig-red {
    color: var(--ig-red);
}
.has-ig-dark-orange {
    color: var(--ig-dark-orange);
}
.has-ig-orange {
    color: var(--ig-orange);
}
.has-ig-yellow {
    color: var(--ig-yellow);
}
.has-ig-light-yellow {
    color: var(--ig-light-yellow);
}
.w-full {
    width: 100%;
}
#blog-info > div {
    max-width: 600px;
    margin: 0 auto;
}
input:focus {
    outline: none;
    box-shadow: none;
    border-color: initial;
}
.button.is-danger {
    background-color: var(--ig-purple-red);
}
.button.is-outlined {
    background-color: transparent;
    border-color: #666;
    color: #666;
}
.button.is-outlined:hover {
    border-color: #fff;
    color: #fff;
}
.navbar {
    background-color: var(--bulma-scheme-main);
}
.image-post {
    max-width: 400px;
    margin: 0 auto;
}
#search-form {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
#search-form .field.has-addons {
    width: 100%;
}
#search-form .field.has-addons .control {
    width: 100%;
}
#search-form .control input {
    background: transparent;
    border: 2px solid transparent;
    background-image: linear-gradient(#111, #111), linear-gradient(330deg, var(--ig-royal-blue), var(--ig-blue), var(--ig-purple), var(--ig-dark-pink), var(--ig-purple-red), var(--ig-red), var(--ig-dark-orange), var(--ig-orange), var(--ig-yellow), var(--ig-light-yellow));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 1rem;
    color: #fff;
    width: 100%;
}
#search-form .control input::placeholder {
  color: #fff;
  opacity: 0.5;
}
button.is-absolute {
    position: absolute;
    right: 5px;
    background: transparent;
    border: none;
    top: 5px;
}
article.card {
    box-shadow: none;
}
article.card {
    border: 1px solid #333;
    background-color: #000;
}
.has-text-gray-2 {
    color: #9d9c9c;
}
.has-text-gray-3 {
    color: #666;
}
.is-size-6-5 {
    font-size: 0.875rem;
}
a {
    color: #afafaf;
}
.wrap {
    max-width: 700px;
    margin: 0 auto;
}
a:hover {
    color: #fff;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: #ffff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.125;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.75rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1rem; }

.post-content p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.post-content ul,
.post-content ol {
    list-style: initial;
    margin-left: 2em;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.post-content ul {
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content blockquote {
    background-color: #f5f5f5;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
    margin-bottom: 1rem;
}

.post-content code {
    background-color: #f5f5f5;
    border-radius: 3px;
    color: #da1039;
    font-size: 0.875em;
    font-weight: normal;
    padding: 0.25em 0.5em;
}

.post-content pre {
    background-color: #f5f5f5;
    border-radius: 6px;
    overflow-x: auto;
    padding: 1.25em 1.5em;
    margin-bottom: 1rem;
}

.post-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1rem;
}

.post-content th,
.post-content td {
    border: 1px solid #dbdbdb;
    padding: 0.5em 0.75em;
    vertical-align: top;
}

.post-content th {
    background-color: #f5f5f5;
    font-weight: 600;
}