:root {
    --bg-dark: hsl(232 94% 3%);
    --bg: hsl(224 75% 6%);
    --bg-light: hsl(221 52% 10%);
    --text: hsl(220 100% 100%);
    --text-muted: hsl(220 60% 75%);
    --highlight: hsl(220 31% 43%);
    --border: hsl(221 40% 32%);
    --border-muted: hsl(221 55% 22%);
    --primary: hsl(220 78% 76%);
    --secondary: hsl(40 53% 60%);
    --danger: hsl(9 42% 65%);
    --warning: hsl(51 29% 53%);
    --success: hsl(148 27% 56%);
    --info: hsl(217 46% 66%);
}

body {
    background-color: var(--bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-main {
    display: flex;
    align-items:center;
}

.image-container img{
    margin: 200px 100px;
    width: 40%;
    height: 30%;
}

.main-header {
    font-size: x-large;
    margin-left:-200px ;
    color: var(--text);
    opacity: 80%;

}

.sub-header {
    font-size: larger;
    color: var(--text-muted);
    margin-left:-200px;
    margin-top: -15px;

}

.buttons {
    margin-top: 60px;
    margin-left: -200px;
    display: flex;
    gap: 20px;
}

.language-button {
    display: flex;
    gap: 10px;
    padding: 15px;
    background-color: var(--bg-light);
    border: solid 1px var(--border-muted);
    border-radius: 20px;
    transition: 0.1s ease-in;
}

.language-button:hover{
    filter: invert(1);
    cursor: pointer;
}

.language-button img {
    filter: invert(none);
    width: 20px;
}

.language-button a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}