:root {
    

}

/*----- FONTS -----*/
@font-face {
    font-family: alien;
    /* set name */
    src: url(../assets/fonts/Alien.ttf);
    /* url of the font */
}

@font-face {
    font-family: alienato;
    /* set name */
    src: url(../assets/fonts/ALIENATO.TTF);
    /* url of the font */
}

@font-face {
    font-family: emoji;
    /* set name */
    src: url(../assets/fonts/EmojiFont.ttf);
    /* url of the font */
}

@font-face {
    font-family: typewriter;
    /* set name */
    src: url(../assets/fonts/typewriter_condensed/typewcond_regular.otf);
    /* url of the font */
}

@font-face {
    font-family: galaxy;
    /* set name */
    src: url(../assets/fonts/Galaxy_dingbats-Regular.ttf);
    /* url of the font */
}

@font-face {
    font-family: mermaid;
    /* set name */
    src: url(../assets/fonts/mermaid/Mermaid1001.ttf);
    /* url of the font */
}

/*----- GENERAL -----*/

.container {
    display: grid;
    grid-template-columns: 0.5fr 2fr 1fr;
    gap: 5px;
}


h1 {
    font-family: alien;
    color: rgb(0, 0, 0);
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "mermaid", sans-serif;
}

body {
    font-family: "typewriter", sans-serif;
}

a {
    font-family: "typewirter", sans-serif;
    font-style: italic;
}

.flex {
    display: flex;
}


span.alien {
    font-family: alienato;
    font-size: 20px;
}

span.emoji {
    font-family: emoji;
    font-size: 25px;
}

span.galaxy {
    font-family: galaxy;
    font-size: 25px;
}


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

header {
 background-image: url(../assets/img/bg/bg-header.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center right;
}

header p {
    font-size: 2.5rem;
    padding: 20px 55px 15px 75px;
    color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.11);
    width: 10%;
    margin: 0;

}



/*---- LEFT SIDEBAR ----*/

#left-sidebar {
    padding: 10px;
}

/*--- navigation---*/
#navigation {
    ul {
        

        li {
            a {
                color: black;
                &:hover {
                    color: rgb(160, 42, 62);
                }
            }
        }
    }
}



footer {
 
    display: flex;
    align-items: center;
    padding: 1.8rem 0;
    justify-content: center;
    background-size: 25px;

    p {
        color: black;
        width: 100%;
        margin: 0;
        padding: 0 .9rem;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
    }
}