@charset "utf-8";
/* CSS Document */

/* || VARIABLES */
:root {
    /* FONT */
    --FF:"Nunito", sans-serif;
    --FS: 1.2em;
    --FS-XL: 2em;
  
    /* COLOR */
    --BGCOLOR: #475569;
    --DARK-COLOR: black;
    --FOOTER-COLOR: grey;
    --HEADER-COLOR: rgb(145, 155, 192);
    --LIGHT-COLOR: whitesmoke;
    
    /* GENERAL */
    --MAIN-PAD: 1em;
    --BORDER-RADIUS: 1em;
    --SHADOW:0 6px 5px -5px var(--DARK-COLOR);
   }


html {
    font-family:var(--FF);
}

* {
    margin: 0;
} 

main {
    background: var(--BGCOLOR);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}


h1 {
    text-align: center;
    color: var(--LIGHT-COLOR);
}

button {
    padding: .5em 0;
    background: rgb(91, 157, 157);
    border: 1px solid black;
    border-radius: .4em;
    width: calc(100% - 2em);
    font-size: 1.2em;
    box-shadow: var(--SHADOW);
    color: var(--LIGHT-COLOR);
}

.btn :hover {
    opacity: .9;
}

.current {
    opacity: .2;
    box-shadow: 0;
}

nav {
    display: flex;
    justify-content: space-arround;
    margin: 1.3em 0;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}

header .center {
  margin-right: 12%;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}

footer .center {
    margin-left: 10%;
  }

footer .right {
    text-align: end;
}

.btn {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

h1 {
    color: var(--DARK-COLOR);
}

h2 {
    color: var(--DARK-COLOR);
    margin-bottom: .2em;
}

p {
    font-size: var(--FS);
}

img {
    height: 7em;
    width: auto;
    margin-right: 1em;
} 

#copy {
    margin: 0;
    padding: .2em;
    background: var(--HEADER-COLOR);
    text-align: center;
    opacity: .9;
    font-size: 1em;
    color: var(--LIGHT-COLOR);
}

#index1 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
}

#index2 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
}

#index3 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
}

#index4 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index4 img {
    float: left;
}

caption {
    font-weight: 800;
    font-size: 1.5em;
 }

 table {
    margin: 10px auto;
    width:620px;
    min-width: 30em;
    max-width: 40em;
    border: 1px solid #808080;
    border-collapse: collapse;
    background: #ffffff;
}
td, th {
    box-sizing: border-box;
    width: 100px;
    height: 24px;

    padding: 2px 5px;
}


tbody, tr {
	display: block;
    
}

thead, tfoot {
    background: #d6d6d6;
}

tbody tr:nth-child(odd) {
    background: #f6f6f6;
}
tbody th {
    text-align: left;
}

td {
    text-align: right;
    padding-right: 40px;
}

tbody tr:hover {
    background: #2e0066;
    color: #ffffff;
}

#scroll {
    height: 120px;
    overflow-y: auto;
}
tfoot td:last-child {
    width: 117px;
    padding-right: 58px;
}
thead th:last-child {
    width: 117px;
    padding-right: 25px;
}

.logo {
    height: 2.2em;
    width: auto;
}