@import url('https://fonts.googleapis.com/css?family=Courgette|Indie+Flower');
/* 
font-family: 'Indie Flower', cursive;
font-family: 'Courgette', cursive;
 */

body {
	margin: 0;
	background: linear-gradient(90deg, purple 15%, crimson 30%, orangered 50%, gold 75%);
	text-align: center;
}

.wrap {
	position: relative;
	margin: 50px auto 0 auto;
	max-width: 1230px;
	width: 100%;
}
.my {
         cursor: default;
}
a.my,
a.github,
a.gmail,
a.codpen {
	font-family: 'Indie Flower', cursive;
	text-align: center;
	line-height: 2;
        text-decoration: none;
       font-weight: bold;
        color: black;
}

.github,
.gmail,
.codpen {
        font-size: 2rem;
        line-height: 1;
}

.github:hover,
.gmail:hover,
.codpen:hover {
         color: blue;
         text-decoration: underline;
}

.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
}
.flex a {
	width: 30%;
	text-decoration: none;
	color: gray;
	display: inline-block;
        font-size: 26px;
}


.flex a:after {
	margin-top: 15px;
	display: block;
	content: '';
	width: 100%;
	height: 300px;
	transition: 0.3s;
	border-radius: 15px;
}

.flex a:hover:after {
	margin-top: 15px;
	display: block;
	content: '';
	width: 100%;
	height: 300px;
	transform: scale(1.1);
}
.flex a:after {
	transition: 0.3s;
}


.faker:after {
        background: transparent url(../img/logo.svg) no-repeat center;
}
.cardItem:after {
        background: transparent url(../img/addcard.png) no-repeat center;
}
.checklist:after {
        background: transparent url(../img/imgCheck.png) no-repeat center;
}
.materialize:after {
        background: transparent url(../img/materialize.png) no-repeat center;
}
.Practice-2:after {
        background: transparent url(../img/bootstrap.png) no-repeat center;
}
.exam:after {
        background: transparent url(../img/exam.png) no-repeat center;
}
.agency:after {
	background: transparent url(../img/agency.png) no-repeat center;
}
.portfolio:after {
	background: transparent url(../img/portfolio.png) no-repeat center;
}
.end:after {
	background: transparent url(../img/end1.png) no-repeat center;
}
.q:after {
	background: transparent url(../img/mob.png) no-repeat center;
}
.w:after {
	background: transparent url(../img/watch.png) no-repeat center;
}
.e:after {
	background: transparent url(../img/blog.png) no-repeat center;
}
.r:after {
	background: transparent url(../img/login.png) no-repeat center;
}
.t:after {
	background: transparent url(../img/magazin.png) no-repeat center;
}
.y:after {
	background: transparent url(../img/chat.png) no-repeat center;
}
.u:after {
	background: transparent url(../img/test.png) no-repeat center;
}
.i:after {
	background: transparent url(../img/first.png) no-repeat center;
}
.o:after {
	background: transparent url(../img/phoneL.png) no-repeat center;
}
.b:after {
	background: transparent url(../img/futurama.jpg) no-repeat center;
}

.p:after {
	background: transparent url(../img/table.png) no-repeat center;
}
.a:after {
	background: transparent url(../img/rock.png) no-repeat center;
}
.color-random:after {
        background: transparent url(../img/changebg.png) no-repeat center;
}