/* 
    Created on : May 28, 2020, 5:47:49 PM
    Author     : darlock
*/

/*

#EB7847 Mandarin
#C4A77D Light French beige
#70877F Xanadu
#454372 #3a0078 Purple navy
#2F2963 St Patrick's blue
#CDCAE3 Light periwinkle

#ECFBB2 Key lime

*/
:root {
    --font-color: #2F2963;
    --font-color-bright: #EB7847;
    --bg-color: #fff;
    --bg2-color: rgba(220,202,227,0.4); /* #CDCAE3 */
    --bg2-dark-color: rgba(220,202,227,0.8); /* #CDCAE3 */
    --bg3-color: #1c0039;
    --alpha1-bg-color: rgba(0,0,0,0.1);
    
    --form-bg-color: #eee;
    --form-sel-bg-color: #ECFBB2;
}

[data-theme="light"] {
    --font-color: #2F2963;
    --font-color-bright: #EB7847;
    --bg-color: #fff;
    --bg2-color: #CDCAE3;
    --bg3-color: #1c0039;
    --alpha1-bg-color: rgba(0,0,0,0.1);
    
    --form-bg-color: #141424;
    --form-sel-bg-color: #ECFBB2;
}

[data-theme="dark"] {
    --font-color: #C4A77D;
    --font-color-bright: #EB7847;
    --bg-color: #161625;
    --bg2-color: #1c0039;
    --bg3-color: #1c0039;
    --alpha1-bg-color: rgba(255,255,255,0.1);
    
    --form-bg-color: #ECFBB2;
    --form-sel-bg-color: #807c18;
}

body {
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
}

.sticky + .content {
  padding-top: 102px;
}

.main-title {
    background-image: url('/static/img/table-mac-mouse.jpg');   
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;    
}

.main-box2 {
    background-image: url('/static/img/mac-pen.jpg');   
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;    
}

.main-box3 {
    background-image: url('/static/img/table-people.jpg');   
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;    
}

.form-control {
    color: var(--font-color);
    background-color: var(--form-bg-color);
}
.form-control:focus {
    color: var(--font-color);
    background-color: var(--form-sel-bg-color);
}

.bf-header {
  width: 100%;
  padding-bottom: 10px;
  background-color: rgba(10,10,10,0.7);
  color: var(--font-color);
  z-index: 1;
}

.bf-background2 {
    background-color: var(--bg2-color);
}

.bf-background2-dark {
    background-color: var(--bg2-dark-color);
}

.bf-footer {
    background-color: var(--bg3-color);
    color: var(--font-color-bright);
    font-weight: bolder;
/*
    bottom: 0;
    /*box-sizing: border-box;
    height: 7rem;
    width: 100%;
    padding: 6px;
    /*position: fixed;
    z-index: 99999;*/
}

.bf-bright {
    color: var(--font-color-bright);
}

/*

Generic styles

*/
.resource {
    font-size: 12rem;
    border-width: 12px;
    border-radius: 8px;
    border-style: solid;
}

/*
    Silent links
 */
a.quiet:link {
  color: var(--font-color-bright);
}

/* visited link */
a.quiet:visited {
  color: var(--font-color-bright);
}

/* mouse over link */
a.quiet:hover {
  color: var(--font-color-bright);
}

/* selected link */
a.quiet:active {
  color: var(--font-color-bright);
}

.bf-left {
    text-align: left;
}

.bf-right {
    text-align: right;
}

.bf-center {
    text-align: center;
}

.tile {
    margin: 1rem;
}

h1 {
    font-size: 10rem;
    color: var(--bg3-color);
    font-weight: normal;
}

h2 {
    font-size: x-large;
    color: var(--font-color-bright);
}