/*** Style for LoganPredy.com ***/

body {  
	font-family: 'Francois One', sans-serif;
	font-weight: 400;
} 

.highlightit:hover img{
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-transition: all 0.1s ease-in-out 0s;
	transition: all 0.1s ease-in-out 0s;
	-webkit-transition: all 0.1s ease-in-out 0s;
	-o-transition:  all 0.1s ease-in-out 0s;
	position: relative; 
	top: -10px;
}

.site-row {
	display: block;
	margin: 5px auto;
	padding: 0;
	text-align: center; 
	font-size: 115%;
	font-weight:bold;
}

.site-row-top .rounded {
	margin: 10px;
}

#spectrum {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 56px;
	padding: 0;
	text-align: center; 
	font-weight:normal;
}

#contact-header {
	text-align: center;
	font-size: 160%;
	font-weight:bold;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	display: block;
}

#contact-info {
	font-size: 130%;
	text-align: center;
	margin-top: 10px;
}

a:link {text-decoration: none; color: dimgrey;}
a:visited {text-decoration: none; color: dimgrey;}
a:active {text-decoration: none; color: gainsboro;}
a:hover {
	-moz-transition: color 0.2s ease-in-out 0s;
	transition: color 0.2s ease-in-out 0s;
	-webkit-transition: color 0.2s ease-in-out 0s;
	-o-transition: color 0.2s ease-in-out 0s; 
	text-decoration: none; 
	color: #9C9C9C;
}

.rounded {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	border: 3px solid white;
}

h1 {
	font-size: 70px;
	line-height: 1.1;
	display: block;
	margin: 0 auto 50px;
	text-align: center;
	padding: 15px 0;
    color: transparent;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    animation: rainbow 35s linear infinite;
}

h2 {
	font-size: 42px;
	color: #000;
	margin: 30px auto 20px;
	text-align: center;
}

.button {
	padding: 0.55em 1.5em;
	text-align: center;
	text-decoration: none;
	color: dimgrey;
	border: 2px solid dimgrey;
	font-size: 22px;
	display: inline-block;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

.button:before {
	content: "";
	background-color: rgba(255,255,255,0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	transform: skewX(-45deg) translateX(0);
	transition: none;
}

.button:hover {
	background-color: dimgrey;
	color: #fff;
	border-bottom: 4px solid darken(dimgrey, 10%);
}

.button:hover:before {
	transform: skewX(-45deg) translateX(15.5em);
	transition: all 0.4s ease-in-out;
}

@keyframes rainbow{
    100%{
        background-position: 30em 0;
    }
}

@keyframes sheen {
  0% {
    transform: skewY(-45deg) translateX(0);
  }
  100% {
    transform: skewY(-45deg) translateX(12.5em);
  }
}

@media screen and (max-width: 420px) {
	#amg img, #gameusagi img {
		width: 95%;
		height: auto;
	}
}

@media screen and (max-width: 575px) {
	#top-icons {
		width: 92% !important;
	}
}

@media screen and (max-width: 870px) {
	#top-icons {
		width: 375px;
	}
	
	#top-icons span {
		padding: 0 !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}