/* FONTS */

@font-face {
    font-family: 'Helveesti Plus Variable';
    src: url('../fonts/public/ABCHelveestiPlusVariable.woff2') format('woff2'),
        url('../fonts/public/ABCHelveestiPlusVariable.ttf') format('truetype');
}

@font-face {
    font-family: 'Neureal';
    src: url('../fonts/public/Neureal-Regular.woff2') format('woff2'),
        url('../fonts/public/Neureal-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Neureal Mono';
    src: url('../fonts/public/Neureal-Mono.woff2') format('woff2'),
        url('../fonts/public/Neureal-Mono.ttf') format('truetype');
}

/* START */

:root {
    /* color */
    --white: #F5F5F5;
    --grey: #9C9C9C;
    --black: #0E0E0E;
    --red: #FD0000;
    --green: #007B32;
    --blue: #004EFF;
    --yellow: #FFB100;

    /* typography */
    --detailType: "Neureal Mono", monospace;
    --linkType: "Neureal", sans-serif;
    --bodyType: "Helveesti Plus Variable", sans-serif;
    --displayType: "Helveesti Plus Variable", serif;

    --regularWGHT: "wght"400;
    --mediumWGHT: "wght"571;
    --boldWGHT: "wght"729;
    --heavyWGHT: "wght"802;
    --blackWGHT: "wght"900;

    --smallSPKE: "SPKE"0;
    --semiSPKE: "SPKE"0.75;
    --fullSPKE: "SPKE"1;

    /* mesurements */
    --spacing: 1rem;
    --lineStroke: .1rem;
    --indent: 1rem;
    --corner: .5rem;

    /* color themes */
    /* primary scheme */
    --theme-background: var(--black);
    --theme-background-accent: red;

    --theme-ui: var(--white);
    --theme-ui-accent: var(--black);

    --theme-text: var(--white);
    --theme-text-accent: var(--grey);

    --theme-btn-background: red;
    --theme-btn-text: red;

    --theme-graphics: var(--white);
    --theme-graphics-background: red;
    --theme-graphics-text: red;
    --theme-graphics-accent: red;

    /* secondary scheme */
    --theme-alt-background: var(--white);
    --theme-alt-background-accent: red;

    --theme-alt-ui: red;
    --theme-alt-ui-accent: red;

    --theme-alt-text: var(--black);
    --theme-alt-text-accent: var(--grey);

    --theme-alt-btn-background: red;
    --theme-alt-btn-text: red;

    --theme-alt-graphics: red;
    --theme-alt-graphics-background: red;
    --theme-alt-graphics-text: red;
    --theme-alt-graphics-accent: red;
}

.black-theme {
    --theme-background: var(--black);
}

.shift-black {
    --theme-background: var(--black) !important;
    --theme-ui: var(--black) !important;
    --theme-ui-accent: var(--white) !important;
}

.white-theme {
    --theme-background: var(--white);
    --theme-text: var(--black);
}

.shift-white {
    --theme-background: var(--white) !important;
    --theme-text: var(--black) !important;
}

.red-theme {
    --theme-background: var(--red);
}

.shift-red {
    --theme-background: var(--red) !important;
}

.green-theme {
    --theme-background: var(--green);
}

.shift-green {
    --theme-background: var(--green) !important;
}

.blue-theme {
    --theme-background: var(--blue);
}

.shift-blue {
    --theme-background: var(--blue) !important;
}

.yellow-theme {
    --theme-background: var(--yellow);
}

.shift-yellow {
    --theme-background: var(--yellow) !important;
}

/* focus method */

@media screen and (max-width: 900px){
    body:has(.column.focus.color-black){
        --theme-background: var(--black) !important;
        --theme-ui: var(--black) !important;
        --theme-ui-accent: var(--white) !important;
    }

    body:has(.column.focus.color-white){
        --theme-background: var(--white) !important;
        --theme-text: var(--black) !important;
        --theme-ui: var(--white) !important;
        --theme-ui-accent: var(--black) !important;
    }
    
    body:not(#index):has(.column.focus.color-red){
        --theme-background: var(--red) !important;
    }

    body:not(#index):has(.column.focus.color-blue){
        --theme-background: var(--blue) !important;
    }
    
    body:not(#index):has(.column.focus.color-green){
        --theme-background: var(--green) !important;
    }
    
    body:has(.column.focus.color-yellow){
        --theme-background: var(--yellow) !important;
    }
}

::scrollbar,
*::scrollbar {
    display: none !important;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0px !important;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px transparent !important;
    border-radius: 0px !important;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 0px !important;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

::selection {
    background: var(--theme-text);
    color: var(--white);
    fill: var(--white);
}

.bg-grain {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 95;
    transform: translateZ(0);
}

.bg-grain:before {
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 95;
    position: fixed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABWIAAAViAHE10CgAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDgtMzFUMTI6Mjk6MTIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDgtMzFUMTI6NDgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA4LTMxVDEyOjQ4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4Zjg5ZjkxYS03MTFmLTRhMjQtOWNjMS1lZmQzMDUxYzU5M2EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGY4OWY5MWEtNzExZi00YTI0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');
    pointer-events: none;
    -webkit-animation: noise 3s steps(2) infinite;
    animation: noise 3s steps(2) infinite;
}

.bg-grain {
    opacity: .2;
}

@-webkit-keyframes noise {
    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }

    30% {
        transform: translate3d(9rem, -9rem, 0);
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }

    60% {
        transform: translate3d(2rem, 6rem, 0);
    }

    70% {
        transform: translate3d(7rem, -8rem, 0);
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }

    90% {
        transform: translate3d(6rem, -5rem, 0);
    }

    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

body,
html {
    overflow-x: hidden;
}

html {
    font-size: calc(.58rem + (140vw - 2400px) / 400);
}

body {
    font-family: var(--bodyType);
    font-weight: 400;
    font-size: 1.6rem;

    color: var(--theme-text);
    background-color: var(--theme-background);

    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;

    transition: all .6s ease-in-out;
    transition-property: background-color, color;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/*
body:not(#index){
    display: flex;
    align-items: flex-end;
}
*/

body.scroll-layout {
    overflow: hidden;
}

html:has(body:not(.scroll-layout)){
    overflow-y: hidden !important;
}

@media screen and (max-width: 1920px) {
    html {
        font-size: calc(.505rem + (140vw - 1920px) / 400);
    }
}

@media screen and (max-width: 1760px) {
    html {
        font-size: calc(.5225rem + (140vw - 1760px) / 400);
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size: calc(.45rem + (100vw - 1200px) / 400);
    }
}

@media screen and (max-width: 1080px) {
    html {
        font-size: calc(.45rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 900px) {
    html {
        font-size: calc(.5rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 700px) {
    html {
        font-size: calc(.45rem + (100vw - 700px) / 400);
    }
}

@media screen and (max-width: 500px) {
    html {
        font-size: calc(.4rem + (100vw - 500px) / 400);
    }
}

@media screen and (max-width: 350px) {
    html {
        font-size: calc(.325rem + (100vw - 350px) / 400);
    }
}

/* TYPE PRESETS */
.heading.center,
.text.center {
    text-align: center;
}

.heading.left,
.text.left {
    text-align: start;
}

.heading.right,
.text.right {
    text-align: end;
}

.full-spikes {
    font-variation-settings: var(--regularWGHT), var(--fullSPKE);
}

.semi-spikes {
    font-variation-settings: var(--regularWGHT), var(--semiSPKE);
}

.small-spikes {
    font-variation-settings: var(--regularWGHT), var(--smallSPKE);
}

/* HEADINGS */
.heading {
    line-height: 1;
}

.heading.huge {
    /*    font-size: 32rem;*/
    font-size: 54rem;
    line-height: .78;
}

.heading.extra-large {
    font-size: 14rem;
    line-height: .96;
}

.heading.large {
    font-size: 12rem;
   line-height: .94;
}

.heading.medium {
    font-size: 7.2rem;
    line-height: .92;
}

.heading.small {
    font-size: 4.8rem;
}

.heading.extra-small {
    font-size: 3.6rem;
}

.heading.tiny {
    font-size: 1.2rem;
    font-family: var(--detailType);
}

.heading.underline {
    text-decoration: underline;
}

.heading.uppercase {
    text-transform: uppercase;
}

@media screen and (max-width: 900px) {
    .heading.huge {
        font-size: 10.8rem;
    }

    .heading.extra-large {
        font-size: 9rem;
    }

    .heading.large {
        font-size: 8.4rem;
    }

    .heading.medium {
        font-size: 8.4rem;
        letter-spacing: .05rem;
    }

    .heading.small {
        font-size: 4.8rem;
        letter-spacing: .1rem;
    }

    .heading.extra-small {
        font-size: 2.4rem;
        letter-spacing: .15rem;
    }

    .heading.tiny {
        font-size: 1.6rem;
        letter-spacing: .1rem;
    }
}

@media screen and (orientation: portrait) and (max-width: 900px){
    .heading.large {
        font-size: 9.4rem;
    }
}

@media screen and (max-width: 500px) {
    .heading.huge {
        font-size: 10.8rem;
    }

    .heading.extra-large {
        font-size: 9rem;
    }
    
    .heading.large {
        font-size: 8.4rem;
    }
    
    .heading.medium {
        font-size: 8.4rem;
    }
}

@media screen and (max-width: 350px) {
    .heading.extra-large {
        font-size: 9rem;
    }
    
    .heading.large {
        font-size: 7.2rem;
    }

    .heading.medium {
        font-size: 7.2rem;
    }

    .heading.small {
        font-size: 4.8rem;
    }

    .heading.extra-small {
        font-size: 2.4rem;
    }

    .heading.tiny {
        font-size: 1.8rem;
    }
}

/* BODY TEXT */

.text a {
    --underlineLeading: .11em;

    font-family: var(--linkType);
    color: var(--theme-text-accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--underlineLeading);
}

@media (hover:hover) {
    .text a:hover {
        opacity: .6;
        animation: blink .4s step-start infinite;
        transition: opacity 0.2s ease-in-out;
    }
}

.text a:has(span) {
    text-decoration: none;
}

.text a > span {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--underlineLeading);
}

.text a > span:after {
    text-decoration: none;
    display: inline-block;
    margin-left: .5ch;
    margin-right: .1ch;
    font-family: var(--detailType);
}

#post-list .text span{
    color: var(--white);
}

.text span.caravela {
    color: var(--blue);
}

.text span.caravela:after {
    content: '\25CF';
}

.text span.cruz {
    color: var(--red);
}

.text span.cruz:after {
    content: '\2726';
}

.text span.acucar {
    color: var(--yellow);
}

.text span.acucar:after {
    content: '\25B2';
}

.text span.bandeira {
    color: var(--green);
}

.text span.bandeira:after {
    content: '\25A0';
}

.text.huge {
    font-size: 12rem;
    line-height: 1;
}

.text.extra-large {
    font-size: 6rem;
    line-height: 1.3;
}

.text.large {
    font-size: 3.6rem;
    line-height: 1.3;
}

.text.medium {
    font-size: 2.4rem;
    line-height: 1.2;
}

.text.small {
    font-size: 1.4rem;
}

.text.extra-small {
    font-size: 1.2rem;
}

.text.tiny {
    font-size: 1rem;
    letter-spacing: .05rem;
}

.text {
    line-height: 1.3;
}

.text.uppercase {
    text-transform: uppercase;
}

.text em,
.text strong,
.text u {
    transition: all 2s ease 0s;
    transition-property: font-variation-settings;
}

.text em {}

.text strong {
    font-variation-settings: var(--boldWGHT);
}

@media screen and (max-width: 900px) {
    .text.huge {
        font-size: 9rem;
    }

    .text.extra-large {
        font-size: 4.8rem;
        line-height: 1.3;
    }

    .text.large {
        font-size: 3.6rem;
    }

    .text.medium {
        font-size: 2.4rem;
    }

    .text.small {
        font-size: 2rem;
    }

    .text.extra-small {
        font-size: 1.4rem;
    }

    .text.tiny {
        font-size: 1.2rem;
    }
}

@media screen and (orientation: portrait) and (max-width: 900px){
    .text.large {
        font-size: 4.8rem;
    }
    
    .text.medium {
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 500px) {
    .text.huge{
        font-size: 9rem;
    }
    
    .text.extra-large{
        font-size: 4.8rem;
        line-height: 1.2;
    }
    
    .text.large {
        font-size: 3.6rem;
    }
    
    .text.medium {
        font-size: 3.2rem;
    }
}

@media screen and (max-width: 350px) {
    .text.small {
        font-size: 2.4rem;
    }

    .text.tiny {
        font-size: 1.4rem;
    }
}

/* PAGE WRAPPER */

.outer-wrapper {
    display: flex;
    flex-direction: column;
}

.scroll-layout .outer-wrapper {
    /*    flex-direction: row;*/
    overflow: hidden;
}

#about .outer-wrapper {
    flex-direction: row;
}

@media screen and (max-width: 1080px) {
    #about .outer-wrapper {
        flex-direction: column;
        height: calc(var(--vh) * 100);
    }

    #about .outer-wrapper::-webkit-scrollbar {
        display: none;
    }
}

.announcement-bar {
    font-family: var(--detailType);
    font-feature-settings: 'case';
    text-transform: uppercase;
    color: var(--black);
    background-color: var(--white);
    padding: 0.5rem 2rem 0.75rem;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    white-space: nowrap;
    z-index: 100;
    display: flex;
    align-items: center;
}

.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 30s linear infinite;
}

.announcement-bar strong {
    display: inline-block;
    margin-right: 4rem;
    white-space: nowrap;
}

@media screen and (max-width: 900px){
    .scrolling-text {
        animation-duration: 8s;
    }
}

header {
    position: fixed;
/*
    color: var(--white);
    mix-blend-mode: difference;
*/
    z-index: 95;
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    transition: all .3s ease-in-out;
    transition-property: filter;
}

html:has(.menuOpen){
    overflow: hidden;
}

body:has(.menuOpen),
body:has(.menuOpen) .outer-wrapper,
body:has(.menuOpen) main{
    pointer-events: none !important;
}

body:has(.menuOpen) main{
    filter: grayscale(1) blur(.5rem);
}

body:has(.announcement-bar) main {
    
}

body:has(.announcement-bar) nav .bottom-section {
    margin-bottom: 2.75rem;
}

body:has(.announcement-bar) .hero-image .image {
    top: 48.5%;
    height: calc(var(--vh) * 92.5);
}

/* NAVIGATION */

header nav {
    font-family: var(--detailType);
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

/*    height: calc(var(--vh) * 100);*/
    width: 100vw;

    pointer-events: none;
    z-index: 95;
}

header nav .top-section,
header nav .bottom-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 2rem;
    
    position: fixed;
    left: 0;
    right: 0;
}

header nav .top-section{
    top: 0;
}

header nav .bottom-section{
    bottom: 0;
    
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    
    transition: all .3s linear;
    transition-property: bottom;
}

header nav .left-wrapper,
header nav .right-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 2rem;
}

header nav .right-wrapper{
    width: 30%;
}

body:not(#index) header nav .bottom-section .left-wrapper{
/*    display: none;*/
}

header nav .left-wrapper {
    justify-content: flex-start;
}

header nav .right-wrapper {
    justify-content: flex-end;
}

header nav .link-list,
header nav .lang-list {
    display: flex;
    flex-direction: row;
}

header nav .link-list {
    gap: 2rem;
}

header nav .lang-list {
    gap: 2rem;
}

header nav .nav-item {
    display: flex;
    align-items: center;
    background-color: var(--theme-ui-accent);
    color: var(--theme-ui);
    padding: 0 .5ch 0;
    
    transition: all .6s ease-in-out;
    transition-property: background-color, color;
    pointer-events: all;
}

header nav .nav-item a{
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

header nav .label {
    text-transform: lowercase;
}

@media screen and (max-width: 900px){
    header nav .link-list {
        display: none;
    }
    
    header nav .lang-list .nav-item.active{
        display: none;
    }
}

/* DROPDOWN NAV */

header nav .menu-button{
    display: none;
}

header nav .menu-button .btn{
    display: flex;
}

@media screen and (max-width: 900px) {
    header nav .menu-button{
        display: flex;
    }
    
    header.menuOpen nav .link-list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    header.menuOpen nav .link-list,
    header.menuOpen nav .lang-list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    header.menuOpen nav .lang-list .nav-item.active{
        display: flex;
    }
}

/* FOOTER */

footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
    
    padding: 10rem 3rem;
}

footer .logo{
    height: auto;
    width: 60vw;
    object-fit: contain;
}

footer .footer-copyright{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media screen and (max-width: 900px){
    footer{
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
    }
    
    footer .logo{
        width: 100vw;
    }
}

/* SECTIONS  */

.scroll-layout .section {
    padding-top: 12rem;
}

.scroll-layout .section.symbols-section{
    padding-top: 0;
    margin-top: 12rem;
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    position: relative;
}

.section > * {
    width: 100%;
}

.section > .wide {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    gap: 0;
}

.section.columns {
    flex-direction: row;
    gap: 10rem;
}

.section.columns > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
    gap: 5rem;
    margin: 0 auto;

    position: relative;
}

.indent.small {
    margin-left: calc(var(--indent) * 2);
    margin-right: calc(var(--indent) * 2);
}

.indent.large {
    margin-left: calc(var(--indent) * 3);
    margin-right: calc(var(--indent) * 3);
}

.indent.huge {
    margin-left: calc(var(--indent) * 6);
    margin-right: calc(var(--indent) * 6);
}

@media screen and (max-width: 900px){
    .section{
        gap: 4rem;
    }
}

/* HERO BANNERS */

.scroll-layout .hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

    height: calc(var(--vh) * 100);
    padding: 0;
}

.hero-heading,
.hero-tagline {
    pointer-events: none;
}

.hero-heading {
    display: flex;
    justify-content: center;
}

.hero-heading .heading{
    transform: scale(.96);
}

.reveal.show .heading {
    font-variation-settings: "wght"460, var(--fullSPKE);
}

.hero-tagline {
    display: flex;
    justify-content: center;
    padding: 0 3rem;
    
    position: absolute;
    bottom: 12rem;
}

@media screen and (max-width: 900px) {
    .hero-tagline {
        bottom: 20rem;
    }
    
    .hero-heading .heading{
        transform: scale(.96) translateY(-5rem);
    }
}

/* HERO IMAGE */

.hero-image {}

.hero-image .image {
    display: none;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: calc(var(--vh) * 95);
    width: fit-content;
    max-width: calc(var(--vh) * 90);
    
    overflow: visible;
}

#index.red-theme .hero-image .image.red {
    display: block;
}

#index.blue-theme .hero-image .image.blue {
    display: block;
}

#index.green-theme .hero-image .image.green {
    display: block;
}

#index.yellow-theme .hero-image .image.yellow {
    display: block;
}

.hero-image .image img {
    height: 100%;
    width: auto;
    object-fit: cover;
    opacity: .92;
    
    overflow: visible;
}

@media screen and (max-width: 900px){
    .hero-image .image{
        height: calc(var(--vh) * 86) !important;
    }
    
    .hero-image .image.blue{
        top: 48% !important;
    }
    
    .hero-image .image.blue img{
        transform: translateX(5rem);
    }
}

/* HERO IMAGE CLOUD */

.hero-image-cloud .image-cloud {
    mix-blend-mode: exclusion;
}

.reveal-hero,
.cloud-item {
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-image-cloud .image-cloud .cloud-item {
    --pos: 0px;
    position: absolute;
}

.hero-image-cloud .image-cloud .cloud-item.picked-1 {
    top: var(--pos);
    left: var(--pos);
}

.hero-image-cloud .image-cloud .cloud-item.picked-2 {
    top: var(--pos);
    right: var(--pos);
}

.hero-image-cloud .image-cloud .cloud-item.picked-3 {
    bottom: var(--pos);
    left: var(--pos);
}

.hero-image-cloud .image-cloud .cloud-item.picked-4 {
    bottom: var(--pos);
    right: var(--pos);
}

.hero-image-cloud .image-cloud .cloud-item.picked-5 {
    top: calc( var(--pos) - 5% );
    left: calc( var(--pos) + 40% );
}

.hero-image-cloud .image-cloud .cloud-item.picked-6 {
    bottom: calc( var(--pos) - 5% );
    right: calc( var(--pos) + 40% );
}

.hero-image-cloud .image {
    display: none;
}

#index.red-theme .cloud-red .image.picked,
#index.blue-theme .cloud-blue .image.picked,
#index.green-theme .cloud-green .image.picked,
#index.yellow-theme .cloud-yellow .image.picked {
    display: block;
}

.hero-image-cloud .image {
    width: 30rem;
    height: auto;
    aspect-ratio: 1 / 1;
}

.hero-image-cloud .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter: saturate(0) contrast(1.5) brightness(0.9) invert(2);;
}

@media screen and (max-width: 900px){
    .hero-image-cloud .image-cloud .cloud-item {
        --pos: 2.5rem;
    }
    
    .hero-image-cloud .image-cloud .cloud-item.picked-1 {
        top: var(--pos);
        left: var(--pos);
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-2 {
        top: calc( var(--pos) * 1.5 );
        right: var(--pos);
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-3 {
        bottom: var(--pos);
        left: var(--pos);
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-4 {
            bottom: calc( var(--pos) * 1.75 );
            right: var(--pos);
    }
}

@media screen and (max-width: 500px){
    .hero-image-cloud .image{
        width: 15rem;
    }
    
    .hero-image-cloud .image-cloud .cloud-item {
        --pos: -5rem;
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-1 {
        top: var(--pos);
        left: var(--pos);
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-2 {
        top: calc( var(--pos) * -1 );
        right: var(--pos);
    }

    .hero-image-cloud .image-cloud .cloud-item.picked-3 {
        bottom: calc( var(--pos) * -1 );
        left: calc( var(--pos) * 1 );
    }
    
    .hero-image-cloud .image-cloud .cloud-item.picked-4{
        bottom: var(--pos);
        right: calc( var(--pos) * .5 );
    }
    
    .hero-image-cloud .image-cloud .cloud-item.picked-5,
    .hero-image-cloud .image-cloud .cloud-item.picked-6{
        display: none !important;
    }
}

/* WIDE TEXT SECTIONS */

.wide-section {}

.wide-section .section-heading {
    width: 100%;
}

.wide-section .section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wide-section .section-body .ql-indent-1 {
    padding-left: 15%;
}

@media screen and (max-width: 500px){
    .wide-section .section-body .ql-indent-1 {
        padding-left: 0%;
        text-align: right;
    }
}

/* HALF WIDE TEXT SECTIONS */

.half-wide-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
}

.half-wide-section .section-heading {
    width: 40%;
}

.half-wide-section .section-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.half-wide-section .section-body .ql-indent-1 {
    padding-left: 10%;
}

#team .half-wide-section:last-of-type{
    padding-bottom: 12rem;
}

@media screen and (max-width: 900px){
    .half-wide-section {
        flex-direction: column;
        gap: 4rem;
    }
    
    .half-wide-section .section-heading{
        width: 100%;
    }
    
    .half-wide-section .image{
        margin: -14rem 0 -4rem;
    }
}

/* COLUMN LAYOUTS */

.column-layout {
    display: flex;
    flex-direction: row;

    height: calc(var(--vh) * 100);
    width: 100vw;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-gutter: stable both-edges;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.column-layout::-webkit-scrollbar {
    display: none;
}

.scroll-layout .symbol.column-layout {
    display: none;
}

.scroll-layout .symbol.column-layout.active {
    display: flex;
}

.column-layout .column {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    position: relative;

    /*    padding: calc( var(--indent) * 6 ) calc( var(--indent) * 3 ) 0;*/

    min-width: calc(100vw / 3);

    transition: all .6s ease-in-out;
    transition-property: background-color, color;
}

.column-layout .column.color-red {
    background-color: var(--red);
}

.column-layout .column.color-blue {
    background-color: var(--blue);
}

.column-layout .column.color-green {
    background-color: var(--green);
}

.column-layout .column.color-yellow {
    background-color: var(--yellow);
}

.column-layout .column.color-white {
    background-color: var(--white);
    color: var(--black);
}

.column-layout .column.color-white *::selection {
    background-color: var(--black);
    color: var(--white);
}

.column-layout .column.color-black *::selection {
    background-color: var(--white);
    color: var(--black);
}

.column-layout .column.image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.column-layout .column {
    --rotation: 180deg;
    --color: 14, 14, 14;
    --colorStart: rgba(var(--color), 1);
    --percentStart: 60%;
    --colorEnd: rgba(14, 14, 14, 0);
    --percentEnd: 100%;
}

.column-layout .column::before,
.column-layout .column::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;

    width: 100%;
    height: 16rem;

    background: linear-gradient(var(--rotation),
            var(--colorStart) var(--percentStart),
            var(--colorEnd) var(--percentEnd));

    pointer-events: none;
    z-index: 20;
}

.column-layout .column::before {
    top: 0;
}

.column-layout .column::after {
    bottom: 0;

    --rotation: 0deg;
    --percentStart: 20%;
}

.column-layout .column.color-transparent {
    --colorStart: rgba(var(--color), 0);
}

.column-layout .column.color-black {
    --color: 14, 14, 14;
}

.column-layout .column.color-white {
    --color: 245, 245, 245;
}


.column-layout .column.color-white.image {
    --colorStart: rgba(var(--color), .4);
}

.column-layout .column.color-red {
    --color: 253, 0, 0;
}

.column-layout .column.color-blue {
    --color: 0, 78, 255;
}

.column-layout .column.color-green {
    --color: 0, 123, 50;
}

.column-layout .column.color-yellow {
    --color: 255, 177, 0;
}

@media screen and (max-width: 900px){
    .column-layout .column{
        min-width: calc( 100vw / 1 );
    }
}

.column-layout .header {
    position: absolute;
    padding: 6rem calc(var(--indent) * 3);
    width: 100%;
    z-index: 30;
}

.column-layout .header:after {
    content: "";
    display: block;
    width: 100%;
    height: calc( var(--lineStroke) * 2 );
    background-image: repeating-linear-gradient(to right,
            var(--theme-ui-accent),
            var(--theme-ui-accent) calc( var(--lineStroke) * 1.5 ),
            transparent calc( var(--lineStroke) * 1.5 ),
            transparent 12px);
    margin-top: 2rem;
}

.column-layout .column.color-white .header:after {
    background-image: repeating-linear-gradient(to right,
            var(--theme-ui),
            var(--theme-ui) calc( var(--lineStroke) * 1.5 ),
            transparent calc( var(--lineStroke) * 1.5 ),
            transparent 12px);
}

.column-layout .header .heading-wrapper{
    display: flex;
    justify-content: flex-start; 
}

.column-layout .header .menu-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
}

.column-layout .header .menu-list .menu-item{
    display: flex;
    padding: .05ch .5ch 0;
}

.column-layout.symbol-cruz .header .menu-list .menu-item.tag-cruz,
.column-layout.symbol-caravela .header .menu-list .menu-item.tag-caravela,
.column-layout.symbol-bandeira .header .menu-list .menu-item.tag-bandeira,
.column-layout.symbol-acucar .header .menu-list .menu-item.tag-acucar{
    background-color: var(--theme-text);
    color: var(--theme-background);
}

.column-layout .column-nav{
    position: absolute;
    right: 3rem;
    top: 5.5rem;
    
    display: flex;
    flex-direction: row;
    gap: 2ch;

    z-index: 80;
}

.column-layout:has(.topic-nav) .column-nav,
.column-layout:has(.menu-nav) .column-nav{
    display: none;
}

.column-layout .column-nav .menu-nav,
.column-layout .column-nav .arrow-nav{
    display: flex;
    flex-direction: row;
    gap: 2ch;
}

.column-layout .column-nav .menu-nav{
    display: none;
}

.column-layout .column-nav .topic-nav{
    display: flex;
    justify-content: space-between;
    gap: 2ch;
    width: 100%;
}

.column-layout .column-nav a{
    font-family: var(--detailType);
    font-feature-settings: 'case';
    background-color: var(--theme-background);
    color: var(--theme-text);
    padding: .1ch .5ch 0;
    
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.column-layout .column-nav .arrow-nav a{
    padding: 0 .25ch 0;
}

@media (hover:hover){
    .column-layout .column-nav a:hover{
        background-color: var(--theme-background);
        color: var(--theme-text);
    }
}

@media screen and (max-width: 900px){
    .column-layout .column-nav{
        display: flex;
    }

    .column-layout:has(.topic-nav) .column::before{
        height: 22rem;
    }
    
    .column-layout .column-nav{
        --margin: 2rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: calc(100% - var(--margin) * 2);
        
        right: var(--margin);
        left: var(--margin);
    }
    
    .column-layout:has(.topic-nav) .column-nav,
    .column-layout:has(.menu-nav) .column-nav{
        display: flex;
    }
    
    .column-layout .column-nav:has(.menu-nav){
        justify-content: space-between;
    }
    
    .column-layout.symbol-cruz .column-nav .topic-nav .tag-cruz,
    .column-layout.symbol-caravela .column-nav .topic-nav .tag-caravela,
    .column-layout.symbol-bandeira .column-nav .topic-nav .tag-bandeira,
    .column-layout.symbol-acucar .column-nav .topic-nav .tag-acucar{
        background-color: var(--theme-ui-accent);
        color: var(--theme-ui);
    }
    
    body:has(.column.focus.color-white) .column-layout.symbol-cruz .column-nav .topic-nav .tag-cruz,
    body:has(.column.focus.color-white) .column-layout.symbol-caravela .column-nav .topic-nav .tag-caravela,
    body:has(.column.focus.color-white) .column-layout.symbol-bandeira .column-nav .topic-nav .tag-bandeira,
    body:has(.column.focus.color-white) .column-layout.symbol-acucar .column-nav .topic-nav .tag-acucar{
        background-color: var(--theme-ui-accent);
        color: var(--theme-ui);
    }
    
    .column-layout .column-nav .topic-nav{
        justify-content: flex-start;
    }
    
    .column-layout .column-nav .topic-nav a{
        max-width: 100%;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    #single .column-layout .column-nav .topic-nav a{
        background-color: var(--theme-ui-accent);
        color: var(--theme-ui);
    }
    
    .column-layout:has(.focus.column-symbol) .column-nav .menu-nav .tag-symbol,
    .column-layout:has(.focus.column-image) .column-nav .menu-nav .tag-image,
    .column-layout:has(.focus.column-related) .column-nav .menu-nav .tag-related,
    .column-layout:has(.focus.column-text) .column-nav .menu-nav .tag-text{
        background-color: var(--theme-ui-accent);
        color: var(--theme-ui);
    }
    
    .column-layout .column-nav .menu-nav,
    .column-layout .column-nav .arrow-nav{
        display: flex;
        gap: 1ch;
    }
    
    .column-layout .column-nav .menu-nav{
        gap: 2ch;
    }
    
    .column-layout .column-nav a{
        background-color: initial;
    }
    
    .column-layout .header {
        padding: 6rem calc(var(--indent) * 2);
    }
    
    .column-layout:has(.topic-nav) .header{
        padding-top: 9.5rem;
    }
    
    .column-layout:has(.menu-nav) .header > *{
        opacity: 0;
    }
    
    .column-layout:has(.topic-nav) .content{
        padding-top: 20rem;
    }
}

.column-layout .content {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    padding: 14rem calc(var(--indent) * 3);

    height: calc(var(--vh) * 100);
    overflow-y: scroll;

    position: relative;
}

.column-layout .content:has(.hero-image) {
    justify-content: center;
    padding: 12rem calc(var(--indent) * 4) 12rem;
    
    overflow: visible;
    
    justify-content: center;
    align-items: center;
}

.column-layout .hero-image {
    height: 100%;
    width: auto;
/*    aspect-ratio: 1 / 1;*/
}

.column-layout .color-red .hero-image{
    transform: scale(1.4) translateY(12%);
}

.column-layout .color-blue .hero-image{
    transform: scale(1.4) translateY(-5%) translateX(5%);
}


.column-layout .color-green .hero-image{
    transform: scale(1.2);
}

.column-layout .color-yellow .hero-image{
    transform: scale(1.4) translateY(-5%);
}

.column-layout .column .hero-image img {
    height: 100%;
    width: auto;
/*    aspect-ratio: 1 / 1;*/
    object-fit: cover;
    overflow: visible;
}

.column-layout .image {
    height: 100%;
    width: 100%;
}

.column-layout .column .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.column-layout .heading {
    display: inline;
}

@media (hover:hover) {
    .column-layout .header .menu-item:hover {
        animation: blink .4s step-start infinite;
        transition: opacity 0.2s ease-in-out;
    }
}

.column-layout .column.column-symbol .content .heading {
    display: block;
    white-space: nowrap;
    width: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    
    z-index: 10;
    
    -webkit-user-select: none;
    user-select: none;
}

.column-layout .content .ql-indent-1 {
    padding-left: 10%;
}

.column-layout .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.column-layout .image-list .list-item {
    width: 29%;
    height: auto;
    aspect-ratio: 1 / 1;
    
    filter: grayscale(0);
    
    transition: opacity .2s ease-in-out, filter .2s ease-in-out;
}

@media (hover:hover) {
    .column-layout .image-list .list-item:hover {
        filter: grayscale(1);
        animation: blink .8s step-start infinite;
    }
}

.column-layout .image-list .list-item figure {
    width: 100%;
    height: 100%;
}

.column-layout .image-list .list-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.column-layout .image-list .list-item .tip-badge{
    display: flex;
    background-color: var(--white);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .3rem .2rem .25rem;
    margin: 1rem;
}

.column-layout .image-list .list-item .tip-badge span{
    font-family: var(--detailType);
    font-feature-settings: 'case';
    font-size: 1rem;
    line-height: 1;
    
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/*
@media (hover:hover) {
    .column-layout .image-list .list-item:hover .tip-badge {
        display: flex;
    }
}
*/

.column-layout .content .meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.column-layout .content .meta-item {
    display: flex;
    gap: 1ch;
}

.column-layout .content .meta .label {
    display: flex;
    flex: 1 0 0%;
    align-items: baseline;
    gap: 1ch;
}

.column-layout .content .label:after {
    content: "";
    display: block;
    width: 100%;
    height: var(--lineStroke);
    background-image: repeating-linear-gradient(to right,
            var(--theme-text),
            var(--theme-text) 1px,
            transparent 1px,
            transparent 8px);
}

.column-layout .content .meta .value {
    order: 3;
    flex: 2;
}

.column-layout .content .meta .value .category-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1ch;
}

.column-layout .content .meta .value .category-item {
    display: flex;
    gap: 0ch;
}

.column-layout .content .meta .value .category-item:not(:last-child)::after {
    content: "; ";
}

.column-layout .content .meta .value .category-item span {
    display: inline;
}

.column-layout .content .body {}

.column-layout .content .body p {
    padding-bottom: 1rem;
}

/* POST LIST PAGE */

#post-list main {
    max-height: calc(var(--vh) * 100);
    overflow-y: auto;
}

#post-list:has(.announcement-bar) main {
    max-height: calc(var(--vh) * 100 - 2.75rem);
}

#post-list table {
    font-family: var(--detailType);
    text-align: left;

    margin: calc(4rem + var(--lineStroke)) 0 0;
    width: 100%;

    border-collapse: collapse;

    --rotation: 180deg;
    --color: 14, 14, 14;
    --colorStart: rgba(var(--color), 1);
    --percentStart: 80%;
    --colorEnd: rgba(14, 14, 14, 0);
    --percentEnd: 100%;
}

#post-list table::before,
#post-list table::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 11rem;
    background: linear-gradient(var(--rotation), var(--colorStart) var(--percentStart), var(--colorEnd) var(--percentEnd));
    pointer-events: none;
    z-index: 20;
}

#post-list table::before {
    top: 0;
}

#post-list table::after {
    bottom: 0;
    --rotation: 0deg;
    --percentStart: 20%;
}

#post-list th,
#post-list td {}

#post-list th {
    padding: 1.5rem 1.5rem 3rem;

    position: sticky;
    top: calc(4rem + var(--lineStroke));
    z-index: 30;
}

@media (hover:hover) {
    #post-list th a:hover:before {
        content: "↓ ";
    }
}

#post-list th.selected a {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#post-list th.sort-down a:before {
    content: "↑ ";
}

#post-list th.sort-up a:before {
    content: "↓ ";
}

#post-list th:first-child,
#post-list td:first-child {
    padding-left: 3rem;
}

#post-list th:last-child,
#post-list td:last-child {
    padding-right: 3rem;
}

#post-list td {
    padding: 1.5rem 1.5rem;
    max-width: 20rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#post-list td a {
    width: 100%;
}

#post-list thead tr {
    position: relative;
    width: 100%;
    border-bottom: none;
}

#post-list thead tr:after {
    content: "";

    display: block;
    position: fixed;
    top: 7.5rem;
    left: 3rem;
    width: calc(100% - 6rem);
    height: var(--lineStroke);
    background-image: repeating-linear-gradient(to right, var(--theme-text), var(--theme-text) 1px, transparent 1px, transparent 8px);
    margin-top: 1.5rem;

    z-index: 30;
}

#post-list tr {
    border-bottom: solid var(--lineStroke) var(--grey);
}

#post-list tr:has(td):first-child {
    margin-top: 2rem;
}

@media (hover:hover) {
    #post-list tr:has(td):hover {
        background-color: var(--grey);
        border-bottom: solid var(--lineStroke) var(--white);
    }
}

#post-list .category-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#post-list .category-item.selected {
    order: -1;
}

.hover-image {
    position: absolute;
    display: none;
    max-width: 30rem;
    max-height: 30rem;

    border: solid var(--lineStroke) var(--white);

    pointer-events: none;
    z-index: 1000;
}

/* ABOUT PAGE */

#single:has(.announcement-bar) main {
    max-height: calc(var(--vh) * 100 - 2.75rem);
}

/* MAINTENANCE MODE PAGE */

#index.maintenance {}

/* ON SCROLL ANIMS */

.reveal {
    opacity: 0;
    transform: translateY(0px);

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

.reveal-hero {
    opacity: 0;
    transition: all .9s ease 0s;
    transition-property: opacity;
}

.show {
    opacity: 1;
}

.reveal-hero.show.fade-in {
    opacity: 1;
    transition: opacity var(--fade-in-speed, 600ms) ease, transform var(--fade-in-speed, 600ms) ease;
}

.reveal-hero.fade-out {
    opacity: 0;
    transition: opacity 400ms ease, transform 400ms ease !important;
}

.reveal .heading {
    font-variation-settings: var(--heavyWGHT), var(--smallSPKE);
}

.reveal .heading,
.reveal .text,
.reveal .heading em,
.reveal .text em,
.reveal .heading strong,
.reveal .text strong,
.reveal .heading u,
.reveal .text u {
    transition: all 2s ease 0s;
    transition-duration: 3s, .6s, .3s;
    transition-property: font-variation-settings, letter-spacing, color;
}

.hide-up {
    transform: translateY(0px);
    opacity: 0;

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

/* MISC ANIMATIONS */

@-webkit-keyframes blink {
    50% {
        opacity: .14;
    }
}

@keyframes blink {
    50% {
        opacity: .14;
    }
}

@-webkit-keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@-webkit-keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@-webkit-keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@-webkit-eyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@keyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@-webkit-eyframes horzshake {

    10%,
    90% {
        transform: translate(-1px, 0);
    }

    20%,
    80% {
        transform: translate(1px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate(-2px, 0);
    }

    40%,
    60% {
        transform: translate(2px, 0);
    }
}

@keyframes horzshake {

    10%,
    90% {
        transform: translate(-1px, 0);
    }

    20%,
    80% {
        transform: translate(1px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate(-2px, 0);
    }

    40%,
    60% {
        transform: translate(2px, 0);
    }
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1.1);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(-50%);
    }
}