Overwatch Esports - Dark Mode by Yosho

/* ==UserStyle==
@name           Overwatch Esports - Dark Mode
@namespace      github.com/openstyles/stylus
@version        0.4.0
@description    Dark Mode for the Esports section of the Overwatch site.
@author         Yosho
==/UserStyle== */

@-moz-document domain("esports.overwatch.com") {
    .pt-96:after, .pt-48:after {
        filter: invert(1) hue-rotate(180deg) !important;
		background-color: #f0f0f8;
    }
	
	img[alt="Schedule"] {
		filter: invert(1) hue-rotate(180deg)
	}
	
	.pt-\[185px\] {
		padding-top: 0px !important;
		background-image: linear-gradient(0deg, #0d0d0d, 80%, rgba(51, 51, 51, .8)), url(/img/lines-dark.png);
		background-color: rgb(0 0 0 /var(--tw-bg-opacity))

	}
	
	.pt-\[185px\]>* {
		padding-top: 185px;
		padding-bottom: 175px;
		backdrop-filter: invert(0) !important; 
	}
    
    [style="color:rgb(0, 0, 0)"], h2, .text-ow-night\/50, .text-ow-night, .text-ow-secondary\/50 {
        color: white !important;
    }
    
    h1 {
        color: rgb(240 99 20) !important;
    }
    
    p {
        color: #bbb
    }
    
    .bg-\[\#F9FAFB\] {
        background-color: rgb(21, 20, 19);
    }
    
    .p-5 {
        padding: 0px;
        color: white !important;
    }
    
    .p-5>* {
        backdrop-filter: invert(0.95);
        width: 100vw;
    }

    
    .pt-8>* {
        backdrop-filter: invert(0.9)
    }
    
    .pt-8 {
        padding: 0px;
    }
    
    #faq {
        background: linear-gradient(140deg, rgba(28, 34, 39, .9) 33.04%, rgba(15, 16, 17, .85) 69.82%), url(/img/lines-light.png), #3b3b3b 50% !important;
    }
    
    .text-ow-secondary, .text-black, section {
        color: white
    }
    
    .group:hover .group-hover\:text-black {
        color: rgb(240 99 20/var(--tw-text-opacity))
    }
    
    .pb-12 {
        background-color: rgb(40 40 40/var(--tw-bg-opacity))
    }
    
    .bg-ow-secondary\/5 {
        background-color: rgb(30 30 30/var(--tw-text-opacity))
    }

    section.bg-no-repeat:not(.bg-center){
        background-image: linear-gradient(180deg,transparent,100px,#1c2227),url(/img/lines-dark.png);
        background-color: #120f0f !important;
	}
	
	.bg-no-repeat.bg-center {
		background-image: linear-gradient(180deg,#1c2227,50%,transparent),url(/img/lines-dark.png);
        background-color: #000 !important;
	}

    
    img.bg-white {
        filter: invert(0.9) hue-rotate(180deg);
        background: white !important;
    }
    
    div:not(.flex-col) .bg-white:not(.p-5) {
        background-color: rgb(10 10 10/var(--tw-bg-opacity));
        background-image: linear-gradient(180deg,#1c2227,transparent),url(/img/lines-dark.png);
    }
	
	.flex-col .bg-white:not(.p-5) {
		background-color: rgba(51,62,72,.1);
		
	}
    
    section:not(.relative):not(.bg-no-repeat):first-of-type>* {
        backdrop-filter: invert(0.9) hue-rotate(180deg);
        max-width: 100vw!important;
        padding-left: 20vw;
    }

    img[alt="Header logo"] {
        content: url('https://i.imgur.com/UjBXsnm.png')
    }
}