/**
 * musingsdev style
 * 
 * @date 2024.01.24
 * @version 1.0
 * @author: Federica Sibella - https://www.musings.it
 */
/* bangers-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bangers-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cutive-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cutive Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cutive-mono-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

:root {
	--white: #ffffff;
	--text-color: #37444c;
	--text-color-dark: #161b1e;
	
	--accent-green: rgb(156,192,37);
	--accent-green-dark: rgb(60,158,11);
	--accent-green-zero: rgba(156,192,37,0);
	--accent-green-seven: rgba(156,192,37,0.7);
	
	--accent-green-dark-one: rgb(60,158,11,0.1);
	
	--accent-blue: rgb(32,146,208);
	
	--background: #f8f9f8;
	--image-shadow: rgba(255,255,255,0.5);
	--offset: 1rem;
	--grid-gap: 1rem;
	--vh: 1vh;
	--max-width: 1200px;
	--line-height: 1.5rem;
	--after-content: '';
}

html, body {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-height: 100%;
	min-width: 360px;
	font-size: 16px;
	font-weight: normal;
    font-style: normal;
    scroll-behavior: smooth;
    background-color: var(--background);
    line-height: var(--line-height);
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Cutive Mono', monospace;
    color: var(--text-color-dark);
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Bangers', sans-serif;
	line-height: calc(2* var(--line-height));
	margin: 0;
	color: var(--text-color);
}

h1 {
	font-size: 3em;
	margin-bottom: 1rem;
}

h2 {
	font-size: 2.75em;
	margin-bottom: 1rem;
}

p {
	font-size: 1.25em;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

a {
	position: relative;
	color: var(--accent-green-dark);
	text-decoration: none;
	padding-bottom: 2px;
}

a:active,
a:hover,
a:visited {
  outline: 0;
}

a:after {
	content: '';
	height: 2px;
	background: var(--accent-green-dark);
	width: 0;
	position: absolute;
	bottom: 0;
	left: 0;
}

a:hover:after {
	width: 100%;
  	-webkit-animation-duration: .8s;
    animation-duration: .8s;
  	-webkit-animation-name: bordergrow;
    animation-name: bordergrow;
  	-webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes bordergrow {
  0% {
    left: 50%;
    width: 10%;
  }
  100% {
    left: 0;
    width: 100%;
  }
}

@keyframes bordergrow {
  0% {
    left: 50%;
    width: 10%;
  }
  100% {
    left: 0;
    width: 100%;
  }
}

::selection { 
	background: var(--accent-green);
	color: var(--background);
}

/**
 * section layout	
 */
header, section, footer {
	position: relative;
	width: 100%;
	max-width: var(--max-width);
	display: block;
	margin: 0 auto;
}

header {
	text-align: center;
	margin: 2em auto 4em;
}

header h1 {
	padding: 0 1em;
}

header h1 span {
	font-size: 2.5em;
	display: block;
	margin: 0 auto 2rem;
}

section {
	display: flex;
	flex-direction: column;
	row-gap: 4em;
	justify-content: center;
	align-items: center;
}

section .info-wrapper {
	flex: 1 1 auto;
	display: flex;
	column-gap: 2em;
	justify-content: space-around;
}

@media screen and (max-width: 767px) {
	section .info-wrapper {
		flex-wrap: wrap;
		row-gap: 1em;
	}
	
	section .info-wrapper:nth-child(even) > img {
		order: -1;
	}
}

@media screen and (max-width: 1264px) {
	section .info-wrapper {
		padding: 0 2em;
	}
}

section .info-wrapper:last-child {
	margin-bottom: 10vh;
}

section .info-wrapper img {
	display: block;
	margin: 0;
	max-width: 300px;
	max-height: 300px;
	border-radius: 0.25em;
}

section .info-content > div {
	height:100%;
	background-position-y:center;
	background-repeat:no-repeat;
	background-size:contain;
}

section ul {
	list-style: none;
	padding-left: 0;
}

section ul li {
	padding-left: 2em;
	background-image: url('../images/foglia.png');
	background-repeat: no-repeat;
	background-position: left 6px;
}

footer p {
	text-align: center;
	font-size: 1rem;
}

footer div.trees-wrapper{
	display: flex;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 0;
}

footer div.img-wrapper {
	flex: 1 1 auto;
	align-self: center;
	height: 10vh;
}

footer div img {
	display: block;
	height: 100%;
  	margin: 0 auto;
}