/* Defines common styles used everywhere on this website, such as font or background color*/
@import url("info.css");
@import url("forms.css");

*
{
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;    
    box-sizing: border-box;   
}

body
{
    background-color: #1d1f21;    
    color: #f1f2eb;    
    padding: 0;
    margin: 0;        
    
    text-align: center;
}

h1
{
    font-size: 30px
}

h2
{
    font-size: 20px
}

h3
{
    font-size: 15px
}

sup
{
    font-size: 10px;
}

.beveledCorners
{
    --beveled-corner-size: 10px;
    clip-path: polygon(var(--beveled-corner-size) 0%, calc(100% - var(--beveled-corner-size)) 0%, 100% var(--beveled-corner-size), 100% calc(100% - var(--beveled-corner-size)), calc(100% - var(--beveled-corner-size)) 100%, var(--beveled-corner-size) 100%, 0 calc(100% - var(--beveled-corner-size)), 0% var(--beveled-corner-size));
}

/* Wrapper which vertically centers its child */
.verticalCentererWrapper
{    
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}

a, a:visited
{
    color: #e1bb80;
    transition: color .5s, text-shadow .5s;
}

a:hover
{
    color: #f6b545;
    text-shadow: 0 0 2px #f6b545;
}

label.checkbox
{
    position: relative;
    
}

.pagination
{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;    
}

.pagination > a
{
    display: inline-block;
    line-height: 35px;
    margin: 0 5px 5px 0;
    padding: 1px;
    
    border-radius: 10px;
    text-decoration: none;
    background-color: #1d1f21;
    border: 2px solid #650d1b;    
    color: white;
    width: 42px;
    height: 42px;
    transition: all .5s;
}

.pagination > a:hover
{
    border-color: gold;
    transform: scale(1.1);
}

.pagination a.current
{
    color: gray;
    border-color: gray;
    background-color: transparent;
    pointer-events: none;
}

/* TABLES */
table:not(.noDefaultTableStyle)
{
    display: inline-block;        
    border-collapse: separate;
    border-spacing: 1px;
    clear: both;
}

table:not(.noDefaultTableStyle) tr td
{   
    background-color: #1d1f21;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    transition: background-color .5s, border-color .5s;
    border: 2px solid #282a2e;
    
    text-align: left;
}

table:not(.noDefaultTableStyle) tr:hover:not(:first-child) td
{
    background-color: #222326;        
    border: 2px solid #650d1b;
}

table:not(.noDefaultTableStyle):not(.noHeader) > tbody > tr:first-child td
{
    font-weight: bold;
    background: linear-gradient(#650d1b, #38070f)
}    

table tr td.tools
{
    background-color: transparent;
}

table tr td.tools a
{
    display: inline-block;
    transform: scale(1.2);
    color: gray;
    text-decoration: none;
}

table:not(.noHeader) > tbody > tr:first-child td
{
    position: sticky;
    top: 0;
}

.pairList
{
    text-align: left;
    display: inline-block;
}

.pairList > div
{
    border-bottom: 1px dashed gray;
}

.pairList > div > span
{
    display: inline-block;
    min-width: 180px;        
}

#gestureBall
{
    display: none;
    border-radius: 100px; 
    width: 80px; 
    height: 80px; 
    background-color: #CD6F32; 
    position: fixed; 
    
    bottom: 15px;
    left: 15px;
    opacity: 0.2; 
    border: 3px solid #7B431E;
    box-shadow: 0 0 10px black;
    z-index: 100;
}

span.tools a
{
    display: inline-block;
    transform: scale(1.2);
    color: gray;
    text-decoration: none;
}


.pageHint, .pageHint *
{
    font-size: 10px;    
    color: gray;
}