@font-face {
    font-family: "Bungee";
    src: url("/public/fonts/Bungee-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "ComicNeue";
    src: url("/public/fonts/ComicNeue-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Oswald";
    src: url("/public/fonts/Oswald-Regular.woff2") format("woff2");
}

:root {
    /* Neutros Globales */
    --color-background: hsl(0, 0%, 98%);
    --color-surface:    hsl(0, 0%, 100%);  
    --color-text-primary:   hsl(210, 10%, 10%); 
    --color-text-secondary: hsl(210, 10%, 40%); 
    --color-disabled:    hsl(0, 0%, 70%); 
  
    /* Paleta de Carreras */
    --color-career-accounting:      hsl(168, 50%, 40%); 
    --color-career-administration:  hsl(210, 60%, 40%); 
    --color-career-computing:       hsl(25, 75%, 50%);  
    --color-career-translation:     hsl(280, 40%, 50%); 
  
    /* Variables Semánticas */
    --color-primary:   var(--color-career-computing);
    --color-secondary: var(--color-career-administration);
    --color-success:   var(--color-career-accounting);
    --color-accent:    var(--color-career-translation);
  
    /* Estados */
    --color-active:    var(--color-primary); 
    --color-hover:     hsl( var(--color-computing-h), var(--color-computing-s), 60% );
    --color-focus:     hsl( var(--color-computing-h), var(--color-computing-s), 45% );
    --color-disabled-bg: hsl(0, 0%, 90%);
  }

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

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    /*template*/
    grid-template-rows: 5rem 1fr 5rem ;
    grid-template-columns: 1fr 3fr;

    grid-template-areas: 
        "header header"
        "aside main"
        "footer footer";
    background-color: var(--color-background);
}

/* HEADER */
.header{ 
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 5rem;
    grid-template-areas: 
        "home-button navbar-menu user-menu";
    padding-right: 2rem;
    padding-left: 2rem;
    place-items: center;
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-primary);
    width:100vw;
}

.header__hamburger{
    display: none;
}

.header__hamburger__svg{
width: 50px;
}

.header__home-button {
    grid-area: home-button;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: fit-content;
}

.header__home-button:hover {
    text-shadow: 0 0 5px var(--color-surface);   
}

.header__home-button:hover:first-child{
    filter: drop-shadow(0 0 5px var(--color-surface));
}

.header__home-button__img{
    width: 55px;
    color: var(--color-primary);
}

.header__home-button__title{
    width: 8rem;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-family: "Bungee";
    font-size: small;
    text-align: center;
}

.header__navbar{
    width: 100%;
    grid-area: navbar-menu;
    
}

.header__navbar__menu{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 5rem;
}

.header__navbar__menu__item{
    place-content: center;
    list-style: none;
    margin: auto;
}

.header__navbar__menu__item__link{
    text-decoration: none;
    color: var(--color-primary);
    font-family: "Oswald";
}

.header__navbar__menu__item__link:hover{
    font-size: 1.3rem;
    text-shadow: 0 0 8px var(--color-background);
}

.header__user-menu{
    grid-area: user-menu;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 5rem;
    gap: 1rem;
    place-content: center;
    place-items: center;
}

.header__user-menu__item:hover{
    scale: 1.1;
    filter: drop-shadow(0 0 5px var(--color-background));
}

.header__user-menu__item__link{
    text-decoration: none;
}

.header__user-menu__item__link__img{
    width: 30px;
}

/* ASIDE */
.aside{
    grid-area: aside;
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 2rem;
    grid-template-rows: 5rem 4fr;
    place-items: center;
    border-right: 1px solid var(--color-primary);
    background-color: var(--color-accent);
    height: 100%;
}

.aside__title{
    font-family: 'Oswald';
    color: var(--color-background);
    text-align: center;
    text-decoration: underline;
    font-size: xx-large;
    text-shadow: 0 0 5px var(--color-active);   
    cursor: default;
    grid-column: 1;
    grid-row: 1;
}

.aside__career{
    list-style: none;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: auto;
}

.aside__careers__item{
    text-align: center;
    margin: 2rem;
    width: 8rem;
}

.aside__careers__item:hover{
    scale: 1.1;
    text-decoration: line-through;
    text-decoration-color: var(--color-background);
    text-shadow: 0 0 10px var(--color-active);   
}

.aside__careers__item__link{
    text-decoration: none;
    color: var(--color-background);
}

/* MAIN */
.main{ 
    grid-area: main;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5rem 1fr 3rem;
    padding: 2rem;
    margin: auto;
}

.main__title{
    font-family: 'Bungee';
    color: var(--color-primary);
    text-align: center;
    text-decoration: underline;
    margin: 1rem;
    font-size: xx-large;
    text-shadow: 0 0 5px var(--color-primary);   
    cursor: default;
}

.main__img {
    margin: auto;
    filter: drop-shadow(0 0 10px var(--color-active));
    border-radius: 10px;
}

.main__button {
    width: 10rem;
    height: 3rem;
    background-color: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-background);
    border-radius: 99999px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    font-family: "Oswald";

    position: relative;
    bottom: 8rem;
}

.main__button:hover {
    scale: 1.1;
    filter: drop-shadow(0 0 10px var(--color-primary));
}

/*  FOOTER */
.footer{ 
    grid-area: footer;
    text-align: center;
    display: grid;
    place-content: center;
    border-top: 1px solid var(--color-primary);
    background-color: var(--color-secondary);
}

.footer__text{
    font-family: "Bungee";
    color: var(--color-primary);
}

.footer__text__link {
    text-decoration: none;
    color: var(--color-background);
}

.footer__text__link:hover {
    text-shadow: 0 0 10px var(--color-primary);
    text-decoration: underline;
}


/* MOBILES */
@media screen and (max-width: 479px){
    .header{
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 5rem;
        width: 100vw;
    }

    .header__navbar{
        display: none;
    }

    .header__hamburger{
        display: flex;
        grid-column:1 ;
        grid-row: 1;
    }

    .header__home-button{
        grid-column: 2;
        grid-row: 1;
    }
    .header__user-menu{
        grid-column: 3;
        grid-row: 1;
    }
}

/* TABLETS */
@media screen and (max-width: 767px) {
    body{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 5rem 3rem 1fr 5rem;
    }
    
    .header{
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 5rem;
        width: 100vw;
    }

    .header__navbar{
        display: none;
    }

    .header__hamburger{
        display: flex;
        grid-column:1 ;
        grid-row: 1;
    }

    .header__home-button{
        grid-column: 2;
        grid-row: 1;
    }
    .header__user-menu{
        grid-column: 3;
        grid-row: 1;
    }

    .aside{
        grid-column: 1;
        grid-row: 2;
        display: grid;
        padding: 0;
        margin: 0;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .aside__title{
        font-size: 1.5rem; 
        grid-column: 1;
        grid-row: 1;
        
    }
    .aside__career{
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: 3rem;
        gap: 0;

    }
    .aside__careers__item{
        margin: auto;

    }
    .main{
        grid-column: 1;
        grid-row: 3;
        margin: auto;
    }
  
    .footer{
        grid-column: 1;
        grid-row: 4;
    }
}