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

body {
    background-image: url(./assets/background.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    place-content: center;
    height: 100vh;
    overflow: hidden;
}

#app {
    display: grid;
    grid-template-areas: "aside header" "aside main" "aside footer";
    gap: 1.5rem;
}

aside {
    grid-area: aside;
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

.menu {
    display: flex;
    padding: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 5rem;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0px 8px 4px 0px rgba(0, 0, 0, 0.05), 
    0px 1px 1px 0px rgba(255, 255, 255, 0.30) inset, 
    0px -1px 1px 0px rgba(255, 255, 255, 0.10) inset;
    backdrop-filter: blur(16px);
    height: fit-content;
    align-self: center;
}

.menu ion-icon {
    display: flex;
    padding: 0.5rem;
    align-items: flex-start;
    border-radius: 80px;
    color: #FFFFFF;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.8;
}

.menu ion-icon:hover{
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.navigation {
    display: flex;
    padding: 0.5rem 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    border-radius: 5rem;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0px 8px 4px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(255, 255, 255, 0.30) inset, 0px -1px 1px 0px rgba(255, 255, 255, 0.10) inset;
    backdrop-filter: blur(16px);
    width: fit-content;
    justify-self: center;
}

.actions {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.actions ion-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #FFFFFF;
    opacity: 0.8;
    display: flex;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 80px;
}

.actions i.ai-panel-left:hover, 
.actions ion-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.actions i.ai-panel-left {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5rem;
    color: #FFFFFF;
    opacity: 0.8;
}

.adress-bar {
    display: flex;
    width: 27.5rem;
    padding: 0.75rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 5rem;
    background: rgba(0,0,0,0.1);
    box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.20) inset;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    font-family: 'Inter';
    line-height: 1.5rem;
}

.adress-bar ion-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0; /* utilizada em layouts flexíveis (Flexbox). definido como "0", o elemento não irá reduzir de tamanho em relação aos outros elementos flexíveis dentro do mesmo contêiner. Isso significa que ele manterá seu tamanho original mesmo que haja espaço insuficiente, evitando que seja espremido para caber no espaço disponível. */
    opacity: 0.8;
}

.yt {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.yt ion-icon {
    width: 1rem;
    height: 1rem;
    margin-top: -2px;
}

.screen {
    width: 60rem;
    height: 33.75rem;
    border-radius: 32px;
    box-shadow: 0px 8px 4px 0px rgba(0,0,0,0.05);
    border: 1px solid transparent;
    position: relative;
}

.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.6));
    border-radius: inherit;
    margin: -1px;
    z-index: -1;
}

iframe {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.interaction {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-self: center;
}

.interaction .circle {
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    height: 0.5rem;
    width: 0.5rem;
}

.interaction .rectangle {
    height: 0.5rem;
    width: 5.375rem;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

#app {
    animation: appear 400ms 500ms backwards;
}

@keyframes appear {
    from {
        scale: 2;
        opacity: 0;
    }    
}