@import url('https://fonts.googleapis.com/css?family=Roboto:100,400');



/*body- and main-afiliated style*/
body
{
	font-family:'Roboto', sans-serif;
	font-weight: 300;
}

body>header
{
    margin-top: 2.5%;
    padding: 10px;
}

main
{
    margin-top: 40px;
}

body>header, main
{
    border: 0.5px #b3b3b3 solid;
    background-color: #fff;
}


/*body on-hover animation callout*/
body>header:hover, main:hover
{
    border: 0.5px #fff dotted;
	animation-name: grey-shadow;
    animation-duration: 0.5s;
    animation-fill-mode:forwards;
}
body>header:not(:hover), main:not(:hover)
{
	animation-name: grey-unshadow;
    animation-duration: 0.5s;
}


main, article
{
    padding: 20px;
}

main, header, article>div, article, div>img, footer
{
    margin-left: auto;
    margin-right: auto;
}

article
{
    text-align: center;
    margin-bottom: 20px;
}

div
{
    margin:0;
}
div>img
{
    width:90%;
}

div>h3
{
    margin:0;
}

/*footer-afiliated style*/
footer
{
    background-color: #0001;
    list-style:none;
}

div>header>h3
{
    margin-top: 0;
}

footer>h4
{
    background-color: #0003;
    margin-bottom: 0;
    margin-top: 50px;
}

footer, footer>h4
{
    padding: 20px;
    margin-top:20px;
}

/*project tile colours*/
.IIIlo
{
    background-color: rgb(240,140,226);
    margin:0;
}
.IIIlo>div>h3
{
    background-color: #2bff59;
}

.niebieski
{
    background-color: #547662aa;
}
.niebieski>div>h3
{
    color: #843c30;
    background-color: #fdcf99dd;
}

.rozowy
{
    background-color: #ff00ffaa;
}
.rozowy>div>h3
{
    background-color: #7fffd4;
}


/*project tile animations*/
.IIIlo:hover
{
    animation-name: IIILO;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.IIIlo:not(:hover)
{
    animation-name: odIIILO;
    animation-duration: 500ms;
}

.niebieski:hover
{
    animation-name: nieb;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.niebieski:not(:hover)
{
    animation-name: odnieb;
    animation-duration: 500ms;
}

.rozowy:hover
{
    animation-name: roz;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.rozowy:not(:hover)
{
    animation-name: odroz;
    animation-duration: 500ms;
}



.inline
{
    display: inline-block;
}

.center
{
    text-align: center;
}

a:link, :visited
{
    color:black;
    text-decoration: none;
}

a:hover
{
    animation-name: a-hover;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
    text-decoration: none;
}
a:not(:hover)
{
    animation-name: a-unhover;
    animation-duration: 600ms;
    text-decoration: none;
}