@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    background: white;
}
[data-bs-theme="dark"] .loader-wrapper {
    background: black;
}
.loader{
    border: 4px solid #7aa79e;
    border-radius: 50%;
    border-top: 4px solid transparent;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 767px) {
    .back-to-top,
    .back-to-top:after,
    .back-to-top:hover,
    .back-to-top:focus,
    .back-to-top:active,
    .back-to-top:visited {
        display: none !important
    }
}

@media screen and (min-width: 768px) {
    .back-to-top,
    .back-to-top:after {
        position: fixed;
        z-index: 1;
        bottom: 25px;
        right: 25px;
        border-radius: 5px !important;
        background-color: #7aa79e !important;
        border-color: #7aa79e !important;
        color: white !important;
        display: none
    }
    .back-to-top:hover,
    .back-to-top:active,
    .back-to-top:focus,
    .back-to-top:visited {
        position: fixed;
        z-index: 1;
        bottom: 25px;
        right: 25px;
        border-radius: 5px !important;
        background-color: #7aa79e !important;
        border-color: #7aa79e !important;
        color: white !important;
        display: none
    }
}

.merriweather {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.merriweather-sans {
    font-family: "Merriweather Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

nav {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
[data-bs-theme="dark"] nav {
    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

[data-bs-theme="dark"] body {
    --bs-heading-color: white;
    --bs-body-color: white;
}

.text-sulliops {
    color: #7aa79e;
}

.navbar-brand, .navbar-brand:hover, .navbar-brand:active, .navbar-brand:visited, .navbar-brand:focus {
    color: #7aa79e;
}
.nav-link.active {
    color: #7aa79e !important;
}

.masthead {
    height: 100vh;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
@media (min-width: 0px) {
    .masthead hgroup h1 {
        font-size: 2.5rem;
    }
    .masthead hgroup p {
        font-size: 1rem;
    }
}
@media (min-width: 576px) {
    .masthead hgroup h1 {
        font-size: 3rem;
    }
}
@media (min-width: 768px) {
    .masthead hgroup h1 {
        font-size: 3.5rem;
    }
    .masthead hgroup p {
        font-size: 1.25rem;
    }
}
@media (min-width: 992px) {
    .masthead hgroup h1 {
        font-size: 4rem;
    }
}
@media (min-width: 1200px) {
    .masthead hgroup h1 {
        font-size: 4.5rem;
    }
    .masthead hgroup p {
        font-size: 1.5rem;
    }
}
@media (min-width: 1400px) {
    .masthead hgroup h1 {
        font-size: 5rem;
    }
}

.background-image-jpeg {
    background-image: url("https://sulliops.co/assets/images/background/back.jpg");
}
.background-image-webp {
    background-image: url("https://sulliops.co/assets/images/background/back.webp");
}

.thick-icon {
    -webkit-text-stroke-width: 0.05rem;
}

.bounce {
    -moz-animation: bounce 2.5s infinite;
    -webkit-animation: bounce 2.5s infinite;
    animation: bounce 2.5s infinite;
}
@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-1.5em);
    }
    60% {
        transform: translateY(-.75em);
    }
}

section {
    padding: 5rem 0;
}
.section-bg-light {
    background-color: #f5f5f5;
}
[data-bs-theme="dark"] .section-bg-light {
    background-color: #0a0a0a;
}
.section-bg-dark {
    background-color: #dcdcdc;
}
[data-bs-theme="dark"] .section-bg-dark {
    background-color: #232323;
}

.ratio-4x1 {
    --bs-aspect-ratio: 25%;
}

.accordion {
    --bs-accordion-active-color: #334d47;
    --bs-accordion-active-bg: #b3ccc7;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(112, 167, 158, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334d47'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334d47'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.github-cpp {
    color: #f34b7d;
}
.github-csharp {
    color: #178600;
}
.github-python {
    color: #3572A5;
}
.github-js {
    color: #f1e05a;
}
.github-ts {
    color: #3178c6;
}

.btn-primary {
    --bs-btn-bg: #7aa79e;
    --bs-btn-border-color: #7aa79e;
    --bs-btn-hover-bg: #5c8a81;
    --bs-btn-hover-border-color: #527a72;
    --bs-btn-active-bg: #75a39a;
    --bs-btn-active-border-color: #66998f;
    --bs-btn-disabled-bg: #85ada5;
    --bs-btn-disabled-border-color: #94b8b0;
}

footer {
    color: #ddd;
    background-color: #212529;
}