@import url('https://fonts.googleapis.com/css?family=Roboto');

/*
 * CUSTOM CSS
 * Applies theme colors etc.
 */

html[data-theme="brand"] {

    /*GENERAL*/

    body {
        font-family: Roboto, Arial, sans-serif;
        font-weight: 400;
        line-height: 1.625;
        text-align: left;
    }

    a:not(.btn), .btn-link {
        text-decoration: none;
        color: #3FC6EE;
        cursor: pointer;
    }

    /*TITLES*/

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
        font-weight: bold;
        color: black;
        font-style: italic;
    }

    h1, h2, h3 {
        text-transform: uppercase;
    }

    h4 {
        font-size: 1.5rem; /* = 1.5rem since 1rem = 16px = base */
    }

    h6 {
        font-size: 1rem; /* = 1rem since 1rem = 16px = base */
    }

    /*COLORS*/

    .new-dotnet-logo-purple {
        background-color: #512BD4;
    }

    .blazor-logo-purple {
        background-color: #5C2992;
    }

    .ml-dotnet-logo-dark {
        background-color: #5C2D91;
    }

    .ml-dotnet-logo-light {
        background-color: #633BA3;
    }

    .tensorflow-dotnet-logo-dark {
        background-color: #661F76;
    }

    .tensorflow-dotnet-logo-light {
        background-color: #3FC6EE;
    }

    .csharp-logo-dark {
        background-color: #532AD5;
    }

    .csharp-logo-light {
        background-color: #927BE5;
    }

    .azure-logo-dark {
        background-color: #0C58A1;
    }

    .azure-logo-light {
        background-color: #3BC9F3;
    }

    /*BACKGROUNDS*/

    .bg-purple {
        background-color: #6f42c1!important;
    }

    .bg-teal {
        background-color: #3FC6EE!important;
    }

    /*TEXT*/

    .text-teal {
        color: #3FC6EE;
    }

    /*BUTTONS*/

    .btn {
        border-radius: 0;
        text-transform: uppercase;
        font-weight: bold;
        font-style: italic;
    }

    .btn:hover {
        background-color: #3FC6EE;
        border-color: #3FC6EE;
        color: white;
    }

    .btn-purple, .btn-primary, .btn:disabled {
        background-color: #6f42c1;
        border-color: #6f42c1;
        color: #fff;
    }

    .btn-outline-primary {
        color: #6f42c1;
        border-color: #6f42c1;
    }

    .btn-dark, .btn-secondary {
        background-color: black;
        border-color: black;
    }

    .btn-outline-secondary {
        color: black;
        border-color: black;
    }

    .btn-teal {
        background-color: #3FC6EE;
        border-color: #3FC6EE;
        color: white;
    }

    .btn-outline-teal {
        color: #3FC6EE;
        border-color: #3FC6EE;
    }

    /*SECTIONS*/

    .section-bg {
        background-image: url("../images/covers/bg-1.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .section-bg h1 {
        font-size: 6.5rem;
        text-transform: uppercase;
    }

    .section-bg h1, .section-bg h3 {
        color: white;
    }

    .section-bg .intro-title-container {
        background-color: black;
        box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 90%);
    }

    .section-bg p, .section-bg label {
        color: white;
        font-style: italic;
    }

    .section-bg p {
        background-color: black;
        box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 90%);
        padding: 8px;
    }

    .section-bg .btn-primary {
        background-color: black;
        border-color: black;
    }

    .section-bg .btn-primary:hover {
        background-color: #3FC6EE;
        border-color: #3FC6EE;
    }

    /*LOGO*/

    .section-bg .logo-container img, .tech-logo {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    .navbar .navbar-brand img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        background-color: #6f42c1;
    }

    /*NAV*/

    nav.navbar.navbar-light {
        border-bottom: 5px solid #6f42c1;
        border-left: 0!important;
        border-right: 0!important;
        box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 20%);
    }

    .navbar-nav {
        margin-right: 1rem;
    }

    .navbar-nav .nav-item {
        margin-right: 1rem;
    }

    .navbar .nav-link, .navbar .dropdown-item {
        color: black;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: bold;
        font-style: italic;
    }

    .navbar .nav-link:hover, .navbar .dropdown-item:hover {
        background-color: #3FC6EE;
        color: white;
    }

    .navbar-toggler {
        border: 0;
        padding: 0;
    }

    .navbar-toggler .bi {
        color: black;
        font-size: 2rem;
    }

    .navbar .dropdown-menu {
        border: 5px solid #6f42c1;
        border-top: 0!important;
        border-radius: 0!important;
        box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 20%);
    }

    /*CARDS*/

    .card {
        box-shadow: 1rem 1rem 1rem 0 rgb(41 48 66 / 20%);
        border: 0!important;
        border-radius: 0!important;
        cursor: pointer;
    }

    .card img, .card .card-header {
        border: 0!important;
        border-radius: 0!important;
    }

    .card-img-top {
        max-height: 234px;
        object-fit: cover;
    }

    .card-header {
        background-color: black;
    }

    .card-header, .card-header .card-title, .card-header .btn {
        color: white !important;
    }

    /*FORMS*/

    .form-control, .form-select {
        border-radius: 0!important;
    }

    .form-switch .form-check-input {
        border-radius: 0!important;
    }

    .form-check-input:checked {
        background-color: #3FC6EE;
        border-color: white;
    }

    .form-label, .form-check-label {
        font-style: italic;
    }

    /*FOOTER*/

    footer {
        border-top: 5px solid #6f42c1;
        font-style: italic;
    }

    /*BLOG*/

    hr {
        border: 2px solid #3FC6EE;
    }

    p img {
        max-width: 100%;
    }

    .card.half-opacity {
        opacity: 0.5;
    }

    /* SCROLLBARS */

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        cursor: pointer;
    }

    ::-webkit-scrollbar:vertical {
        width: 8px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #3FC6EE;
        opacity: 0.5;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    /* MODAL */

    .modal-content {
        border: 0;
        border-radius: 0;
    }

    .modal-header {
        border-bottom: 5px solid #6f42c1;
    }

    .modal-footer {
        border-top: 5px solid #6f42c1;
    }

    /*TYPEWRITER EFFECT*/

    .type-writer {
        animation: typing 1s steps(20, end) forwards;
        overflow: hidden;
        white-space: nowrap;
        width: 0;
    }

    /*MEDIA QUERIES*/

    @media (max-width: 768px) {
        .navbar-nav {
            margin-bottom: 1rem;
            margin-right: 0;
        }

        .navbar-nav .nav-item {
            margin-top: 1rem;
            margin-right: 0;
        }
    }
}

@keyframes typing {
    from {
        width: 0;
        border-right: 5px solid #3FC6EE;
    }
    to {
        width: 100%;
        border-right: none;
    }
}