:root{
    --color1: white;
    --color2: #212529;
    --color3: #798cac;
    --naranjaTC: #ffaf00;
    --azulTC: #001b4a;
}

*{
    box-sizing: border-box;
    font-family: 'Poppins';
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

header {
    padding: 0.7rem 0;
    background-color: var(--azulTC);
}

h4 {
    display: flex;
    justify-content: center;
    padding: 2rem 0 0.5rem 0;
    margin: 0 auto;
    font-size: 1.5rem;
}

footer{
    background-color: var(--azulTC);
    padding: 1rem 2rem;
}

/* Custom local fonts */

@font-face {
    font-family: 'MonumentBlack';
    src: url('fonts/PPMonumentExtended-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MonumentRegular';
    src: url('fonts/PPMonumentExtended-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PressStart2P';
    src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* CSS of all the upper menu of the webpage */

.upperMenu { 
    padding: 0 .7rem;
    align-items: center;
    vertical-align: middle;
}

.headerContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: initial;
}

.iconTC > img{
    width: 3rem;
    height: 1.75rem;
    margin-top: 0.6rem;
    margin-left: 0.6rem;
}

.textTC {
    padding: 1rem 1rem;
    font-family: 'Poppins';
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--color1);
    font-weight: 300;
}

.menuButton {
    padding: 1rem 0.5rem;
    text-decoration: none;
    font-size: 1rem;
    color: var(--color1);
    font-family: 'MonumentBlack';
    transition: color 0.2s;
}

.menuButton:hover{
    color: var(--color3);
}

.buttons--list{
    display: flex;
    flex-direction: row;
    list-style: none;
    padding-left: 2.5rem;
}

.textTC:active, .menuButtons:active {
    text-decoration: none;
}

/* End of header/menu, main time

    .mainContainer's CSS */

.mainContainer{
    background-color: var(--color1);
}

.mainContainer--header > h4{
    justify-content: center;
    color: var(--azulTC);
    font-size: 1.2rem;
    font-family: 'PressStart2P';
}

.mainContainer--body > p{
    display: block;
    margin: 1rem 6rem;
    text-align: center;
    line-height: 1.25rem;
    font-size: 1rem;
}
.mainContainer--body > p > a, .mainContainer--body > p > a:visited, .mainContainer--body > p > a:active {
    text-decoration: none;
    font-weight: 600;
    color:var(--naranjaTC);
}

/* .mainBackground time */

.mainBackground {
    background-image: url(/images/GOTC.png);    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--color1);
    height: 87.3vh;
    display: block;
    padding: 3rem;   
}

.mainBackground--brand {
    text-align: center;
    display: block;
    margin-top: 7.5rem;
}

.mainBackground--brand > img {
    height: 0;
    width: 0;
}

.mainBackground--members {
    background-image: url(/images/valencia.jpg);    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--color1);
    height: 50vh;
    display: block;
    padding: 3rem;   
}

.mainBackground--title {
    font-size: 3rem;
    font-family: 'MonumentBlack';
    font-weight: 200;
    color: var(--color1);
    margin: 0 auto;
}

.mainContainer--list {
    display: flex;
    justify-content: center;
    margin: 1rem 6rem;
    line-height: 1.6rem;
    font-size: 1rem;
}

/* Cambia el color de los bullets de los elementos de lista */
.mainContainer--listitem {
    position: relative;
    list-style: none; /* Elimina el estilo de lista predeterminado */
    padding-left: 1.5em; /* Añade espacio a la izquierda para el nuevo bullet */
}

.mainContainer--listitem::before {
    content: '•'; /* Define el bullet como un punto */
    color: var(--naranjaTC); /* Cambia este valor al color que desees */
    font-size: 1.5rem; /* Ajusta el tamaño del bullet */
    position: absolute;
    left: 0;
    top: 0;
}

.mainSpace {
    width: 70vw;
    margin: 0.5rem;
    padding: 1rem;
    padding-bottom: 0;
    display: block;
    position: relative;
    left: 15%;
}

.mainSpace > hr {
    border: none;
    height: 1.5px;
    background-color: var(--azulTC);
}

/* End of main. Footer starts */

.footerBar {
    display: flex;
    flex-direction: row;
    height: 4rem;
}

.footerBar--TC, .footerBar--copy  {
    color: var(--color1);
    margin: auto;
    font-family: 'MonumentBlack';
}

.footerBar--icon{
    font-size: 1.25rem;
    color: var(--color1);
    transition: color 0.2s;
}

.footerBar--icon:hover {
    color: var(--color3);
}

.footerBar--social{
    display: flex;
    gap: 1rem;
    margin: auto;
}