@import url('https://rsms.me/inter/inter-ui.css');

:root {
  --white: #FFFFFF;
  --black: #000000;
  --light: #EEEEEE;
  --blue: #007FFF;
  --red: #CC0000;
  --primary: var(--red);
}

*{
	box-sizing: border-box;
}

.white, a.white{
	color: var(--white);
}

.black, a.black{
	color: var(--black);
}

.light, a.light{
	color: var(--light);
}

.blue, a.blue{
	color: var(--primary);
}

.bg-primary{
	background-color:var(--primary);
	color:var(--white);
}

body{
	margin:0;
	padding:0;
	font-family: 'Patrick Hand', cursive, sans-serif;
	font-size:1rem;
	line-height: 1.25;
}

a{
	color:var(--primary);
}

a.black:hover{
	color:var(--primary);
}

nav{
	position: fixed;
	z-index: 10;
	bottom:0;
	left:0;
	right:0;
	background:rgba(255,255,255,0.95);
	border-top:2px solid var(--white);
	justify-content: space-around;
}

nav .item{
	text-align: center;
	text-decoration: none;
	color:var(--primary);
	font-size:.8rem;
	padding:.5rem 0;
	font-weight: 500;
	transition: .2s ease all;
}

nav .item.active{
	color:var(--primary);
}

nav .item.active svg{
	animation: zap .2s ease forwards;
}

nav .item path, nav .item g{
	transition: .2s ease all;
}

nav .item.active path, nav .item.active g{
	fill:#CC0000;
}

nav .item:not(.active){
	opacity: .4;
}

nav .label{
	margin:0;
}

.recipe .image{
	
}

.recipe:hover .image{
	
}

.title{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden; 
}

.ratio{
	padding-top:50%;
}

.bg-cover{
	background-size:cover;
	background-position:50% 50%;
}

.slider-outer{
	width:100%;
	overflow: hidden;
}

@media (orientation: landscape) {

	body{
		padding-left:20%;
	}

	nav{
		position: fixed;
		flex-direction: column;
		justify-content: start;
		width:20%;
		top:0;
		bottom:0;
		left:0;
		right:auto;
		padding:1rem 0 0 2rem;
	}

	nav .item{
		text-align: left;
		font-size:1.25rem;
		padding:.5rem 0 0 2rem;
		margin-bottom:1rem;
		position: relative;
	}

	nav .item svg{
		position: absolute;
		left:-1rem;
		top:.25rem;
	}

}

#slider{
	width:400%;
	transition: .3s ease all;
	display: flex;
}

#slider.recipes{
	transform: translateX(0);
}

#slider.search{
	transform: translateX(-25%);
}
#slider.books{
	transform: translateX(-50%);
}
#slider.blog{
	transform: translateX(-75%);
}

input{
	width:100%;
	padding:.75rem;
	box-sizing: border-box;
	font-size:1rem;
	font-family: 'Inter UI', sans-serif;
}
input:focus{
	outline:2px solid var(--primary);
	box-shadow: none;
}

.blog{
	height: 100%;
	background: var(--light);
}

.card{
	background:var(--white);
	padding:1rem;
	text-decoration: none;
}
.card .action{
	text-transform: uppercase;
	font-size: 75%;
	font-weight: bold;
	margin-bottom:0;
}


@keyframes zap {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.2) rotate(8deg);
    }
    100%{
    	transform: scale(1.0);
    }
    /* Share Bar */
#share-bar {
    font-size: 20px;
}

/* Title */
#share-bar h4 {
    margin-bottom: 10px;
    font-weight: 500;
}

/* All buttons */
.share-buttons {
}

/* Each button */
.share-button {
    margin: 0px;
    margin-bottom: 10px;
    margin-right: 3px;
    border: 1px solid #D3D6D2;
    padding: 5px 10px 5px 10px;
}
.share-button:hover {
    opacity: 1;
    color: #ffffff;
}

/* Facebook button */
.fa-facebook-official {
    color: #3b5998;
}
.fa-facebook-official:hover {
    background-color: #3b5998;
}

/* Twitter button */
.fa-twitter {
    color: #55acee;
}
.fa-twitter:hover {
    background-color: #55acee;
}

/* Google-PLus button */
.fa-google-plus {
    color: #dd4b39;
}
.fa-google-plus:hover {
    background-color: #dd4b39;
}

/* Pinterest button */
.fa-pinterest-p {
    color: #cb2027;
}
.fa-pinterest-p:hover {
    background-color: #cb2027;
}

/* Tumblr button */
.fa-tumblr {
    color: #32506d;
}
.fa-tumblr:hover {
    background-color: #32506d;
}

/* Reddit button */
.fa-reddit-alien {
    color: #ff4500;
}
.fa-reddit-alien:hover {
    background-color: #ff4500;
}

/* LinkedIn button */
.fa-linkedin {
    color: #007bb5;
}
.fa-linkedin:hover {
    background-color: #007bb5;
}

/* Email button */
.fa-envelope {
    color: #444444;
}
.fa-envelope:hover {
    background-color: #444444;
}
}