header {
    text-align: center;
    background-color: rgba(245, 245, 245, 0.9);
    width: 50vw;
    border-radius: 5px;
    box-shadow: 10px 10px 5px #2e3440;
}

main {
    text-align: center;
    background-color: rgba(245, 245, 245, 0.9);
    width: 50vw;
    border-radius: 5px;
    box-shadow: 10px 10px 5px #2e3440;
}

body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: ". mainContent .";
    background-color: #2e3440;
    font-family: 'Ubuntu', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%23d8dee9' fill-opacity='0.07' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.logo {
    height: 200px;
}

.mainContent {
    grid-area: mainContent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

code {
    background-color: #2e3440;
    font-family: 'Ubuntu Mono', monospace;
    color: azure;
    text-align: start;
    font-size: large;
    line-height: 130%;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas: "code result" "code result" "code result";
}

.code {
    grid-area: code;
    border-radius: 2px;
}

.result {
    grid-area: result;
}

.result iframe{
    height: 200px;
}

.kod-kolor-1 {
    color: #81a1c1
}

.kod-kolor-2 {
    color: #8fbcbb;
}

.kod-kolor-3 {
    color: #a3be8c;
}

.hcode{
    width: 200px;
}
#dwnl{
    width: 100px;
}
a{
    color: #5e81ac;
}