@font-face{
    src: url('Ubuntu-R.ttf');
    font-family: 'Ubuntu';
}
@keyframes obracanie{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
*{
    box-sizing: border-box;
    color: #fff;
}
body{
    background-color: #333;
    /*========================================================
      This pattern is downloaded from www.subtlepatterns.com
      If you need more, that's where to get'em.
    ========================================================*/
    background-image: url('./bg.jpg');
/*     background-size: cover; */
    background-position: top;
    background-attachment: fixed;
    font-family: sans-serif;
}
a{
    text-decoration: none;
    color: #007291;
}
.logo{
    text-align: center;    
    font-size: 200px;
    font-family: 'Ubuntu', sans-serif;
    text-shadow: 2px 2px 5px #000;
}
.logo span{ color: #800080; }
.logo b{ font-size: 120px; }
main{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.porady{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 630px;
    min-height: 150px;
    background: #243447;
    margin: 20px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 15px 0 #000;
}
.porady:hover{ filter: brightness(1.2); }
.porady::before{
    content: '';
    position: absolute;
    width: 115%;
    height: 80px;
    margin: -15px;
    background: linear-gradient(90deg, #00ccff, #d400d4);
    animation: obracanie 4s linear infinite;
}
.porady:nth-child(3n)::before{ animation: obracanie 4.5s linear infinite }
.porady:nth-child(3n + 1)::before{ animation: obracanie 3.5s linear infinite }
.porady::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: #141d26;
    border-radius: 10px;
}
.tytul, .opis{
    display: block;
    font-family: 'Ubuntu';
    align-self: flex-start;
    position: relative;
    z-index: 3;
}
.tytul{
    font-size: 70px;
    font-weight: 500;
    margin: 0 0 10px;
}
.opis{
    margin: 0 0 0 25px;
    font-weight: 300;
    font-size: 20px;
}

@media (max-width: 1200px){
    a{
        font-size: 300px;
    }
    .porady{
        width: 850px;
    }
    .tytul{
        font-size: 96px;
    }
    .opis{
        font-size: 32px;
    }
}
@media (max-width: 1000px) and (orientation: portrait) {
    a{
        font-size: 30vw;
    }
    .porady{
        width: 90vw;
        padding: 1.5vw;
    }
    .tytul{
        font-size: 9vw;
    }
    .opis{
        font-size: 4vw;
    }
}