/*
// main.css
// (c) 2019 - 2020 Insert Coin LLC. All rights reserved.
*/

body
{
    background-color : var(--background-colour);
    margin           : 0;
}


canvas
{
    background-color : rgba(255,255,255,0.05);
    box-shadow       : #000 8px 8px 20px 3px;
}

/*----*/

.deck
{
    position       : fixed;
    bottom         : 0;
    left           : 0;
    right          : 0;
    display        : flex;
    flex-direction : row;
    color          : var(--darkest-tone);
    font-family    : "Yeseva One";
    overflow-x     : scroll;
}

.deck .card
{
    width            : 30%;
    height           : 450px;
    max-width        : 300px;
    min-width        : 300px;
    margin           : 10px;
    padding          : 10px;
    background-color : var(--lightest-tone);
    border           : 5px solid var(--dark-tone);
    border-radius    : 2px;
    box-shadow       : #000 8px 8px 20px 3px;
    transition       : transform 0.5s var(--bounce-easing);
}

.deck .card.down:not(:hover)
{
    transform : translate( 0, 80% );
}

.deck .card .title
{
    text-align : center;
}

/*----*/

:root
{
    --background-colour     : var(--darkest-tone);
    --text-colour           : #000;
    --link-colour           : var(--deep-orange-colour);

    --lightest-tone         : #ededed;
    --lighter-tone          : #d0d0d0;
    --light-tone            : #adadad;
    --medium-tone           : #8f8f8f;
    --dim-tone              : #9e9e9e;
    --dark-tone             : #616161;
    --darker-tone           : #424242;
    --darkest-tone          : #212121;

    --lightest-tone-filter  : invert(99%) sepia(81%) saturate(70%) hue-rotate(174deg) brightness(114%) contrast(88%);
    --lighter-tone-filter   : invert(71%) sepia(67%) saturate(0%) hue-rotate(139deg) brightness(112%) contrast(91%);
    --light-tone-filter     : invert(75%) sepia(4%) saturate(9%) hue-rotate(357deg) brightness(95%) contrast(82%);
    --medium-tone-filter    : invert(60%) sepia(3%) saturate(0%) hue-rotate(193deg) brightness(95%) contrast(91%);
    --dim-tone-filter       : invert(76%) sepia(2%) saturate(22%) hue-rotate(318deg) brightness(84%) contrast(81%);
    --dark-tone-filter      : invert(35%) sepia(0%) saturate(236%) hue-rotate(194deg) brightness(100%) contrast(79%);
    --darker-tone-filter    : invert(18%) sepia(4%) saturate(16%) hue-rotate(359deg) brightness(101%) contrast(77%);
    --darkest-tone-filter   : invert(11%) sepia(11%) saturate(13%) hue-rotate(314deg) brightness(100%) contrast(96%);

    --red-colour         : #f44336;
    --pink-colour        : #E91E63;
    --purple-colour      : #9C27B0;
    --deep-purple-colour : #673AB7;
    --indigo-colour      : #3F51B5;
    --blue-colour        : #2196F3;
    --light-blue-colour  : #03A9F4;
    --cyan-colour        : #00BCD4;
    --teal-colour        : #009688;
    --green-colour       : #4CAF50;
    --light-green-colour : #8BC34A;
    --lime-colour        : #CDDC39;
    --yellow-colour      : #FFEB3B;
    --amber-colour       : #FFC107;
    --orange-colour      : #FF9800;
    --deep-orange-colour : #FF5722;
    --brown-colour       : #795548;
    --grey-colour        : #9E9E9E;
    --blue-grey-colour   : #607D8B;

    --red-colour-filter         : invert(62%) sepia(82%) saturate(5751%) hue-rotate(336deg) brightness(93%) contrast(107%);
    --pink-colour-filter        : invert(18%) sepia(72%) saturate(4783%) hue-rotate(330deg) brightness(96%) contrast(90%);
    --purple-colour-filter      : invert(23%) sepia(68%) saturate(2113%) hue-rotate(271deg) brightness(98%) contrast(105%);
    --deep-purple-colour-filter : invert(28%) sepia(12%) saturate(7344%) hue-rotate(239deg) brightness(95%) contrast(101%);
    --indigo-colour-filter      : invert(31%) sepia(64%) saturate(1108%) hue-rotate(204deg) brightness(88%) contrast(96%);
    --blue-colour-filter        : invert(47%) sepia(88%) saturate(2251%) hue-rotate(184deg) brightness(99%) contrast(92%);
    --light-blue-colour-filter  : invert(57%) sepia(53%) saturate(4671%) hue-rotate(168deg) brightness(100%) contrast(98%);
    --cyan-colour-filter        : invert(50%) sepia(95%) saturate(1469%) hue-rotate(147deg) brightness(97%) contrast(101%);
    --teal-colour-filter        : invert(34%) sepia(66%) saturate(3717%) hue-rotate(156deg) brightness(96%) contrast(101%);
    --green-colour-filter       : invert(61%) sepia(12%) saturate(1996%) hue-rotate(73deg) brightness(93%) contrast(88%);
    --light-green-colour-filter : invert(68%) sepia(10%) saturate(2027%) hue-rotate(45deg) brightness(100%) contrast(93%);
    --lime-colour-filter        : invert(91%) sepia(43%) saturate(690%) hue-rotate(6deg) brightness(83%) contrast(109%);
    --yellow-colour-filter      : invert(83%) sepia(36%) saturate(794%) hue-rotate(359deg) brightness(105%) contrast(104%);
    --amber-colour-filter       : invert(67%) sepia(64%) saturate(645%) hue-rotate(354deg) brightness(107%) contrast(101%);
    --orange-colour-filter      : invert(52%) sepia(93%) saturate(574%) hue-rotate(359deg) brightness(101%) contrast(106%);
    --deep-orange-colour-filter : invert(57%) sepia(89%) saturate(4553%) hue-rotate(345deg) brightness(100%) contrast(105%);
    --brown-colour-filter       : invert(35%) sepia(20%) saturate(776%) hue-rotate(330deg) brightness(93%) contrast(89%);
    --grey-colour-filter        : invert(69%) sepia(9%) saturate(0%) hue-rotate(136deg) brightness(92%) contrast(80%);
    --blue-grey-colour-filter   : invert(51%) sepia(14%) saturate(702%) hue-rotate(155deg) brightness(89%) contrast(86%);

    --bounce-easing : cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.material-icon
{
    font-family                   : 'Material Icons';
    font-weight                   : normal;
    font-style                    : normal;
    font-size                     : 24px;
    line-height                   : 1;
    letter-spacing                : normal;
    text-transform                : none;
    display                       : inline-block;
    white-space                   : nowrap;
    word-wrap                     : normal;
    direction                     : ltr;
    -webkit-font-feature-settings : 'liga';
    -webkit-font-smoothing        : antialiased;
    -webkit-user-select           : none;
}

@font-face
{
    font-family : 'Propaganda';
    src         : url('/content/font/propaganda.ttf' );
}

@font-face 
{
    font-family : 'Minecraft';
    src         : url(/content/font/Minecraft.ttf);
}

@font-face 
{
    font-family : 'Half Eighties';
    src         : url(/content/font/HalfEighties.ttf);
}