/* hi :D enjoy my messy css */

body{
    background-color: #343434;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    background-image: url(images/darkbg.png);
    background-repeat: repeat;
    color: #F8f8f8;
    font-size: 1.2em;
    overflow-x:hidden
}

table tr td {
    vertical-align: top;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url(fonts/AtkinsonHyperlegible.ttf) format("truetype");
} 

@font-face {
    font-family: "Trajan Pro";
    src: url(fonts/TrajanPro.otf) format("opentype");
} 


#container{
    width: 50vw;
    min-width: 800px;
    position: absolute;
    left: 50%;
    top: 10px;
    background-color: #4B4B4B;
    transform: translate(-50%);
    padding-left: 10px;
    padding-right: 10px;
}

#container2{
    width: 50vw;
    min-width: 800px;
    position: absolute;
    left: 50%;
    top: 150px;
    background-color: #4B4B4B;
    transform: translate(-50%);
    padding: 10px;
}

.rightside{
    float: right; 
    width: 70%;
}

.stats{
    display: grid;
}

.profile-tabs{
    text-align:right;
    margin-top:-10px;
}

.profile-sidebar {
    float: left; 
    width: 30%; 
    background-color: #4b4b4b;
    padding: 10px; 
    box-sizing: border-box;
}

.profile-content{
    width: 100%;
    text-align: justify; 
    border: 15px solid #343434;
    background-color: #343434;
    box-sizing: border-box;
}

.menu{
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 3px solid #83B0C6;
    border-top: 3px solid #83B0C6;
}

.main{
    width: 100%;
    text-align: center;
}

.text-writing{
    text-align: justify;
    text-align-last: center;
    padding-left:15px;
    padding-right:15px;
}

.text-left{
    text-align: justify;
    padding-left:15px;
    padding-right:15px;
}
a.navigation, a.navigation:active, a.navigation:visited, a.navigation:link{
    font-family: 'Trajan Pro', serif;
    color: #83B0C6;
    font-weight: bold;
    line-height: 2.5;
    border: none;
    transition: 0.3s;
    padding-left: 15px;
    padding-right: 15px;
}

a.navigation:hover{
    color: #dddddd;
    font-weight: bold;
    border-bottom: 5px solid #83B0C6;
    border-top: 5px solid #83B0C6;
}


a, a:active, a:visited, a:link{
    color: #83B0C6;
    text-decoration: none;
    border: none;
    font-weight: bold;
}

a:hover{
    color: #dddddd;
    text-decoration: none;
    border: none;
    font-weight: bold;
}

b{
    text-decoration: none;
}

i{
    color: #dddddd;
}


blockquote{
    background-color: #dbdddd;
    border-left: 10px solid #FFFFFF;
    padding: 5px;
}

img{
    border: none;
}

.tab {
    width:100%;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    overflow: hidden;
    font-weight: bold;
    border: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background-color: #4b4b4b; 
    color: #dddddd;
    box-sizing: border-box;
}

.tab button {
    background-color: #4b4b4b; 
    color: #4b4b4b; 
    padding: 14px 16px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-weight: bold;
    width: 20%;
    border: none;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #343434;
    color: #343434; 
    text-transform: uppercase;
    font-weight: bold;
    border: none;
}

.tab button.active {
    background-color: #343434;
    color: #343434; 
    text-transform: uppercase;
    font-weight: bold;
    border: none;
}

.tabcontent {
    display: none;
    background-color: #343434; 
}

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}

li {
    display: table-cell;
    text-align: center;
    border: none;
    padding: none;
    line-height: 1.5;
    vertical-align: middle;
    word-wrap: break-word;
}

table.relationships, tr.relationships, td.relationships {
    border: 1px solid #343434;
    padding: 5px;
    border-collapse: collapse;
    text-align: center;
}

table, tr, td {
    border:none;
    text-align: center;
}

td {
    vertical-align: middle;
    background-color:#4b4b4b;
    color:#dddddd;
    text-align: justify;
    text-align-last: center;
 }

a.uppereaslow, a.uppereaslow:active, a.uppereaslow:visited, a.uppereaslow:link{
color:#D23939;
text-decoration:none;
text-transform:uppercase;
background-color: #D23939;
}

a.uppereaslow:hover{
color:#D23939;
background-color:#dddddd;
text-decoration:none;
text-transform:uppercase;
}

a.lowereaslow, a.lowereaslow:active, a.lowereaslow:visited, a.lowereaslow:link{
color:#5071E0;
text-decoration:none;
text-transform:uppercase;
background-color: #5071E0;
}

a.lowereaslow:hover{
color:#5071E0;
background-color:#dddddd;
text-decoration:none;
text-transform:uppercase;
}

a.rothdale, a.rothdale:active, a.rothdale:visited, a.rothdale:link{
color:#999999;
text-decoration:none;
text-transform:uppercase;
background-color: #999999;
}

a.rothdale:hover{
color:#999999;
background-color:#dddddd;
text-decoration:none;
text-transform:uppercase;
}

a.arrelstead, a.arrelstead:active, a.arrelstead:visited, a.arrelstead:link{
color:#32A231;
text-decoration:none;
text-transform:uppercase;
background-color: #32A231;
font-size:32px;
}

a.arrelstead:hover{
color:#32A231;
background-color:#dddddd;
text-decoration:none;
text-transform:uppercase;
}

a.asilia, a.asilia:active, a.asilia:visited, a.asilia:link{
color:#9163C9;
text-decoration:none;
text-transform:uppercase;
background-color: #9163C9;
}

a.asilia:hover{
color:#9163C9;
background-color:#dddddd;
text-decoration:none;
text-transform:uppercase;
}

h2 {
    text-align:center;
    font-family: 'Trajan Pro', serif;
    border-bottom: 3px solid #83B0C6;
    border-image: linear-gradient(to right, transparent 15%, #83B0C6 20% 80%, transparent 85%) 100% 1;
    letter-spacing: 2px;
    color: #dddddd;
    font-weight: bold;
  margin-bottom:10px;
  padding-bottom:5px;
}

h3 {
    text-align: center;
    letter-spacing: 3px;
    color: #F8f8f8;
    font-weight: normal;
    margin-top: 0px;}

h4 {
    text-align:center;
    font-family: 'Trajan Pro', serif;
    border-bottom: 3px solid #83B0C6;
    border-image: linear-gradient(to right, transparent 15%, #83B0C6 20% 80%, transparent 85%) 100% 1;
    letter-spacing: 2px;
    color: #dddddd;
    font-weight: bold;
  margin-bottom:10px;
  padding-bottom:5px;
}

.rothdaleheader {  
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid #BBBBBB;
  border-image: linear-gradient(to right, transparent 15%, #BBBBBB 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}

.asiliaheader {  
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid  #9163C9;
  border-image: linear-gradient(to right, transparent 15%, #9163C9 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}

.arrelsteadheader {  
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid #32A231;
  border-image: linear-gradient(to right, transparent 15%, #32A231 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}

.uppereaslowheader {  
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid #D23939;
  border-image: linear-gradient(to right, transparent 15%, #D23939 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}

.lowereaslowheader {
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid #5071E0;
  border-image: linear-gradient(to right, transparent 15%, #5071E0 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}

.divider {
  font-family: 'Trajan Pro', serif;
  border-bottom: 3px solid #83B0C6;
  border-image: linear-gradient(to right, transparent 15%, #83B0C6 20% 80%, transparent 85%) 100% 1;
  font-weight:bold;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:10px;
  padding-bottom:5px;
}