:root {
    --culoare-1: rgb(0, 217, 255);
    --culoare-1-alt: rgb(2, 184, 191);
    --culoare-2: rgb(253, 187, 102);
    --culoare-2-alt: rgb(218, 157, 77);
    --culoare-2-alba: rgb(255, 232, 202);
    --gradient-culoare-1: linear-gradient(
        to bottom,
        var(--culoare-1) 0%,
        var(--culoare-1-alt) 100%
    );
    --gradient-culoare-2: linear-gradient(
        to bottom,
        var(--culoare-2-alba) 0%,
        var(--culoare-2) 100%
    );
    --header-px: 80px;
}

body * {
    box-sizing: border-box;
}

html {
    background-color: var(--culoare-2);
    background-image: var(--gradient-culoare-2);
    background-attachment: fixed;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    /* pt asezare in pagina */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    width: auto;
    left: 0;
    
    height: var(--header-px);
    color: var(--culoare-2-alba);

    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;

    color: white;

    background: var(--gradient-culoare-1);
    box-shadow: 3px 5px 5px var(--culoare-1-alt);

    text-shadow: 2px 2px 5px gray;
}

footer {
    position: relative;
    bottom: 0;

    text-shadow: 2px 2px 5px var(--culoare-2-alt);
}

main {
    flex: 1;

    padding-top: calc(var(--header-px) + 30px);

    padding-left: 15vw;
    padding-right: 15vw;

    color: var(--culoare-1-alt);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

img {
    border: 5px solid var(--culoare-2-alt);
    border-radius: 15px;

    box-shadow: 3px 5px 5px var(--culoare-2-alt);

    max-width: 500px;
    max-height: 300px;

    margin: 15px;
}