/* 

---------- TYPOGRAPHY ----------

FONT SIZES
12px / 16px / 30px / 48px / 62px

FONT WEIGHTS
400 / 700

LINE HEIGHTS
1.2 / 1.5

FONT FAMILY
Bree sherif

---------- COLORS ----------

PRIMARY
Base:  #3bc9db
Tint:  #99e9f2
Shade: #15aabf

GREY
Base:  #343a40

White: #ffffff (White)
Black: #000000 (Black)

---------- BORDER RADIUS ----------

10px 

---------- SPACING SYSTEM ----------

5px / 10px / 15px / 20px / 25px / 30px / 40px / 50px / 60px / 70px / 80px / 90px / 100px / 125px / 150px / 200px / 250px / 300px / 400px / 500px

*/

/* ----------------------- GLOBAL STYLES ----------------------- */


:root{

    /* FONT SIZE */
    --text-sm: 1.2rem;
    --text-base: 3rem;
    --text-paragraph: 3.5rem;
    --text-h2: 4.8rem;
    --text-h1: 6.2rem;

    /* FONT WEIGHT */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* LINE HEIGHTS */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;

    /* FONT FAMILY */
    --font-family: "Bree Serif", serif;

    /* COLORS */
    --color-primary: #3bc9db;
    --color-primary-thinth: #99e9f2;
    --color-primary-shade: #15aabf;
    --color-grey: #343a40;
    --color-black: #000000;
    --color-white: #ffffff;

}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    font-size: 62.5%;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-grey);
}

.content{
    width: 90%;
    margin: 0 auto;
    margin-top: 1rem;
    
}


h1, h2, h3, h4, h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--text-h1);
}

.h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}
.h2{
    font-size: var(--text-h2);
}

p {
    font-size: var(--text-paragraph);
}

a {
    text-decoration: none;
    font-size: var(--text-base);
    display: inline-block;
}

a:link, a:visited, a:hover, a:active {
    color: var(--grey-base);
}

ul {
    list-style: none;
}

span {
    display: inline-block;
}

/* ----------------------- COMPONENTS ----------------------- */


.btn-primary{
    color: var(--color-primary);
}

.btn-primary:link, .btn-primary:visited{
    color: var(--color-primary);
}


.btn-primary:hover, .btn-primary:active{
    color: var(--color-primary-shade);
}


.btn-sub{
    border: 3px solid var(--color-grey);
    border-radius: 10px;
    padding: 0.25em 0.5em;
    background: #d1d5db;
    font-size: var(--text-base);
}
.btn-sub:not(:disabled){
    border-color: var(--color-primary);
    background: transparent;

}
.btn-sub:hover:not(:disabled) {
    border: 3px solid var(--color-primary-shade);
    color: var(--color-black);
}

.btn:visited, .btn:link{
    color: var(--color-grey);
}

.btn:active, .btn:hover{
    color: var(--color-black);
    
}
.span-primary{
    color: var(--color-primary);
}

.span-primary:hover{
    color: var(--color-primary-shade);
}

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

/* ----------------------- SECTIONS ----------------------- */

/* ------ HEADER ------ */

header{
    display: flex;
    justify-content: space-between;
    align-items: normal;
    margin-bottom: 12em;
}

.sign-btn{
display: flex;
align-items: center;
gap: 0.5em;
}

.sign-in-svg{
width: 2em;

}


/* ------ MAIN ------ */


.main-cube{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10em;
    margin-bottom: 4em;
}


.main-sadly-svg{
    width: 20em;
}


.navbar{
    display: flex;
    justify-content: center;
    gap: 1em;
    
}


/* ------ ADMIN PANEL ------ */

table, td, th {
  border: 1px solid black;
}

table {
    margin-top: 1em;
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
  font-size: 1.5em;
  vertical-align: middle;
  height: 3em;
}
.table-db-cb{
    transform: scale(2);
}
.table-db-sub{
    width: 75%;
    font-size: 1em;
    background-color: rgb(175, 55, 55);
    border: 3px solid var(--color-black);
    border-radius: 10px;
}