@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root{
    --bgColor: #212121;
    --textColor: #d7d7d7;
    --gradientAccentColor1: rgba(3, 26, 131, 0.8);
    --gradientAccentColor2: rgba(126, 0, 25, 0.8);
    --gradientAccentColor: var(--gradientAccentColor1) , var(--gradientAccentColor2) ;
    --gradientBGColor1:rgba(27,27,27,1);
    --gradientBGColor2:rgba(27,27,27,1);
    --gradientBGColor:var(--gradientBGColor1), var(--gradientBGColor2) ;
    --gradientRotation: 45deg;
}

* {
    margin: 0;
    transition: background 300ms;
}

body {
    background: var(--bgColor);
    color: var(--textColor);
    font-family: "Roboto mono", monospace;
    font-size: 1rem;
}
footer{
    text-align: center;
}
h2 {
    font-family: Oswald, monospace;
    font-size: 3rem;
}
h3{
    font-size: 1.5rem;
    padding-bottom: 1vh;
}

a {
    color: inherit;
    text-decoration: none;
}

#header {
    position: sticky;
    top: 0; 
    overflow: auto;
    font-family: "Montserrat", monospace;
    padding: 1vh;
    background: linear-gradient(var(--gradientRotation), var(--gradientAccentColor));
}

#headerLogo {
    float: left;
    text-align: left;
    font-style: italic;
    font-size: 2rem;
}

#headerTitle {
    margin-right: 1vh;
    text-align: right;
}

#artykuly {
    flex-wrap: wrap;
    display: flex;
}
.artykul, .tresc{
    border-radius: 2vh;
    margin: 1vh;
    padding: 2vh;
    border: 0.5vh solid transparent;
    background: linear-gradient(var(--gradientBGColor)) padding-box, linear-gradient(var(--gradientRotation), var(--gradientAccentColor)) border-box;
    transition: 300ms;
}

.artykul {
    flex: 1 0 21%;
}


.tresc {
    width: auto;
}

.headerElement {
    padding-right: 2vh;
    padding-left: 2vh;
    padding-top: 0.5rem;
    float: right;
    text-align: right;
    cursor: pointer;
}

.button{
    text-align: center;
    margin-right: 20%;
    margin-left: 20%;
    margin-top: 1vh;
    padding: 1vh;
    border-radius: 10vh;
    border: 0.5vh solid transparent;
    background: linear-gradient(var(--gradientBGColor)) padding-box, linear-gradient(var(--gradientRotation), var(--gradientAccentColor)) border-box;
    cursor: pointer;
}

.artykul:hover, .button:hover {
    --gradientBGColor:rgba(27,27,27,0.8), rgba(27,27,27,0.8);
}

.odstep {
    height: 3rem;
}

@media only screen and (min-width: 750px)    {
    #artykuly {
        display: grid;
        grid-template-columns: [end] 100%;
    }
    #header{
        display: grid;
        grid-template-columns: auto auto;
    }
    #headerLogo, #headerTitle{
        text-align: center;
        grid-column: span 2;
    }
    .headerElement{
        text-align: center;
    }
}
@media (prefers-color-scheme: light) {
    :root{
        --bgColor: #ddd;
        --textColor: #282828;
        --gradientAccentColor1: rgba(7, 42, 205, 0.8);
        --gradientAccentColor2: rgba(205, 27, 63, 0.8);
        --gradientBGColor1: rgba(217,217,217,1);
        --gradientBGColor2: rgba(217,217,217,1);
    }
    #header{
        color: var(--bgColor);
    }
   .artykul:hover {
        --gradientBGColor:rgba(217,217,217,0.8), rgba(217,217,217,0.8);
    }
}