html {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            font-size: 17px;


            background-color: #46362c;
        }

        body {
            overflow-y: scroll;
	    margin: 0;

            background-color: #46362c;
            background: -webkit-linear-gradient(#27160b, #46362c, #46362c 60%);
            background:    -moz-linear-gradient(#27160b, #46362c, #46362c 60%);
            background:      -o-linear-gradient(#27160b, #46362c, #46362c 60%);
            background:         linear-gradient(#27160b, #46362c, #46362c 60%);
            background-repeat: no-repeat;
        }

        a {
            color: #83ae17;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        h1, h2, h3, h4, h5, h6 {
            margin: 0 0 5px 0;
        }

        h1 {
            font-size: 22px;
        }

        p {
            margin-top: 3px;
        }

        header {
            height: 100px;
            width: 100%;


            background-color: #639513;
            color: #f1f1f1;
        }

        header a {
            color: #f1f1f1;
        }

        header .logo {
            padding-top: 23px;
        }

        header nav {
            float: right;
            padding-top: 18px;
            font-size: 20px;
            display: inline-block;
        }

        header nav ul {
            list-style-type: none;
            padding-left: 0;
        }

        header nav ul li {
            float: left;
            padding-left: 30px;
        }

        header nav ul li:first-of-type {
            padding-left: 0;
        }

        img.rss {
            /*object-fit: none;
            object-position: -123px -54px;*/
        }

        .wrapper {
            width: 999px;
            margin-left: auto;
            margin-right: auto;
            overflow: auto;
        }

        article {
            width: 645px;
            margin-top: 80px;
            display: inline-block;
        }

	.lazy {
		display: none;
	}
	
	.lazy.js_loaded {
		display: inline;
	}

        article #comic_actions {
            text-align: center;
            margin: 50px 0 20px 0;
        }

        article #comic_actions .random img {
            margin-bottom: 15px;
        }

        article #comic_actions a {
            text-decoration: none;
        }

        article #comic_actions a.prev, article #comic_actions .prev.disabled {
            margin: 0 70px;
        }

        article #comic_actions a.next, article #comic_actions .next.disabled {
            margin: 0 70px;
        }
        
	article #comic_actions .disabled {
		opacity: 0.4;
	}

        article > section:first-of-type {
            margin-top: 0;
        }

        article > section p {
            margin-top: 10px;
        }
	
	article section ul li {
		margin-bottom: 5px;
	}

	.comic_wrapper {
	    display: inline-block;
	    width: 645px;
	}

        aside {
            width: 319px;
            margin: 80px 0 30px 10px;
        }

        aside input.permalink {
            width: 98%;
            margin-bottom: 10px;
            color: #424242;
        }

	div.tags {
		overflow: auto;
	}

	aside div.tags {
		margin: 10px 0 20px 0;
	}
	
	div.tags a {
		background-color: #d6e1eb;
    		padding: 5px 14px;
    		border: 1px solid #8192a1;
    		color: #4c5b67;
		display: block;
    		width: fit-content;
    		float: left;
    		margin: 10px 10px 0 0;
	}


        #share {
            margin-top: 5px;
        }

        #share a {
            margin-right: 35px;
            text-decoration: none;
        }

	#follow {
	    position: absolute;
    	    margin-top: 20px;
	    color: #fff;
	}
	#follow a:nth-of-type(1) {
	    margin-left: 19px;
	}
	#follow a:nth-of-type(2) {
	    margin-left: 23px;
	}
	#follow a:nth-of-type(3) {
	    margin-left: 23px;
	}

        section {
            width: 625px;
            margin-top: 10px;
        }

        section time {
            color: #808080;
        }

        aside, section {
            display: inline-block;
            vertical-align:top;
            padding: 10px;
            text-align: left;


            background-color: #fff;
            color: #424242;
        }

    	#banners {
		min-height: 630px;
	}

        #comic_actions img {
          object-fit: none;
        }

        /*#comic_actions img.first img { object-fit: none; object-position: 0 -55px; }
        #comic_actions img.prev img { object-fit: none; object-position: -51px -55px; }
        #comic_actions img.random img { object-fit: none; object-position: 0 0; }
        #comic_actions img.next img { object-fit: none; object-position: -86px -55px; }
        #comic_actions img.last img { object-fit: none; object-position: -72px 0; }*/

        .favorite_comic {
            float: left;
            margin-right: 36px;
            margin-bottom: 20px;
            text-align: center;
            word-wrap: break-word;
            width: 180px;
            height: 210px;
            font-size: 17px;
        }
	
	section.comic_list h2 {
	    margin-bottom: 15px;
	}

        .favorite_comic:nth-of-type(3),
        .favorite_comic:nth-of-type(6),
        .favorite_comic:nth-of-type(9),
        .favorite_comic:nth-of-type(12),
        .favorite_comic:nth-of-type(15),
        .favorite_comic:nth-of-type(18),
        .favorite_comic:nth-of-type(21),
        .favorite_comic:nth-of-type(24),
        .favorite_comic:nth-of-type(27),
        .favorite_comic:nth-of-type(30),
        .favorite_comic:nth-of-type(33),
        .favorite_comic:nth-of-type(36),
        .favorite_comic:nth-of-type(39),
        .favorite_comic:nth-of-type(42),
        .favorite_comic:nth-of-type(45),
        .favorite_comic:nth-of-type(48),
        .favorite_comic:nth-of-type(51),
        .favorite_comic:nth-of-type(54) {
            margin-right: 0px;
        }

        .favorite_comic img {
          object-fit: none;
          width: 180px;
          height: 180px;

          border: 1px solid #000;
	  margin-bottom: 4px;
        }

.favorite_comic img.uninhabited {object-fit: none; object-position:0px 0px;}
.favorite_comic img.two-types-of-developers {object-fit: none; object-position:-180px 0px;}
.favorite_comic img.the-end {object-fit: none; object-position:0px -180px;}
.favorite_comic img.space-whisky {object-fit: none; object-position:-180px -180px;}
.favorite_comic img.segmentation-fault {object-fit: none; object-position:-360px 0px;}
.favorite_comic img.rewrite {object-fit: none; object-position:-360px -180px;}
.favorite_comic img.quest {object-fit: none; object-position:0px -360px;}
.favorite_comic img.pillow {object-fit: none; object-position:-180px -360px;}
.favorite_comic img.neolithic-humor {object-fit: none; object-position:-360px -360px;}
.favorite_comic img.mirror {object-fit: none; object-position:-540px 0px;}
.favorite_comic img.make-a-wish {object-fit: none; object-position:-540px -180px;}
.favorite_comic img.good-ol-days {object-fit: none; object-position:-540px -360px;}
.favorite_comic img.containers-and-docker {object-fit: none; object-position:0px -540px;}
.favorite_comic img.computer-vision {object-fit: none; object-position:-180px -540px;}
.favorite_comic img.betelgeuse {object-fit: none; object-position:-360px -540px;}
.favorite_comic img.back-end {object-fit: none; object-position:-540px -540px;}
        

	img.updoot {object-fit: none; object-position:0px 0px;}
	img.downdoot {object-fit: none; object-position:-27px 0px;}
	img.duckdoot {object-fit: none; object-position:-53px 0px;}
	
	img.updoot.chosen, a.doot:hover img.updoot {object-fit: none; object-position:0px -32px;}
	img.downdoot.chosen, a.doot:hover img.downdoot {object-fit: none; object-position:-27px -32px;}
	img.duckdoot.chosen, a.doot:hover img.duckdoot {object-fit: none; object-position:-53px -32px;}
	
	div.doots {
		overflow: auto;
		margin: 17px 0;
	}

	#comic section div.doots {
		width: fit-content;
    		margin: 0 auto 10px auto;
	}

	a.doot {
		width: 46px;
		float: left;
		margin-right: 15px;
		text-align: center;
	}

	a.doot:nth-of-type(3) {
		margin-right: 0;
	}

	a.doot p {
		padding: 2px;
    		margin: 0 0 0 0;
    		font-size: 13px;
    		font-weight: bold;
		text-align: center;
    		width: 39px;
	}
	
	a.doot:hover {
		text-decoration: none;
	}
	

	p.updoot,
	a.doot:hover p.updoot.not_chosen {
		background-color: #daebd6;
		border: 1.25px solid #81a079;
		color: #56704f;
	}

	p.downdoot,
	a.doot:hover p.downdoot.not_chosen {
		background-color: #e8cda1;
		border: 1.25px solid #af9364;
		color: #816f50;
	}

	p.duckdoot,
	a.doot:hover p.duckdoot.not_chosen {
		background-color: #efefae;
		border: 1.25px solid #c8c86f;
		color: #97974e;
	}

	a.doot p.not_chosen {
		background-color: #dadada;
		border: 1.25px solid #a4a4a4;
		color: #878787;
	}


	footer {
            clear: left;
            text-align: center;
            padding: 50px 0 20px 0;


            color: #f1f1f1;
        }

	footer p.follow_buttons a:nth-of-type(2),
	footer p.follow_buttons a:nth-of-type(3) {
		margin-left: 30px;
	}

        @media all and (max-width: 999px) {

            header nav {
                padding-right: 10px;
            }

            .wrapper {
                width: 100%;
                text-align: center;
            }

	    .comic_wrapper {
		width: 100%;
	    }

            aside {
                width: 625px;
                margin: 10px 0 30px 0;
            }
	

	    .big_banner {
		width: 280px;
		height: auto;
	    }
	
	    #banners a:nth-of-type(2) img {
		margin-left: 25px;
	    }
        }

        @media all and (max-width: 801px) {
            header {
                height: 130px;
            }
            header nav {
                float: none;
                padding-top: 0;
                margin-top: -20px;
            }

            header .logo {
		width: 380px;
		height: auto;
                padding: 25px 10px 10px 10px;
            }

            header .logo:after {
                content: "\A";
                white-space: pre;
            }
        }

        @media all and (max-width: 666px) {
            header nav {
                font-size: 18px;
            }

            article, section, aside {
                box-sizing: border-box;
                width: 100%;
            }
	
	    img.architecture {
		width: 97%;
		height: auto;
	    }

            section, aside {
                width: 96%;
            }

            article {
                margin-top: 30px;
            }

	    #comic > section > img {
		width: 100%;
		height: auto;
	    }

            article #comic_actions a.prev, article #comic_actions .prev.disabled {
                margin: 0 50px;
            }

            article #comic_actions a.next, article #comic_actions .next.disabled {
                margin: 0 50px;
            }

            .favorite_comic {
		width: 29%;
                margin-right: 15px;
            }

	    .favorite_comic img {
		width: 100%;
	    }

            .favorite_comic:nth-of-type(3),
            .favorite_comic:nth-of-type(6),
            .favorite_comic:nth-of-type(9) {
                margin-right: 15px;
            }
	    
	    .big_banner {
		width: 315px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	    }
	
	    #banners a:nth-of-type(2) img {
		margin-left: auto;
	    }

	    #quiz_top_banner {
		width: 100%
	    }
	    
	    #quiz_banner img {
		width: 100%
	    }	
        }

        @media all and (max-width: 500px) {

            header {
                height: 160px;
            }

            header .logo {
                width: 300px;
            }

            header nav {
                padding: 0 10px;
                margin-top: -35px;
            }

            header nav ul li {
                padding-top: 20px;
                padding-left: 50px;
            }

            article #comic_actions a.first, article #comic_actions .first.disabled {
                float: left;
            }

            article #comic_actions a.last, article #comic_actions .last.disabled {
                float: right;
            }

            article #comic_actions a.prev, article #comic_actions .prev.disabled {
                margin: 0 20px;
            }

            article #comic_actions a.next, article #comic_actions .next.disabled {
                margin: 0 20px;
            }
	
	    .favorite_comic {
		width: 28%
	    }

	    .quiz_try_again {
	        margin-left: 0px;
    		display: block;
    		width: 65px;
    		margin-top: 20px;
	    }
	
	    #you_are_a_twat {
		
		margin-top: 20px;	
	    }
		
        }

        @media all and (max-width: 632px) {
            /*.favorite_comic {
                width: 110px;
            }*/
	    section.comic_list {
		padding-bottom: 50px;
	    }
        }

        @media all and (max-width: 360px) {

	    .big_banner {
		width: 97%;
		height: auto;
	    }
	    
	    #follow > a:nth-of-type(1) {
		margin-left: 10px;
	    }
	    
	    #follow > a:nth-of-type(2),
	    #follow > a:nth-of-type(3) {
		margin-left: 20px;
	    }
        }

        @media all and (max-width: 369px) {
            /*.favorite_comic {
                width: 70px;
            }*/
	
            article #comic_actions a.prev, article #comic_actions .prev.disabled {
                margin: 0 10px;
            }

            article #comic_actions a.next, article #comic_actions .next.disabled {
                margin: 0 10px;
            }
        }

	@media all and (max-width: 313px) {
             .favorite_comic {
                width: 43%;
             }
	}

	@media all and (max-width: 244px) {
             .favorite_comic {
                width: 180px;;
             }
	}