@import '../../../public/css/docfx/template.css';

h1, h2, h3, h4, h5, .article.row.article > div > article h5 { color: var(--str8tween-primary); }
body {
    color: var(--str8tween-primary-black);
    background-color: var(--str8tween-secondary-white);
}

.article.row.grid-right pre {
    border-color: var(--str8tween-secondary-light-gray);
    background-color: var(--str8tween-secondary-lighter-gray);
    color: var(--str8tween-primary-black);
}

code {
    background-color: var(--str8tween-secondary-lighter-gray);
    color: var(--str8tween-primary-black);
}

.toc li:after, .hljs { color: var(--str8tween-primary-black); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--str8tween-secondary-lighter-gray); }

/************************************************************** DARK MODE **************************************************************/

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark .article.row.article > div > article h5 { color: var(--str8tween-primary-lighter); }
body.dark {
    color: var(--str8tween-secondary-white);
    background-color: var(--str8tween-darkmode-primary);
}

body.dark .article.row.grid-right pre {
    border-color: var(--str8tween-secondary-gray);
    background-color: var(--str8tween-darkmode-secondary);
    color: var(--str8tween-secondary-white);
}

body.dark code {
    background-color: var(--str8tween-darkmode-secondary);
    color: var(--str8tween-secondary-white);
}

body.dark .toc li:after, body.dark .hljs { color: var(--str8tween-secondary-white); }
body.dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--str8tween-darkmode-secondary); }

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

body .toc, .sidefilter, .sidetoc, .sidenav { background-color: var(--str8tween-secondary-lighter); }
.toc .nav > li > a { color: var(--str8tween-primary-black); }
.toc .nav.level1 > li > a, 
.toc .nav > li > a:hover,
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > a, 
.toc .nav > li.active > a:hover, 
.toc .nav > li.active > a:focus,
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li > .expand-stub + a {
    color: var(--str8tween-primary);
}

/************************************************************** DARK MODE **************************************************************/

body.dark .toc, body.dark .sidefilter, body.dark .sidetoc, body.dark .sidenav { background-color: var(--str8tween-darkmode-secondary); }
body.dark .toc .nav > li > a { color: var(--str8tween-secondary-white); }
body.dark .toc .nav.level1 > li > a, 
body.dark .toc .nav > li > a:hover,
body.dark .toc .nav > li > .expand-stub::before,
body.dark .toc .nav > li.active > a, 
body.dark .toc .nav > li.active > a:hover, 
body.dark .toc .nav > li.active > a:focus,
body.dark .toc .nav > li.active > .expand-stub::before,
body.dark .toc .nav > li > .expand-stub + a {
    color: var(--str8tween-primary-lighter);
}

body.dark .toc-toggle.btn { color: var(--str8tween-secondary-light-gray); }
body.dark .toc-toggle.btn.focus, 
body.dark .toc-toggle.btn:focus, 
body.dark .toc-toggle.btn:hover {
    color: var(--str8tween-secondary-gray);
}

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

.sideaffix ul ul li a, 
.sideaffix ul.level1 > li > a { 
    color: var(--str8tween-primary-black); 
}

.sideaffix h5,
.sideaffix ul li > a:active,
.sideaffix ul li > a:focus,
.sideaffix ul li.active > a,
.sideaffix ul li.active > a:before {
    color: var(--str8tween-primary);
}

.sideaffix::-webkit-scrollbar-track { background-color: var(--str8tween-secondary-light-gray); }
.sideaffix::-webkit-scrollbar-thumb { background-color: var(--str8tween-secondary-dark); }
.sideaffix::-webkit-scrollbar-thumb:hover { background-color: var(--str8tween-darkmode-secondary); }

/************************************************************** DARK MODE **************************************************************/

body.dark .sideaffix ul ul li a,
body.dark .sideaffix ul.level1 > li > a { 
    color: var(--str8tween-secondary-white); 
}

body.dark .sideaffix h5,
body.dark .sideaffix ul li.active > a,
body.dark .sideaffix ul li.active > a:before {
    color: var(--str8tween-primary-lighter);
}

body.dark .sideaffix::-webkit-scrollbar-track { background-color: var(--str8tween-darkmode-secondary); }
body.dark .sideaffix::-webkit-scrollbar-thumb { background-color: var(--str8tween-secondary-dark); }
body.dark .sideaffix::-webkit-scrollbar-thumb:hover { background-color: var(--str8tween-secondary-light-gray); }

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

.button:hover,
.button:active,
.button:focus {
    color: var(--str8tween-primary-dark);
}
.button:hover { border-color: var(--str8tween-primary-dark); }
.button.donate { margin: 30px auto 0 auto; }

/************************************************************** HOMEPAGE **************************************************************/

.article.row.grid > div > article[data-uid="homepage"] {
    max-width: 100%;
    width: 100%;
    margin-top: -85px; /*drags the article under the sticky header */
    padding: 100px 0 0 0; /*padding-top compensates the margin top -70px above*/
    background-image: radial-gradient(farthest-corner at 50% 35%, var(--str8tween-primary), var(--str8tween-primary-lighter), var(--str8tween-secondary));
}

.article.row.grid > div > article[data-uid="homepage"] h1,
.article.row.grid > div > article[data-uid="homepage"] h1 + p {
    display: flex;
    justify-content: center;
    margin: 0;
}

.article.row.grid > div > article[data-uid="homepage"] h1 {
    padding: 85px 0 0 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 86px;
    color: var(--str8tween-primary-black);
}

.article.row.grid > div > article[data-uid="homepage"] h1 + p {
    margin: 0;
    padding: 30px 0;
    font-size: 24px;
}

.article.row.grid > div > article[data-uid="homepage"] > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 105px 0 0 0;
    background-color: var(--str8tween-secondary-white);
}

.article.row.grid > div > article[data-uid="homepage"] > div > div {
    display: flex;
    margin: 0;
    width: 100%;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:first-child {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 100px 0 0 0;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:first-child > .button {
    margin: 25px 48px;
    padding: 10px 16px;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:first-child > img {
    position: absolute;
    top: -101px;
    margin: auto;
    width: 216px;
    height: 216px;
    border-radius: 50%;
    padding: 16px;
    background-color: var(--str8tween-secondary-white);
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) {
    flex-direction: row;
    justify-content: center;
    align-items: start;
    padding: 0;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 54px;
    width: 496px;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child {
    border-top: none;
    border-left: 1px solid;
    border-color: var(--str8tween-secondary-light-gray);
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 100px;
    padding: 0 30px;
    border-top: 1px solid;
    border-color: var(--str8tween-secondary-light-gray);
    max-width: 668px;
}

.article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div > h2,
.article.row.grid > div > article[data-uid="homepage"] > div > div:last-child > h2 {
    margin-top: 0;
    padding-top: 25px;
    width: 100%;
}

/************************************************************** GET STARTED **************************************************************/

.article.row > div > article[data-uid="get_started_setup"] pre, 
.article.row > div > article[data-uid="get_started_create_a_tween"] pre, 
.article.row > div > article[data-uid="get_started_tweens_management"] pre, 
.article.row > div > article[data-uid="advanced_chaining_tweens"] pre {
    margin-bottom: 5px;
}

.article.row > div > article[data-uid="advanced_properties"] h1#properties,
.article.row > div > article[data-uid="features_events"] h1#events {
    font-weight: 500;
    margin-top: 25px;
}

.animation-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    margin: 8px 0px 16px 0;
}

p + .animation-wrapper { height: 28px; }
.animation-steps {
    position: absolute;
    top: 0;
}

.animation, .animation-step {
    height: 42px;
    width: 42px;
}

.animation-step {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 50px;
    border: 1px dotted;
    border-color: var(--str8tween-primary-black);
}

.animation-step > p { margin: 0; }
.animation {
    position: relative;
    top: 0;
    left: 22px;
    background-color: var(--str8tween-secondary-light-gray);
}

.animation-btn,
.animation-btn:hover,
.animation-btn:focus {
    scale: 1;
    width: 28px;
    padding: 2px 0;
    border-radius: 50%;
    border: 2px solid;
    border-color: var(--str8tween-secondary-gray);
    background-color: transparent;
    box-shadow: 1px 1px 4px var(--str8tween-secondary-light-gray);
    color: var(--str8tween-primary);
}

.animation-btn > p,
.animation-btn:hover > p {
    margin: 0 -1px 0 0;
    padding: 0;
    transform: rotate(-90deg);
}

.scale-effect-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
}

#move-effect.animate { animation: move-effect 1.5s ease-in-out 0s infinite alternate; }
#scale-effect.animate { animation: scale-effect 1.5s ease-in-out 0s infinite alternate; }
#rotate-effect.animate { animation: rotate-effect 1.5s ease-in-out 0s infinite alternate; }
#fade-effect.animate { animation: fade-effect 1.5s ease-in-out 0s infinite alternate; }
@keyframes move-effect {
    0%   { left: 22px; }
    100% { left: 118px; }
}
@keyframes scale-effect {
    0%   { width: 42px; height: 42px; }
    100% { width: 10px; height: 10px; }
}
@keyframes rotate-effect {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fade-effect {
    0%   { opacity: 1; }
    100% { opacity: 0.1; }
}

#restart-style.animate { animation: restart-style 1.5s ease-in-out 0s infinite forwards; }
#oscillate-style.animate { animation: oscillate-style 1.5s ease-in-out 0s infinite alternate; }
#offset-style.animate { animation: offset-style 3.5s ease-out 0s infinite forwards; }
@keyframes restart-style {
    0%   { left: 22px; }
    100% { left: 118px; }
}
@keyframes oscillate-style {
    0%   { left: 22px; }
    100% { left: 118px; }
}
@keyframes offset-style {
    0%   { left: 22px; }
    33%  { left: 118px; }
    66%  { left: 214px; }
    100% { left: 310px; }
}

#static-mode.animate { animation: static-mode 3.5s ease-in-out 0s infinite forwards; }
#dynamic-mode.animate { animation: dynamic-mode 3.5s ease-in-out 0s infinite forwards; }
#projected-mode.animate { animation: projected-mode 3.5s ease-in-out 0s infinite forwards; }
@keyframes static-mode {
    0%    { left: 22px; }
    50%   { left: 118px; }
    75%   { left: 166px; }
    75.1% { left: 118px; }
    100%  { left: 118px; }
}
@keyframes dynamic-mode {
    0%    { left: 22px; }
    50%   { left: 118px; }
    75%   { left: 166px; }
    75.1% { left: 214px; }
    100%  { left: 214px; }
}
@keyframes projected-mode {
    0%    { left: 22px; }
    50%   { left: 118px; }
    75%   { left: 166px; }
    75.1% { left: 310px; }
    100%  { left: 310px; }
}

/******************************************************************* API *******************************************************************/

.article.row.grid-right h4 > a:hover::after { background-color: var(--str8tween-primary) }
.article.row.grid-right h1,
.article.row.grid-right h2,
.article.row.grid-right h3,
.article.row.grid-right h4 > a {
    color: var(--str8tween-primary);
}

/************************************************************** DOWNLOAD **************************************************************/

.article.row.grid > div > article[data-uid="download"]{ margin-bottom: 50px; }

/************************************************************** DARK MODE **************************************************************/

body.dark .button { border-color: var(--str8tween-primary-lighter); }
body.dark .button,
body.dark .button:active,
body.dark .button:focus {
    color: var(--str8tween-primary-lighter);
}

body.dark .button::before { background-image: linear-gradient(to bottom right, var(--str8tween-primary), var(--str8tween-secondary)); }
body.dark .button:hover { 
    border-color: var(--str8tween-primary-lighter);
    color: var(--str8tween-darkmode-primary);
}

/* HOMEPAGE */
body.dark .article.row.grid > div > article[data-uid="homepage"] { background-image: radial-gradient(farthest-corner at 50% 35%, var(--str8tween-primary), var(--str8tween-primary-light), var(--str8tween-primary-lighter), var(--str8tween-secondary)); }
body.dark .article.row.grid > div > article[data-uid="homepage"] h1 { color: var(--str8tween-secondary-white); }
body.dark .article.row.grid > div > article[data-uid="homepage"] > div { background-color: var(--str8tween-darkmode-primary); }
body.dark .article.row.grid > div > article[data-uid="homepage"] > div > div:first-child > img { background-color: var(--str8tween-darkmode-primary); }
body.dark .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child { border-color: var(--str8tween-darkmode-secondary); }
body.dark .article.row.grid > div > article[data-uid="homepage"] > div > div:last-child { border-color: var(--str8tween-darkmode-secondary); }

/* GET STARTED */
body.dark .animation-step { border-color: var(--str8tween-secondary-white); }
body.dark .animation { background-color: var(--str8tween-secondary-dark); }
body.dark .animation-btn,
body.dark .animation-btn:hover,
body.dark .animation-btn:focus {
    border-color: var(--str8tween-secondary-gray);
    box-shadow: none;
    color: var(--str8tween-primary-lighter);
}

/* API */
body.dark .article.row.grid-right h1,
body.dark .article.row.grid-right h2,
body.dark .article.row.grid-right h3,
body.dark .article.row.grid-right h4 > a {
    color: var(--str8tween-primary-lighter);
}

/* SUPPORT */
body.dark .article.row.grid > div > article[data-uid="support"] form input,
body.dark .article.row.grid > div > article[data-uid="support"] form textarea {
    border-color: var(--str8tween-secondary-dark);
    background-color: var(--str8tween-darkmode-secondary);
}

/* 
 ######  ########    ###    ########   ######  ##     ##  ########  ########  ######  ##     ## ##       ########  ######
##    ## ##         ## ##   ##     ## ##    ## ##     ##  ##     ## ##       ##    ## ##     ## ##          ##    ##    ##
##       ##        ##   ##  ##     ## ##       ##     ##  ##     ## ##       ##       ##     ## ##          ##    ##
 ######  ######   ##     ## ########  ##       #########  ########  ######    ######  ##     ## ##          ##     ######
      ## ##       ######### ##   ##   ##       ##     ##  ##   ##   ##             ## ##     ## ##          ##          ##
##    ## ##       ##     ## ##    ##  ##    ## ##     ##  ##    ##  ##       ##    ## ##     ## ##          ##    ##    ##
 ######  ######## ##     ## ##     ##  ######  ##     ##  ##     ## ########  ######   #######  ########    ##     ######
*/
#search-results .sr-item > .item-href,
#search-results .sr-items .sr-item .item-title > a { 
    color: var(--str8tween-primary);
}

#search-results .sr-items .sr-item .item-title > a::after { background-color: var(--str8tween-primary); }
.pagination .page.active {
    color: var(--str8tween-primary-black);
    background-color: var(--str8tween-primary-light);
}

.pagination > li > a::after { transform: scaleX(0); }
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    color: var(--str8tween-secondary-gray);
    background-color: var(--str8tween-secondary-white);
    border-color: var(--str8tween-secondary-gray);
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    color: var(--str8tween-primary-black);
    background-color: var(--str8tween-primary-lighter);
    border-color: var(--str8tween-primary-lighter);
}

.pagination > li > a { color: var(--str8tween-primary); }
.pagination > li > a:hover {
    color: var(--str8tween-primary-black);
    background-color: var(--str8tween-secondary-lighter-gray);
    border-color: var(--str8tween-secondary-gray);
}

/************************************************************** DARK MODE **************************************************************/

body.dark #search-results .sr-item > .item-href { color: var(--str8tween-primary-lighter); }
body.dark .pagination .page.active {
    color: var(--str8tween-primary-lighter);
    background-color: var(--str8tween-darkmode-primary);
}

body.dark #search-results mark {
    background-color: var(--str8tween-darkmode-secondary);
    color: var(--str8tween-secondary-lighter-gray);
}

body.dark .pagination > .disabled > a,
body.dark .pagination > .disabled > a:focus,
body.dark .pagination > .disabled > a:hover,
body.dark .pagination > .disabled > span,
body.dark .pagination > .disabled > span:focus,
body.dark .pagination > .disabled > span:hover {
    color: var(--str8tween-secondary-gray);
    background-color: var(--str8tween-darkmode-primary);
    border-color: var(--str8tween-secondary-gray);
}

body.dark .pagination > .active > a,
body.dark .pagination > .active > a:focus,
body.dark .pagination > .active > a:hover,
body.dark .pagination > .active > span,
body.dark .pagination > .active > span:focus,
body.dark .pagination > .active > span:hover {
    color: var(--str8tween-darkmode-primary);
    background-color: var(--str8tween-primary-light);
    border-color: var(--str8tween-secondary-gray);
}

body.dark .pagination > li > a:hover {
    color: var(--str8tween-secondary-lighter-gray);
    background-color: var(--str8tween-primary-light);
    border-color: var(--str8tween-secondary-gray);
}

body.dark .pagination > li > a { 
    background-color: var(--str8tween-darkmode-primary);
    border-color: var(--str8tween-secondary-gray);
    color: var(--str8tween-primary-light);
}

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

@media (max-width: 260px) {
    .article.row.grid > div > article[data-uid="homepage"] h1 + p { font-size: 16px; }
    .article.row.grid > div > article[data-uid="homepage"] > div > div:first-child > .button { margin: 15px; }
    .article.row.grid > div > article[data-uid="support"] form > .form-buttons > .button { margin: 20px auto; }
}

@media (min-width: 260px) and (max-width:480px) {
    .article.row.grid > div > article[data-uid="homepage"] h1 + p { font-size: 18px; }
    .article.row.grid > div > article[data-uid="homepage"] > div > div:first-child > .button { margin: 20px; }
    .article.row.grid > div > article[data-uid="support"] form > .form-buttons > .button { margin: 20px; }
}

@media (max-width: 480px) {
    .article.row.grid > div > article[data-uid="homepage"] h1 { font-size: 34px; }
    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div, 
    .article.row.grid > div > article[data-uid="homepage"] > div > div:last-child {
        width: 95%;
        padding: 0 10px;
    }

    .article.row.grid > div > article[data-uid="homepage"] > div > div:last-child { margin-bottom: 140px; }
    li > .animation-wrapper { margin-left: -25px; }
    .animation-steps { top: 12px; }
    .animation-step { margin-left: 15px; }
    .animation-steps > .animation-step:first-child { margin-left: 38px; }
    .animation-step, 
    .animation {
        width: 32px;
        height: 32px;
    }

    .animation-btn, 
    .animation-btn:hover, 
    .animation-btn:focus {
        margin: 14px 10px 14px 0;
    }

    /* EFFECTS */
    @keyframes move-effect {
        0%   { left: 0; }
        100% { left: 101px; }
    }
    @keyframes scale-effect {
        0%   { width: 32px; height: 32px; }
        100% { width: 8px; height: 8px; }
    }
    
    /* LOOP STYLE */
    @keyframes restart-style {
        0%   { left: 0; }
        100% { left: 50px; }
    }
    @keyframes oscillate-style {
        0%   { left: 0; }
        100% { left: 50px; }
    }
    @keyframes offset-style {
        0%   { left: 0; }
        33%  { left: 50px; }
        66%  { left: 100px; }
        100% { left: 150px; }
    }
    
    /* COMPLETION MODE */
    @keyframes static-mode {
        0%    { left: 0; }
        50%   { left: 50px; }
        75%   { left: 75px; }
        75.1% { left: 50px; }
        100%  { left: 50px; }
    }
    @keyframes dynamic-mode {
        0%    { left: 0; }
        50%   { left: 50px; }
        75%   { left: 75px; }
        75.1% { left: 100px; }
        100%  { left: 100px; }
    }
    @keyframes projected-mode {
        0%    { left: 0; }
        50%   { left: 50px; }
        75%   { left: 75px; }
        75.1% { left: 150px; }
        100%  { left: 150px; }
    }
}

@media (min-width: 480px) and (max-width:767px) {
    .article.row.grid > div > article[data-uid="homepage"] h1 { font-size: 58px; }
    .article.row.grid > div > article[data-uid="homepage"] h1 + p { font-size: 22px; }
    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div, 
    .article.row.grid > div > article[data-uid="homepage"] > div > div:last-child {
        width: 90%;
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    #sidetoggle a[title="Str8lines.Tweening"] + ul > li { width: 100%; }
    #sidetoggle a[title="Str8lines.Tweening"] + ul > li::after, 
    #sidetoggle li:last-child:after {
        content: none;
    }

    /* UPDATES HOMEPAGE LAYOUT */
    .article.row.grid > div > article[data-uid="homepage"] h1 { padding: 28px 0; }
    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) {
        flex-direction: column;
        align-items: center;
    }

    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div { 
        text-align: center;
        align-items: center;
    }

    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child {
        border-top: 1px solid var(--str8tween-secondary-light-gray);
        border-left: none;
    }

    body.dark .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child {
        border-top: 1px solid var(--str8tween-darkmode-secondary);
        border-left: none;
    }
    
    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child, 
    .article.row.grid > div > article[data-uid="homepage"] > div > div:last-child {
        margin-top: 15px;
    }

    .article.row.grid > div > article[data-uid="homepage"] > div > div:nth-child(2) > div:last-child > ul { padding: 0; }
}

@media (min-width: 769px) and (max-width:1199px) {
    .article.row.grid > div > article[data-uid="homepage"] h1 { font-size: 72px; }
}