@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

:root {
    --background: #000;
    --text-color: #FFF;
    --button: #8257E5;
    --border: #29292E;
    --border-menu-mobile: #A8A8B3;
    --text-color-menu-mobile: #E1E1E6;
  }

* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Manrope';}

body {
    display: flex; /*para poder usar 'margin-top: auto' e deixar a img no inferior da pág*/
    flex-direction: column;
    min-height: 100vh;
    background-image: url(../assets/blur-1.png), url(../assets/blur-2.png); /*imagens borradas nas duas extremidades*/
    background-color: var(--background);
    background-position: bottom left, top right;
    background-repeat: no-repeat, no-repeat;
}

header {
    display: grid;
    grid-template-areas:
    "logo topics button";
    justify-content: center;
    align-items: center;
    padding: 50px 0px 40px;
}

.logo{
    grid-area: logo;
    cursor: pointer;
    height: 50px;
    width: 44px;
    background: url(../assets/logo-desktop.svg) no-repeat;
}

.topics {
    grid-area: topics;
    display: flex;
    gap: 32px;
    color: var(--text-color);
    font-size: 14px;
    padding-left: 128px;
    margin-inline: 50px;
}

div.radio{
    cursor: pointer;
}

label input {display: none;}

input[type="radio"]:checked + .radio {
    border-bottom: 5px solid var(--button);
}

.button {
    grid-area: button;
    all: unset;
    border: 1px solid var(--button);
    width: 172px;
    height: 37px;
    border-radius: 6px;
    color: var(--text-color);
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    cursor: pointer;
}

.button:hover {
    background-color: var(--button);
    box-shadow: 0px 0px 6px var(--button);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: auto; /*img stays at the bottom*/
    width: 100%;
    overflow: hidden;
}

.title {
    grid-area: title;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.03em;
    color: var(--text-color);
    text-align: center;
}

#title-2 {
    text-shadow: -1px -1px 0 var(--button), 1px -1px 0 var(--button), -1px 1px 0 var(--button), 1px 1px 0 var(--button);
    color: var(--background);
}

.coffee-image {
    grid-area: image;
    margin-top: auto; /*img at bottom*/
}

.new-button, p {
    display: none;
}