@font-face {
    font-family: "Audiowide";
    src: url("fonts/Audiowide-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;

}




body {
    background-color:#cb2821;
    background-image:url("background.jpg");
    background-repeat:repeat;

}
/* Main stuff */
.container {
    display: grid;
    max-width: 1000px;
    margin: auto;
    gap: 20px;
    font-family: "Lato", sans-serif;
}
/* Header */
#header {
    width: 100%;
    height: 100px;
    margin-top: 25px;
    background-color:#f5f5dc;
}

#header h1 {
    font-family: "Audiowide", sans-serif;
    margin-left:100px;
}

#header h3 {
    margin-top:-15px;
    margin-left:100px;
}

#header img {
    display:flex;
    margin-top: -115px;
    margin-left:-9px;
    
}
/*Navegation bar*/
#navbar {
    width: 100%;
    height: 35px;
    background-color:#f5f5dc;

}

#navbar ul {
    display:flex;
    padding:0;
    margin:0;
    list-style-type: none;
    justify-content: space-evenly; /*ver isto melhor*/
}

#navbar a {
    font-size: 20px;
    margin-right:20px;
    margin-left:5px;
    padding-top:5px;
    font-weight:700;
    text-decoration:none;
    color: #000000;
}

#navbar a:hover {
    color:#b43333;
}


/*The main text and side bars*/
#content {
    display: flex;
    gap:10px;
}

#sidebar1 {
    background-color: #f5f5dc;
    width: 200px;
    padding: 20px;
    order:1;
}

#statistics {
    display:grid;
    border: dotted #ceceb0;

}

#statistics p {
    margin-left: 2px;
    margin-top:1px; 
    margin-bottom:10px ;
}

#messages {
    display:grid;
    margin-top:30px;
    border: dotted #ceceb0;
}

#messages p {
    margin-left: 2px;
    margin-top:1px; 
    margin-bottom:10px ;    
}

#sidebar1 hr {
    margin-top:30px;
    border: dotted #9c9c86;
}

/*Mainbar*/
#mainbar {
    background-color: #f5f5dc;
    flex:1;
    width:150px;
    padding: 20px;
    order:2;
}


#mainbar h4 {
  font-size: 25px;
  margin-top: -10px; 

}

#maintext {
    font-size: 20px;
    margin-top: -5px;
    margin-bottom:30px; 
}

#mainbar hr {
    margin-bottom:30px;
    border: dotted #9c9c86;
}


#mainbar ul {
    font-size: 20px;
    margin-top: -10px;

}

#mainbar li {
    margin-bottom:10px;
}

#mainbar a {
    color:#000000;
    text-decoration: none;
    
}

#mainbar a:hover {
    text-decoration: underline;

}
/*This is for now for "sobre" tab*/
.text p {
    font-size: 20px;
    margin-top: -15px;
    margin-bottom:35px;
}

/*sidebar 2*/

#sidebar2 {
    background-color: #f5f5dc;
    width: 200px;
    padding: 20px;
    order:3; 
}

#news p {
    margin-left: 2px;
    margin-top:1px;
    margin-bottom: 10px;
    
}

#news li {
    margin-left:20px;
    font-size: 15px;
    margin-top:1px;
}

#news {
    display: grid;
    border: dotted #ceceb0;
}

#sidebar2  button {
    display:flex;
    margin:auto;
    background-color:#57cb21;
    border-color: #57cb21;
    padding:5px 12px;
    margin-top:30px;
    color:white;
    cursor: pointer;
        
}
#buttontext {
    text-align: center;

}

#sidebar2 hr {
    margin-top:30px;
    margin-bottom: 20px;
    border: dotted #9c9c86;
}

#rand img {
    display:inline-flex;
    justify-self: center;
    align-items: center;
}


#sidebar2 button:hover {
    background-color: #63e726;
}



/*For "Sugerir Site" */

#mainbar ol {
    font-size:20px;
    margin-top:-15px;
    margin-bottom:35px;
}

#red a{
    text-decoration: underline;
    color:#cb2821;
}

/*Footer*/
#footer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color:#f5f5dc;


}

#footer p {
    margin-left: auto;
    padding-right: 10px;

 }


/*Tables*/

#mainbar table {
    width: 90%;
    border-collapse: collapse;
}
#mainbar th, td {
    padding:5px 20px;
    text-align: left;
    border-bottom: 1px solid #000000;

}

#mainbar td {
    background-color: #e6e6c3;
    padding-right: 40px;
    border-right: 1px solid #e6e6c3;
}

/* 850 , 250 , 5 */

/*When theres no website published*/
#nothing {
    display:flex;
    font-size: 25px;
    justify-content: center;
    margin:auto;
    padding:auto;
}

#nothing {
    margin-bottom: 20px;
}

/*Changelog*/
#update h3 {
    margin-bottom:-20px;
    
}

#update li {
    font-size: 18px;
}