@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Finlandica&family=Inconsolata&family=Mali:wght@500&family=Monda&family=Nanum+Gothic&family=Open+Sans&family=Quicksand:wght@400;500;600;700&family=Secular+One&family=Varela+Round&display=swap');




        body {
            margin: 0;
            line-height: 1.7em;
            letter-spacing: 0.5px;
            color: #333333;
            font-family: Monaco;
            font-size: 13px;
            font-family: 'Quicksand', serif;
            font-size: 11.5pt;
            line-height: 1.4em;
            letter-spacing: 0.065em;
            font-weight:400;
        }


        body.night .resumemini {
            background: #494949;
            border: 1px solid #666666;
        }

        body.night .cvlink,
        body.night .banner-note {
            background: #494949;
            border: 1px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
        }




        .part {
            margin: 3rem 0;
            margin-bottom: 85px;
            width: 100%;
            /* background: #ffffff; */
            border: 1px solid gold;
            border: 1px solid #e2e2e2;
            overflow: hidden;
            padding-top: 45px;
            padding-bottom:0;
            border-radius: 3px;
        }

        body.night .part {
            background: #494949;
            border: 1px solid #666666;
        }





/* # # # # # # # # # # # # # # # # # # # # # # */

        /* TEXT STYLES */

        .big-title {
            color: #ffb618;
            font-family: courier;
            font-weight: 900;
            font-size: 3.4em;
            text-shadow: 4px 2px #ffe88a;
            line-height: 82%;
            background: #fff;
            border-radius: 150px;
            text-align: center;
            filter: drop-shadow(8px 10px 0px #fffadb);
            border: 2px solid gold;
            padding: 2% 6% 2% 6%;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
            margin: 0px -10px -90px -10px;

            text-decoration: none;
        }


        body.night .big-title {
            background: #333;
            border: 2px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
            color: #ffb618;
            text-shadow: 4px 2px #666666;

        }



        .mid-title {
            color: #ffb618;
            font-family: courier;
            font-weight: 900;
            font-size: 2em;
            text-shadow: 2px 1px #ffe88a;
            line-height: 82%;
            background: #fff;
            text-align: center;
            filter: drop-shadow(8px 10px 0px #fffadb);
            border: 2px solid gold;
            padding: 18px 40px;
            margin: 0px -10px -90px -10px;
            filter: drop-shadow(4px 4px 0px gold);
            display:inline-block;
        }



        body.night .mid-title {
            color: #ffffb6;
            font-family: courier;
            font-weight: 900;
            font-size: 2em;
            text-shadow: 2px 1px #ffb618;
            line-height: 82%;
            background: #333;
            text-align: center;
            filter: drop-shadow(8px 10px 0px #fffadb);
            border: 2px solid #ffc628;
            padding: 18px 40px;
            margin: 0px -10px -90px -10px;
            filter: drop-shadow(4px 4px 0px #ffffb6);
            display:inline-block;
        }



/* # # # # # # # # # # # # # # # # # # # # # # */



        /* BUTTONS */


        .buttongallery {
            border-radius: 30px;
            font-size: 18px;
            font-family: courier;
            font-weight: 900;
            width: 80%;
            font-size: 19px;
            font-family: Menlo, Verdana;
            color: #F2992E !important;
            background: #fff;
            filter: drop-shadow(8px 8px 0px #fffadb);
            border: 1px solid gold;
            padding: 4% 4% 4% 4%;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
            margin-top: 20px;
            margin-bottom: 0px;
            text-decoration: none;
        }

        .buttongallery:hover {
            background: orange;
            color: #fff !important;
            border: 1px solid #F2992E;
            padding: 2% 9% 2% 9%;
            margin-top: 45px;
            margin-bottom: 10px;
            margin-left: -30px;
            margin-right: -30px;
        }

        body.night .buttongallery {
            background: #333;
            border: 1px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
        }

        .buttoncontainer {
            width:100%;
            border:1px solid transparent;
            height:130px;
            margin-bottom:20px;
            margin-top:-160px;
        }




        .buttonwide {
            border-radius: 55px;
            width: 60%;
            max-width: 300px;
            padding: 40px 40px 40px 40px;
        }

        .buttonwide:hover {
            padding: 20px 90px 20px 90px;
        }



        /* RESUME / CV BUTTON */

        .cvlink {
            width: 130px;
            font-size: 14pt;
            font-family: Menlo, Verdana;
            color: #F2992E !important;
            background: #fff;
            filter: drop-shadow(8px 8px 0px #fffadb);
            border: 1px solid gold;
            padding: 20px 20px;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            transition: all 0.4s ease;
            margin-top: 20px;
            margin-bottom: 0px;
            text-decoration: none;
        }

        .cvlink:hover {
            font-size: 18px;
            color: #FFF !important;
            background: gold;
            border: 1px solid #F2992E;
            padding: 10px 50px;
            margin-top: 30px;
            margin-bottom: 10px;
        }


        body.night .cvlink {
            background: #494949;
            border: 1px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
        }

/* # # # # # # # # # # # # # # # # # # # # # # */


        /* URL A HREF CSS */

        a {
            color: #ffbb50;
            font-weight:600;
            letter-spacing: 1.2px;
            text-decoration: none;
        }

        a:hover {
/*            color: #ffe033 !important;*/
            color: #ffe033;
        }

        .urly:link, .urly:visited, .urly {
            color: #ffbb50;
            font-weight:600;
            letter-spacing: 1.3px;
            text-decoration: underline;
            text-decoration-color: #ffe033;
            padding:3px 3px;
        }

        .urly:hover {
/*            color: #ffe033;*/
            color: #333;
            text-decoration: none;
            padding:2px 3px;
            border-bottom: 1px solid #ffe033;
            border-top: 1px solid #ffe033;
/*            background: #fffadb;*/
        }





        /* TEXT AND PARAGRAPHS */

        p {
            text-align: justify;
            width:90%;
/*            max-width:650px;*/
            margin: 15px 5px;

            margin: 15px 5px;
            width:85%;
            max-width:550px;
        }

/*- - - - - - - - - - - - - - - - */

        .spacer{
            height:60px;
            width:10px;
        }


        .hr-space {
            margin: 35px 5px;
            background: #ffe88a;
            border: none;
        }

        .hr-goldblock {
            margin: 55px 5px -20px 5px;
            padding:3px;
            border:none;
            background: #ffe88a;
            border: 1px solid gold;
        }
        body.night .hr-goldblock {
            border: 1px solid #555;
            background: #333;
        }

/*- - - - - - - - - - - - - - - - */
        .caption {
            margin: 0;
            padding: 45px 15px 15px 15px;
        }

/* # # # # # # # # # # # # # # # # # # # # # # */











/* # # # # # # # # # # # # # # # # # # # # # # */

        /* SCROLLBAR */

        body::-webkit-scrollbar {
            width: 18px;
            height: 8px;
            background: #ffffff;
            border-left: 1px solid #d0d0d0;
            z-index: 999;
        }

        body::-webkit-scrollbar-thumb {
            background: #ffc800;
        }

        ::selection {
            color: #ffffff;
            background: #f7cc82;
        }

        ::-moz-selection {
            color: #ffffff;
            background: #f7c282;
        }

        ::-webkit-selection {
            color: #ffffff;
            background: #f7c282;
        }





/* # # # # # # # # # # # # # # # # # # # # # # */

        /* HEADER NAV BAR */

        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            background: #ffffff;
            border-bottom: 1px solid #d0d0d0;
            z-index: 9999 !important;
        }

        .exit {
            position: fixed;
            top: 15px;
            left: 15px;
        }

        .menu-btn,
        .luna,
        .solis,
        .bx-head {
            display: inline-block;
        }

        .menu-btn:hover .bx,
        .luna:hover .bx,
        .solis:hover .bx,
        .bx-head:hover .bx {
            background: #FFE584;
            color: white;
            cursor: pointer;
        }

        .menu-btn .bx,
        .luna .bx,
        .solis .bx,
        .bx-head .bx,
        .t-controls .bx {
            vertical-align: middle;
            font-size: 21px;
            padding: 17px;
            -webkit-transition: all 0.25s ease;
            -moz-transition: all 0.25s ease;
            -o-transition: all 0.25s ease;
            -ms-transition: all 0.25s ease;
            transition: all 0.25s ease;
        }

        .luna .bx,
        .solis .bx,
        .bx-head .bx {
            border-right: 1px solid #d0d0d0;
        }

        .menu-btn .bx {
            background: #ffc800;
            color: white;
        }

        .exit .bx {
            padding: 15px 10px;
            font-size: 40px;
            color: #333333;
            margin-left:-15px;
            margin-right:-5px;
        }

        .exit:hover .bx {
            color: #ffe033 !important;
            cursor: pointer;
        }

        .luna .bx,
        .solis .bx,
        .bx-head .bx {
            margin: -1px -2px 0px -5px;
            color: #ffc800;
            max-width:22px;
        }


        .t-controls {
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
        }

        .t-controls .bx {
            color: #333333;
            border-left: 1px solid #d0d0d0;
        }

        .menu-btn .bx,
        .t-controls .bx {
            border-right: 0 !important;
        }

        .search-wrap,
        .tags-wrap,
        .menu {
            display: none;
        }

        .close {
            display: inline-block;
            background: transparent;
        }

        .close:hover {
            background: transparent;
            color: #ffffff;
        }


        input::placeholder {
            color: #333333 !important;
        }



        /* CONTAINER */
/*        .container {*/
/*            margin: 100px auto;*/
/*            margin: 0px 0px;*/
/*
            width: 100%;
            max-width:100%;
*/
/*            width: 80vw;*/
/*        }*/


        .content {
            margin: 100px auto;
            width: 100%;
        }
        .content-spacing {
            margin: 100px auto;
            width: 90%;
            max-width: 1200px;
        }


/* DELETE */
        section {
            margin: 100px auto;
/*            width: 80vw;*/
            width: 90%;
            max-width: 1200px;
        }


        /* DAY NIGHT */
        body.night,
        body.night .menu,
        body.night .popup {
            background: #222222 !important;
            color: #ffffff;
             !important;
            -webkit-transition: all 0s ease;
            -moz-transition: all 0s ease;
            -o-transition: all 0s ease;
            -ms-transition: all 0s ease;
            transition: all 0s ease;
        }

        body.night::-webkit-scrollbar,
        body.night .header,
        body.night .sidebar {
            background: #333333;
        }

        body.night nav a,
        body.night .bx,
        body.night .searchbar,
        body.night .sr-title,
        body.night .navigation a,
        body.night .pages a,
        body.night .link,
        body.night .audio,
        body.night input::placeholder {
            color: #ffffff !important;
        }


        body.night nav a,
        body.night .bx,
        body.night .searchbar,
        body.night .sr-title,
        body.night .navigation a,
        body.night .pages a,
        body.night .link,
        body.night .audio,
        body.night input::placeholder {
            color: #ffffff !important;
        }

        body.night .post-header,
        body.night .post-footer,
        body.night .tags {
            background: #333333;
        }

        body.night article,
        body.night .description .backbutton {
        background: #494949;
        border: 1px solid #666666;
        }

        body.night .resumemini {
            background: #494949;
            border: 1px solid #666666;
        }

        body.night .cvlink {
            background: #494949;
            border: 1px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
        }

        body.night .banner-note {
            background: #494949;
            border: 1px solid #666666;
            filter: drop-shadow(8px 8px 0px #222);
        }

        body.night ol.notes li.note:nth-of-type(odd) {
            background: #494949;
        }

        body.night .lines:nth-of-type(even) {
            background: rgba(255, 200, 0, 0.7);
        }

        body.night .sidebar,
        body.night .header .bx {
            border-right: 1px solid #666666;
        }

        body.night .header,
        body.night .reblogged,
        body.night .post-header,
        body.night .ask-wrap,
        body.night .audio,
        body.night .link {
            border-bottom: 1px solid #666666;
        }

        body.night::-webkit-scrollbar,
        body.night .permalink .bx,
        body.night .post-footer .bx,
        body.night .t-controls .bx {
            border-left: 1px solid #666666;
        }

        body.night .post-footer,
        body.night .tags,
        body.night .notes,
        body.night .a-unnest .reblogged:first-of-type {
            border-top: 1px solid #666666;
        }

    img {
        max-width:100%;
        padding: 0px;
    }



    .imgs-div {
        text-align: center;
        width:auto;
        display: inline-block;
    }

    .imgs-side {
        height:350px;
    }

    .frame {
        background: #fff;
        padding: 13px 13px 8px 13px;
        margin:5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }

    .frame-space {
        height:10px;
        width: 15px;
        display: inline-block;
    }

    .frame-fff {
        border:2px solid #fff;
    }

    body.night .frame-fff {
        border:2px solid #222;

        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

    }



    .gifloops {
        max-width: 100%;
        image-rendering: pixelated;
    }


    .gifborder {
        border: 1px solid black;
    }



    .footernav-single {
        margin-top:-188px;
        margin-bottom:-150px;
        height:100px;
        width:300px;
        display:inline-block;
        align-items: center;
    }






    .footernav-container {
        margin-top:-188px;
        margin-bottom:-150px;
        height:200px;
        width:100%;
        display: flex;
/*        display: inline-flex;*/
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }


    .footernav-button .nextbutton-text {
        text-align: center;
        font-size: 14pt;
        color: #ffb618;
        font-family: courier;
        font-weight: 500;
        text-shadow: 2px 1px #ffe88a;
        line-height: 0.75em;
        background: #fff;
        border: 2px solid gold;
        filter: drop-shadow(4px 4px 0px gold);
        text-align: center;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;

        padding: 15px 20px;
        margin: 10px 10px;
        line-height: 0.95em;
    }


    .footernav-button:hover .nextbutton-text {
        color: #ffb618;
        text-shadow: 2px 1px #ffb618;
        border: 2px solid gold;
        filter: drop-shadow(4px 4px 0px gold);
        text-align: center;

        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;

        color: #fff;
        text-shadow: 2px 1px #ffe88a;
/*        background: #ffe88a;*/
        background: #ffd773;
        border: 2px solid #ffb618;
        filter: drop-shadow(4px 4px 0px #ffb618);


        padding: 10px 45px;
        margin: 10px -15px;
    }


    .footernav-button .nextbutton-text-smaller {
        text-align: center;
        font-size: 11pt;
        font-family: courier;
        text-shadow: 2px 1px #fff;
        line-height: 1.25em;
        letter-spacing: 1.8px;
/*        text-decoration: underline;*/
/*        text-decoration-color: #ffe88a;*/
        border:none;
        border-bottom: 2px dashed #ffe88a;
        font-weight: 600;
    }

    .footernav-button:hover .nextbutton-text-smaller {
        color:#fff;
        text-shadow: 2px 1px #ffe88a;
        border:none;
        border-bottom: 2px dashed #fff;
    }




    body.night .nextbutton-text  {
        color: #ffffb6;
        text-shadow: 2px 1px #ffb618;
        background: #333;
/*        filter: drop-shadow(8px 10px 0px #fffadb);*/
        filter: drop-shadow(4px 4px 0px #ffffb6);
    }


    body.night .footernav-button:hover .nextbutton-text {
            color: #ffb618;
            text-shadow: 2px 1px #cf8600;
            background: #ffffb6;
            filter: drop-shadow(7px 9px 0px gold);
    }



    body.night .footernav-button .nextbutton-text-smaller  {
            color: #ffffb6;
            text-shadow: 2px 1px #333;
    }
    body.night .footernav-button:hover .nextbutton-text-smaller  {
            color: #cf8600;
            text-shadow: 2px 1px #ffffb6;
    }






    .centertweet {
        display: inline-block;
        max-width: 100%;
    }

    .twitter-tweet {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        border-radius: 12px;
        max-width: 100%;
    }



        .button-div {
            display: inline-block;
            border: 1px solid transparent;
            padding: 17px;
            width: 270px;
            height: 270px;
            z-index:5;
            max-width:100%;
            position: relative;
        }

        .button-div:hover {
            border: 1px solid gold;
            background: #fffadb;
        }

        .button-div img {
            border: 4px solid #fff;
            width: 260px;
            margin: 0;
            image-rendering: pixelated;
            max-width:100%;
        }

        .button-div:hover img {
            border: 4px solid #fff;
            width: 270px;
            margin: -5px;
            max-width:100%;
        }



        .button-div video {
            border: 4px solid #fff;
            width: 260px;
            margin: 0;
            image-rendering: pixelated;
            max-width:100%;
        }

        .button-div:hover video {
            border: 4px solid #fff;
            width: 270px;
            margin: -5px;
            max-width:100%;
        }


        .button-div .index-vidbutton {
            width: 260px;
            max-width:100%;
            margin: 0;
            border: 4px solid #fff;
        }
        .button-div .index-vidbutton:hover {
            width: 270px;
            max-width:100%;
            margin: -0px;
            border: 4px solid #fff;
        }


        .button-div .frontbutton-text {
            display: inline-block;
            text-align: center;
            font-size: 28pt;
            margin:-50px 0px 0px -5px;
            padding:10px 5px;

            color: #ffb618;
            font-family: courier;
            font-weight: 900;
            text-shadow: 2px 1px #ffe88a;
            line-height: 0.5em;
            background: #fff;
            border: 2px solid gold;
            filter: drop-shadow(4px 4px 0px gold);
            text-align: center;
            width:270px;
            height:20px;
        }


        .button-div:hover .frontbutton-text {
            font-size: 35pt;
            padding-bottom:20px;
            color: #fff;
            text-shadow: 2px 1px #ffe88a;
            background: #ffe88a;
            border: 2px solid #ffb618;
            filter: drop-shadow(4px 4px 0px #ffb618);
            width:310px;
            margin:-50px 0px 0px -30px;
        }




        .button-div .frontbutton-text-sm {
            display: inline-block;
            text-align: center;
            font-size: 28pt;
            margin:-50px 0px 0px -5px;
            padding:10px 5px;
            color: #ffb618;
            font-family: courier;
            font-weight: 900;
            text-shadow: 2px 1px #ffe88a;
            line-height: 0.75em;
            background: #fff;
            border: 2px solid gold;
            filter: drop-shadow(4px 4px 0px gold);
            text-align: center;
            width:270px;
        }


        .button-div:hover .frontbutton-text-sm {
            font-size: 35pt;
            padding-bottom:30px;
            padding:10px 5px 10px 5px;
            color: #fff;
            text-shadow: 2px 1px #ffe88a;
            background: #ffe88a;
            border: 2px solid #ffb618;
            filter: drop-shadow(4px 4px 0px #ffb618);
            width:310px;
            margin:-65px 0px 0px -30px;
        }
















/* - - - - - - - - - - - - - - - - */
/* END OF INDEX / FRONT PAGE STUFF */
/* - - - - - - - - - - - - - - - - */




        body {
            background: #fff;
            overflow-x: hidden;
        }






         .banner-note {
            background: #fff;
            border: 1px solid gold;
            padding: 12px 32px;
            text-align: center;
            width: 500px;
            max-width: 100%;
            margin-bottom: -70px;
            margin-top: 10px;
            filter: drop-shadow(8px 8px 0px #fffadb);
        }


        body.night .button-div {
            background: #494949;
            border: none;
        }


/*for frontpage*/
        .noborder {
            border: none;
        }
        .frontpage {
            max-width:1200px;
            max-width:100%;
            margin:0px -15px;
            padding:-30px;
        }

        .resumemini {
            max-width: 540px;
            margin: 10px 0 10px 0;
            background: #fffdf3;
            border: 1px solid gold;
            padding: 20px;

        }

        .resumemini-img {
            max-width: 100%;
            filter:
                drop-shadow(2px 2px 2px #aaa)
                drop-shadow(3px 4px 6px #ccc);
        }

        .cvlink {
            width: 130px;
            font-size: 14pt;
            font-family: Menlo, Verdana;
            color: #F2992E !important;
            background: #fff;
            filter: drop-shadow(8px 8px 0px #fffadb);
            border: 1px solid gold;
            padding: 20px 20px;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            transition: all 0.4s ease;
            margin-top: 20px;
            margin-bottom: 0px;
            text-decoration: none;
        }

        .cvlink:hover {
            font-size: 18px;
            color: #FFF !important;
            background: gold;
            border: 1px solid #F2992E;
            padding: 10px 50px;
            margin-top: 30px;
            margin-bottom: 10px;
        }






    .fx-photoborder{
        text-align: justify;
        margin: 5px 0px;
        padding:10px;
        border:1px solid #eee;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        background:#fff;
    }

    body.night .fx-photoborder{
        border:1px solid #555;
        box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.6) 0px 3px 7px -3px;
    }

    .fx-thinbord{
        margin: -0.5px;
        border:1px solid #000;
    }

    body.night .fx-thinbord{
        border:1px solid #ddd;
    }

    .td-left{
        /* for fx-thinbord*/
        padding-left:5px;
        padding-right:0px;
/*        margin:5px;*/
/*        padding:5px;*/
/*        padding:0px 0px -5px 14px;*/
/*        for fx-photoborder*/
        padding-left:0px;
        padding-right:25px;
/*        border:2px solid blue;*/
    }

    .td-right{
        /* for fx-thinbord*/
        padding-left:0px;
        padding-right:5px;
/*        margin:15px;*/
/*        padding:5px;*/
/*        padding:0px 14px -5px 0px;*/
/*        for fx-photoborder*/
        padding-left:5px;
        padding-right:20px;
/*        border:2px solid blue;*/
    }

    .sidebyside-image{
        display: inline-block;
        max-width:550px;
        vertical-align:top;
        margin:5px 5px;
    }

    .sidebyside-image p {
        margin:5px -40px 10px -40px;
    }



    .sidebyside-textbox{
        display: inline-block;
        padding:15px 25px;
        padding:15px 25px;
        margin:10px 5px;
        text-align:justify;
        max-height:480px;
        max-width:490px;
    }
    .sidebyside-textbox img{
        max-width:100%;
    }


        .sidebyside-image-500pxpair{
                margin:5px 20px;
                padding:0px;
        }






     .textbox-border{
        border:1px solid #ddd;
        background: #fff;
        filter: drop-shadow(8px 8px 0px #fffadb);
    }
    body.night .textbox-border{
        background: #444;
        filter: drop-shadow(8px 8px 0px #333);
        border:1px solid #aaa;
    }


    .fx-imgpop{
        border:1px solid #aaa;
        filter: drop-shadow(6px 6px 0px #ccc);
    }



    body.night .fx-imgpop{
        filter: drop-shadow(6px 6px 0px #333);
        border:1px solid #eee;
    }



.sketchfab-embed-wrapper{
    display: inline-block;
    width:100%;
    border-radius: 5px;
}

.sketchfab-embed-wrapper iframe{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background:#fff;
    width:100%;
    border-radius: 5px;
}



.sketchfab-instructions{
    line-height: 70%;
    padding:10px;
    max-width: 520px;
    width: 100%;
    border:1px solid #eee;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 3px;
    margin:-20px 0px 0px 0px;
}


.sidebyside-scaling-container{
    max-width:100%;
    margin:20px 0px;
}





.sidebyside-scaling{
    position: relative;
    pointer-events: none;
    width:50%;
    max-width: 100%;
    max-width: 550px;
}


.scaling-left{
    margin: -60px -100px -60px -100px;
    margin: -40px -50px -40px -150px;
    transform: rotate(-8deg);
}

.scaling-right{
    margin: -60px -100px -60px -100px;
    margin: -40px -150px -40px -50px;
    transform: rotate(4deg);
}


    .fx-photoborder-rot{
        text-align: justify;
        padding:1%;
        border:1px solid #eee;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        background:#fff;
    }

    body.night .fx-photoborder-rot{
        border:1px solid #555;
        box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.6) 0px 3px 7px -3px;
    }




/*  FOR MINI FOLIO PAGE  */

.minifolio-textboxes p {
/*            background:#ffe196;*/
            padding:20px;
/*            border:1px solid #55aaa5;*/
/*            filter: drop-shadow(4px 4px 0px #ffb618);*/
            margin:0px;
        }


        .minifolio-altbg p {
            background:#ffe196;
            padding:20px;
            border:1px solid #000;
            filter: drop-shadow(4px 4px 0px #ffb618);
            margin:0px;
        }

        .minifolio-altbg {
            background:#ffc800;
            padding:50px;
            margin:30px -40px 50px -40px;
            border:5px solid #ffe196;
        }


        body.night .minifolio-altbg p {
            background: #494949;
/*            background: #333331;*/
            border:1px solid #000;
            padding:20px;
            filter: drop-shadow(4px 4px 0px #221);
/*            filter: drop-shadow(4px 4px 0px #333331);*/

        }

        body.night .minifolio-altbg {
            background: #333331;
            border: none;
            border:5px solid #111;
        }



.vid-caseysatchel{
/*            border-top:5px solid gold;*/
/*            border-bottom:5px solid gold;*/
/*            border-left:5px solid goldenrod;*/
/*            border-right:5px solid goldenrod;*/
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
/*            border:10px solid #fff;*/
            border-radius: 2px;
/*            border-left:1px solid #fff;*/
/*            border-right:1px solid #fff;*/
        }




        .webgl-container{
            background-image: url("https://creatureframe.github.io/assets/tech/images/embed_webgl_575x575_bg.png");
            background-repeat: no-repeat;
            max-width: 575px;
            width:100%;
            height:575px;
            max-height:575px;
            padding:37px 20px;
            margin-bottom: -130px;
            background-clip: padding-box;
            background-size: 100% 100%;
        }

        .webgl-embed{
            max-width: 500px;
            width:100%;
            height: 100%;
            max-height: 500px;
        }