/* Main */
html
{                 
    background-color: white;
    height: 100%;
}
@media (prefers-color-scheme: dark) {
    body{}
    .-darkmode-elem
    {                
        filter: invert(1);
    }
}    
body.-darkmode .-darkmode-elem
{
    filter: invert(1);
}   
body.-lightmode .-darkmode-elem
{
    filter: invert(0);
}   
body
{          
    font-family: Arial; 
    height: 100%;
    margin: 0;           
    background-color: white;
    display: block !important;
}     
.-hidden
{
    display: none;
}
.clickable
{
    cursor: pointer;
}
.clickable:hover
{
    background: #0003;
}
.-expander-active > .expander-closed, :not(.-expander-active) > .expander-opened
{
    display: none;
}
.-expander-active .expander-opened, :not(.-expander-active) > .expander-closed
{
    display: block;
}
.toggle-container
{
    width: 200px;
    padding: .3em 0;
    display: block;    
}   
.toggle-container input
{
    display: none;    
}
.toggle-row
{
    display: flex;
    justify-content: space-between; 
    cursor: pointer;   
}
.toggle-text
{
    
}   
.toggle-icon
{
    position: relative;
    display: block;
    border: 2px solid #00000088;
    border-radius: 2em;
    height: 16px;
    width: 32px;
}
.-inactive
{
    opacity: .5;
}
.toggle-icon:before
{
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    height: 14px;
    width: 14px;
    box-sizing: border-box;  
    background-color: transparent;
    border: 2px solid gray;
    border-radius: .5em;
    transition: .2s;
}                
.toggle-container input:checked ~ .toggle-row .toggle-icon:before
{
    left: 17px;   
    background-color: gray; 
} 
.toggle-container input:checked ~ .toggle-row .toggle-icon
{
    background-color: #B2FFB2;
}
.select-row-container
{
    position: relative;
    display: flex;
    padding: .3em 0;
}
.select-row-container:after
{
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border: 2px solid black;
    border-color: transparent black black transparent;
    transform: rotate(45deg);
    bottom: 12px;
    right: 2px;
    border-radius: 3px;
}
.select-row-title
{
    line-height: 1em;
    z-index: 150;
    height: 1em;
}
.select-row-container select
{
    position: relative;
    flex-grow: 1;
    z-index: 200;
    background-color: transparent;
    border: none;             
    border-bottom: 1px solid #00000088;
    font: inherit;
    text-align: center;
    padding-right: 19px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.select-row-container select:after
{
    content: "d";
    display: block;
    position: absolute;
    background: red;
    height: 20px;
    width: 20px;
}
.description-box-container
{

}
.description-box
{
    position: fixed;
    font-size: 16px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px black;
    top: 100%;
    margin-top: .3em;    
}
.main
{
    padding: 1px 0;
    background-color: #E8FCFC;
    z-index: 400;     
    padding-left: 3em;
    min-height: 100%;
}  
.cookie-info-container
{
    z-index: 1000;
    position: fixed;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    text-align: center;
} 
.cookie-info
{
    display: inline-block;
    pointer-events: auto;
    margin: 0 auto;  
    background-image: linear-gradient(90deg,#D6FFFF,#D7FFA8);
    padding: 1em 3em;
    border: 1px solid #00000055;  
    line-height: 1.2em;
    height: 1.2em;
}
.cookie-info-container img
{
    height: 1.2em;
}
.cookie-info-container button
{
    padding: .2em 1em;
    background: transparent;
    border: 2px solid #00000055;
    cursor: pointer;       
    border-radius: 2em;
}
.cookie-info-container button:hover,.cookie-info-container button:focus
{
    border-color: #000000BB;
}
.cookie-info{
    
} 
/* All */
.all-search-container
{
    margin: 20px auto;
    width: 800px;
    padding: 5px;
    border: 1px solid #00000055;
    border-radius: 10px;
    background-image: linear-gradient(90deg,#D6FFFF,#D7FFA8);
}
.all-search-main
{
    display: flex;   
    align-items: center;
    padding: 3px 10px;
}
.all-search-main-button
{
    font-size: .6em;
    padding: 0 .5em;  
    cursor: pointer; 
     
}
.all-search-main-button:hover
{
    background-color: #88888888;
}
.all-search-input
{
    font: inherit;
    background: transparent;
    flex-grow: 1;
    border: none;
    border-bottom: 1px solid black;
}          
.all-search-filters
{
    position: relative;    
}
.all-search-title
{
    font-size: .8em;
    padding: .4em;
}
.all-list
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.all-item              
{
    color: inherit;
    text-decoration: inherit;
    margin: 20px 0;
    width: 800px;
    padding: 5px;
    border: 1px solid #00000055;
    border-radius: 10px;
    display: flex;       
    background-image: linear-gradient(90deg,#D6FFFF,#D7FFA8);
    cursor: pointer;
    transition: .25s ease;
}
.all-item:hover
{
    padding: 5px 35px;
}
.all-item-left
{
    width: 100px;    
}
.all-item-right
{
    padding: 0 5px;
    border-left: 1px solid black;    
}
.all-item-title,.all-item-stats,.all-item-tags
{
    min-height: 1.2em;
    line-height: 1.2em;           
}
.all-item-title
{
    font-size: 1.2em;
    padding-bottom: .3em;
}
.all-item-tags
{
    font-size: .8em;
}
.all-item-tag
{                           
    font-weight: bold;
    display: inline-block;
    background-color: lightgray;
    border-radius: .6em;
    padding: 0 .5em;
    position: relative;
    min-width: 1em;
} 
.all-item-tag-yes,.all-item-tag-no
{
    position: absolute;  
    width: 50%;   
    opacity: 0;
    height: 100%;
    line-height: 1.2em;
    cursor: pointer;
    box-sizing: border-box;
}  
.all-item-tag-yes:hover,.all-item-tag-no:hover
{
    opacity: 1;
}
.all-item-tag-yes
{                  
    left: 0; 
    padding-left: .5em;     
    border-radius: .6em 0 0 .6em;
    background: linear-gradient(to right,#00FF00,transparent);
}       
.all-item-tag-no
{
    right: 0;
    padding-right: .5em;
    text-align: right;
    border-radius: 0 .6em .6em 0;
    background: linear-gradient(to left,red,transparent);
}
.all-item-orders
{
    font-size: .8em;
    display: flex;
    flex-wrap: wrap;
}
.all-item-order-input
{
    display: none;
}
.all-item-order
{
    text-align: center;
    min-width: 3em;
    display: inline-block;
    padding: 0 .5em;
    cursor: pointer;           
    border-bottom: 2px solid transparent;
}             
.all-item-order-label:hover .all-item-order
{
    border-bottom: 2px solid #00000055;
}     
.all-item-order-input:checked ~ .all-item-order
{
    border-bottom: 2px solid #000000CC;
}
.all-item-stat
{
    display: inline-block;
    padding: 0 .2em;
}
.all-item-stat-icon
{                      
    display: inline-block;
    font-size: .5em;
}
.all-item-stat-number
{
    display: inline-block;
}
/* Editor */  
.song-edit-top
{                
    margin: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.song-top-view
{
    display: block;
    color: inherit;
    text-decoration: none;
    padding: .4em 1.4em;
    border-radius: .4em;
    margin: 0 .5em;
    background-image: linear-gradient(30deg,#D6FFFF,#D7FFA8);      
    box-shadow: 0 0 5px #00000088;
}
.song-top-view:hover
{
    color: #888888;
}
.song-name-container
{                       
    width: 400px;
    margin: 0 1em;
    position: relative;
}       
.song-name-container:before
{
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    height: 2px;
    width: 100%;
    left: 0;
    background-image: linear-gradient(90deg,#7DFFFF,#B8FF65);
    animation: open-width .5s both ease-out;
}
@keyframes open-width
{
    0%{width:0%;}
}
.song-name
{
    text-align: center;
    display: block;
    font: inherit;
    font-size: 20px;
    width: 100%;
    background-color: transparent;
    border: none;      
    height: 1.2em;
    line-height: 1.2em;
    padding: 0;
} 
.visibility-container
{
    display: flex;
    border-radius: .4em;
    margin: 0 .5em;
    background-image: linear-gradient(30deg,#D6FFFF,#D7FFA8);
    box-shadow: 0 0 5px #00000088;
    overflow: hidden;
} 
.visibility-item
{
    position: relative;
    width: 2em;
    height: 2em;   
    cursor: pointer;        
    box-sizing: border-box;
}
.visibility-item:nth-of-type(1)
{
    border-radius: .4em 0 0 .4em;
}         
.visibility-item:nth-of-type(3)
{
    border-radius: 0 .4em .4em 0;
}
.visibility-item.-active
{
    border-color: black;
    border-bottom: 2px solid black;
}
.visibility-item img
{           
    width: 1.4em;
    height: 1.4em;
    margin: .3em;
}
.visibility-item:hover
{
    background-color: #00000033;
}
.drag-n-drop-overlay
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #FFFFFFCC;
    background-image: url(img/icons/dragdrop256.png);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 15000;
}
.drag-n-drop-overlay.-show
{
    display: block;
}
.hiddenCopyElement
{
    position: absolute;
    top: 0;
    left: 0;    
    opacity: 0;
    pointer-events: none;
}
.menu
{
    position: fixed;
    height: 100vh;
    width: 3em;
    background-color: #DDDDDDCC;   
    z-index: 800;          
    background-image: linear-gradient(30deg,#D6FFFF,#D7FFA8);
    box-shadow: 0 0 10px #00000044;
    display: flex;
    flex-direction: column;
}
.menu-item
{
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;     
    padding: .5em;       
    box-shadow: 0 0 0 0px #00000055 inset;
    transition: .2s;
    border-radius: .5em 0 0 .5em;
}
.menu-item:hover
{
    box-shadow: 0 0 0 5px #00000055 inset;
}  
.menu-line
{
    height: 2px;
    background-color: #00000088;
    width: 80%;
    margin: 2px 10%;
}
.menu-bigspace
{
    flex-grow: 1;
}
.menu-icon
{       
    height: 2em;
    width: 2em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.menu-hidden
{
    display: none;
}
.menu-description-container,.menu-notification-container,.menu-dropdown-container
{
    pointer-events: none;
    top: 0;
    left: 100%;
    position: absolute;  
    overflow: hidden; 
    z-index: 500;
}   
.menu-notification-container,.menu-dropdown-container
{
    z-index: 600;
} 
.menu-description,.menu-notification,.menu-dropdown
{                 
    background-image: linear-gradient(230deg,#D6FFFF,#D7FFA8);
    border-radius: 0 .5em .5em 0;
    white-space: nowrap;
    height: 3em;
    box-sizing: border-box;
    padding: 1em;
    line-height: 1em; 
    background-color: #DDD;
    display: inline-block;
    border: 1px solid #00000044;  
    transform: translate(-100%);
    transition: .3s;
}   
.menu-dropdown
{
    pointer-events: auto;
}
.menu-notification
{
    color: #00FF00;
}
.menu-item:hover .menu-description,.menu-item.-open .menu-dropdown,.menu-item.-notification .menu-notification
{
    transform: translateX(0%);
}   
.menu-input-drop
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 2px solid transparent;
    padding: 0;
    margin: 0;
    color: transparent;
    box-sizing: border-box;
    background: transparent;
    transition: .2s;
}
input.menu-input-drop.-success
{
    border: 2px solid green;
}     
input.menu-input-drop.-failure
{
    border: 2px solid red;
}
.menu-input-drop:focus
{
    border: 2px solid black;
}
.edit-this-button
{
    display: block;
    color: inherit;
    text-decoration: none;
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
    border: 2px solid black;
    padding: .3em .8em;
    border-radius: 50px;
}
.tabs-area
{
    
}
.tabs-container
{                
    display: flex;     
    justify-content: center;
    flex-wrap: wrap;       
    margin: .5em .5em;
    padding: 0 .5em;  
}
.tabs-section
{
    display: flex;
    background-color: #ddd; 
}
.tab-space
{
    width: 1em;
}   
.tab-break
{
    flex-basis: 100%;
    height: 0;
}   
.tab-container
{                        
    position: relative;
    text-align: center;
    padding: .3em .2em;     
    border: 2px dotted transparent;
}                       
.tab-container.-hidden
{
    display: none;
}
.tab-container.-edit:after
{
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    border: 2px dotted black;    
    border-radius: 6px;
    box-sizing: border-box;
    animation: dotblink 1s infinite;        
}
.tab-container.-edit.-slim
{                 
    border-width: 0;
    width: 1px;
    margin: 0;
    padding: 0;
}
.tab-container.-edit.-slim:after
{
    border-radius: 0px;
    border-width: 0 2px 0 0;
}
@keyframes dotblink
{
    0%, 100% {border-color: black;}
    50%  {border-color: transparent;}
}
.tab-container.-blank > *
{
    opacity: 0;
}
.tab-container.-blank.-slim > *
{
    width: 0;
    pointer-events: none;
}
.tab-hole
{
    position: relative;
    margin: .2em 0;
    height: 1em;
    width: 1em;
    border: 2px solid black;
    border-radius: 50%;
}
.tab-hole.-half:before
{    
    content: "";      
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    height: 0;
    width: 0;
    border: .58em solid black;
    border-color: transparent transparent black black;
    border-radius: 50%;
    transform: rotate(45deg);
}  
.tab-hole.-full:before
{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    display: block;
    background-color: black;
    border-radius: 50%;
}  
.tab-hole.-pre:after, div.tab-hole.-hover-pre:after
{
    content: "";
    display: block;
    position: absolute;
    border: 2px solid black;
    border-color: transparent transparent transparent black;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border-radius: 50%;
}      
div.tab-hole.-hover-pre:after
{
    border-left-color: #000000CC;
}
.tab-hole.-post:after, div.tab-hole.-hover-post:after
{
    content: "";
    display: block;
    position: absolute;
    border: 2px solid black;
    border-color: transparent black transparent transparent;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border-radius: 50%;
}     
div.tab-hole.-hover-post:after
{
    border-right-color: #000000CC;
}
.tab-pluss
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tab-plus
{
    width: 1em;
    height: .8em;
    line-height: .8em;
    opacity: 0;  
}  
.tab-plus.-active
{
    opacity: 1;
}
.tab-plus.-editor
{
    opacity: 1;   
    border: 1px solid transparent;
    cursor: pointer;
}
.tab-plus.-editor.-active 
{
    border-color: black;
}              
.tab-plus.-editor:hover
{
    background-color: #00000044;
}
.edit-box-section
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.edit-box
{              
    display: flex;
    padding: 5px;
    margin: 0 20px;
    text-align: center;  
    background-color: #CCCCCC;
    background-image: linear-gradient(90deg,#D6FFFF,#D7FFA8);
    border-radius: 15px;
    box-shadow: 0 0 10px #00000044;
}
.edit-box .tab-hole
{
    /*cursor: pointer;*/
}
.edit-box-row,.edit-box-column
{
    display: flex;  
    flex-basis: auto;
    justify-content: center;
}
.edit-box-row
{
    flex-direction: row;
}
.edit-box-column
{
    flex-direction: column;
}   
.edit-box-holes
{
    cursor: pointer;
    padding: 0 2em 0 2em;
}
.edit-box-hole
{                  
    pointer-events: none;
    animation: scale-in .5s both;
}
@keyframes scale-in
{
    0%{transform: scale(0)}
    50%{transform: scale(1.2)}
    100%{transform: scale(1)}
}
.edit-box-hole:nth-of-type(1){animation-delay:0s;}
.edit-box-hole:nth-of-type(2){animation-delay:.1s;}
.edit-box-hole:nth-of-type(3){animation-delay:.2s;}
.edit-box-hole:nth-of-type(4){animation-delay:.3s;}
.edit-box-hole:nth-of-type(5){animation-delay:.4s;}
.edit-box-hole:nth-of-type(6){animation-delay:.5s;}
.edit-box-plus
{
    animation: scale-in .5s both;
}                 
.edit-box-plus:nth-of-type(1){animation-delay:.6s;}
.edit-box-plus:nth-of-type(2){animation-delay:.7s;}
.pitch-grid
{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, auto  [col-start]);
    grid-template-rows: repeat(7, auto  [col-start]);
}
.pitch-grid > div
{
    cursor: pointer;
    border-radius: 4px;  
    line-height: 30px;
    height: 30px;
    width: 40px;
    text-align: center;
}
.pitch-grid > div:hover 
{
    background-color: #0003;
}
.pitch-grid > div:nth-of-type(n+8)
{
    transform: translateY(-50%);
}
.notes-length-container
{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, auto  [col-start]);
    grid-template-rows: repeat(6, auto  [col-start]);
}
.notes-length-container > div 
{
    cursor: pointer;
    border-radius: 4px;  
    line-height: 30px;
    height: 30px;
    width: 40px;
    text-align: center;

}
.notes-length-container > div:hover 
{
    background-color: #0003;
}
.edit-box-small-container
{
    margin-top: 0px;
}
.edit-box-small,.round-box
{                             
    padding: .5em;
    border: 2px solid #00000088;
    border-radius: 1em;  
    min-width: 2em;    
    margin: .3em;        
}   
.edit-box-small
{
    transform-origin: 50% 100%;  
} 
.edit-box-small,.edit-box-small-title
{
    animation: .3s clap-open both;
}
.edit-box-small.-button,.round-box.-button
{
    box-shadow: 0 0 0 0em #00000088 inset;
    transition: .2s;
    background: transparent;
    cursor: pointer;
}
.edit-box-small.-button:hover,.round-box.-button:hover
{                               
    color: white;
    box-shadow: 0 0 0 1.2em #000000AA inset;    
}
.edit-box-pitch
{
    text-align: center;   
}
.edit-box-small-title
{  
    animation-delay: .1s;
    transform-origin: 50% 0%;
    color: #555;    
}
@keyframes clap-open{
    0%{transform: rotateX(90deg);}
    100%{transform: rotateX(0deg);}
}
.edit-box-add-button
{
    cursor: pointer;    
}
.nav-container
{
    padding-top: 1em;
    display: flex;
    justify-content: center;
    color: #000000BB;
}
.nav-column
{
    margin: 0 2em;
}
.nav-title
{
    padding-bottom: 1em;
    padding-left: 1em;
    font-weight: bold;
}
.nav-item
{
    padding: .4em 0;
    max-width: 15em;
}
.nav-key
{                
    color: #222222;
    font-size: .9em;
    padding-left: .2em; 
}
.nav-text
{       
}
.img-container-positioner
{
    padding: 50px 0;
    text-align: center;
}                       
.img-container
{
    min-width: 250px;
    display: inline-block;
    background-color: #DDDDDD;   
    background-image: linear-gradient(90deg,#D6FFFF,#D7FFA8);     
    box-shadow: 0 0 10px #00000044;
    margin: 0 auto;
    border-radius: 1em
}
.img-information
{
    color: #333333;
    font-weight: normal;
    font-size: .9em;
    overflow-wrap: break-word;
}
.img-controls-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img-controls-title
{
    margin: 0;
    padding: .5em 2em;
}
.img-setting-row
{
    display: flex;
    justify-content: center;
}       
.img-setting-expander
{
    cursor: pointer;
}
.img-setting-expander:hover
{
    color: #444444;
}
.img-setting-expand
{
    display: none;
    padding: 10px;
    padding-top: 40px;
}
.img-controls-container.-show-settings .img-setting-expand 
{
    display: block;
}      
.img-preset-container
{
    position: relative;
    border: 2px solid #00000088; 
    border-radius: 10px;
    display: inline-block;
    padding: 2px; 
}     
.img-preset-container:after
{
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border: 2px solid black;
    border-color: transparent black black transparent;
    transform: rotate(45deg);
    bottom: 8px;
    right: 6px;
    border-radius: 3px;
}
.img-preset-title
{
    position: absolute;
    font-size: .8em; 
    text-align: left;   
    line-height: 1em;   
    z-index: 150;
    height: 1em;
}
.img-preset-container select
{
    position: relative;
    padding: 1em 20px 0 20px;
    z-index: 200;
    background-color: transparent;
    border: none;
    font: inherit;  
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}  
.img-preset-container select:after
{
    content: "d";
    display: block;
    position: absolute;
    background: red;
    height: 20px;
    width: 20px;
}
.canvasinput
{
    font: inherit;
    background: transparent;
    border: 2px solid #00000088;
    border-right-width: 20px;
}
.canvasinput-number
{
    width: 3em;
}
.img-controls-sizes
{
    min-width: 200px;
    position: relative;
    padding: 40px;       
}
.img-controls-sizes .canvasinput
{
    position: absolute;   
    left: 50%;
}
.canvasinput-canvasPadding
{  
    transform: translate(-40px,-20px); 
}
.canvasinput-holeMarginV
{
    transform: translate(40px,40px);
}
.canvasinput-holeWidth
{
    transform: translate(40px,70px);
}       
.canvasinput-strokeWidth
{
    transform: translate(-115px,30px);
}
.canvasinput-tabMargin
{
    transform: translate(-110px,85px);
}     
.canvasinput-tabMarginV
{
    transform: translate(40px,155px);
}
.img-input
{
    border: 1px solid black;
    border-radius: .3em;
    margin: .3em;
    padding: .2em 1em;
    background: #FFFFFF;
}
.img-input-draw
{
    width: 100px;
}
.img-input[type="button"]
{
    cursor: pointer;
}
.img-input[type="button"]:hover
{
    background: #EEEEEE;
}   
.img-input[type="button"]:active
{
    background: #DDDDDD;
}
.img-interact-buttons-container
{
    display: inline-block;
    transition: .2s;   
    transition-timing-function: ease-out;
    width: auto;      
    max-width: 0px;
    padding: 0 0px;
    pointer-events: none;          
    opacity: 0;
}          
.img-container-positioner.-show-img-buttons .img-interact-buttons-container
{
    display: inline-block; 
    max-width: 400px;        
    pointer-events: auto;       
    transition-timing-function: ease-in;
    opacity: 1;
}
.img-buttons
{
    padding-top: 35px;
}
.img-interact-buttons
{                    
    display: inline-block;    
    white-space: nowrap;
    transition: .2s;
}
.color-input-title
{
    font-size: .8em;
    text-align: left;
    font-weight: bold;
}
.color-input-container 
{
    position: relative;
    padding: 10px;
    margin: 5px;        
    border: 1px solid black;   
    border-radius: 1em;
}
.color-input-bg,.color-input-color
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;     
    border-radius: 1em;
}
.color-input-bg
{                   
    background-image: url(img/icons/transparent.png);
}
.color-input-color
{
}
.color-input
{
    position: relative;
    z-index: 500;      
    border: 1px solid black;
    border-radius: .4em;
}
.canvas-container
{
    position: relative;
    margin: 2px auto;      
    background-image: url(img/icons/transparent.png); 
}   

.canvas-container:before
{
    content: "";
    position: absolute;
    display: block;   
    border: 2px dotted #00000077;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
}
.canvas-container canvas
{       
    transform-origin: center 0px;
    position: absolute;
}    
.canvas-container:hover canvas
{
    transform-origin: center 0px;
    position: absolute;
}
.changelog-list
{
    width: 900px;
    margin: 0 auto;    
    padding-top: 50px;
}   
.changelog-item
{
    padding: 10px;
    margin: 20px 0;
    border: 2px solid #B8FF65;
    border-radius: 10px;
    box-shadow: 0 0 10px #00000044, 0 0 10px #00000044 inset;
}
.changelog-title
{
    position: relative;
    font-size: 2em;
    padding-bottom: .3em;
    margin-bottom: .3em;   
}
.changelog-title:before
{
    content: "";
    position: absolute;
    display: block;
    bottom: 0;      
    left: 0;     
    height: 2px;
    width: 100%;
    background-color: #B8FF65;
    box-shadow: 0 0 5px #00000077;
}
.changelog-section
{
    position: relative;
    padding: .3em;
    margin: .3em 0;
}   
.changelog-section:before
{
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background-color: gray;
}