/*****************************************
*  CSS Sito - v 7.3       				 *
*  Gennaio 2024 - Online dal 1995       *
*  NOTE: Questa versione usa 			 *
*  CSSflex, CSS3, Custom Properties e  	 *
*  nessuna chiamata esterna.			 *
*****************************************/

@font-face {
	font-family: 'Philosopher';
	src: url(font/Philosopher-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	src: url(font/Roboto-Thin.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto-regular';
	src: url(font/Roboto-Regular.ttf) format('truetype');
}


/* imposto custom properties e data-theme */
html {
--rosa:#ff7f58;
--azzurro:#23A6D5;
--verde:#0d5f78;
--verdescuro: #3ab99b;


--bg-color: linear-gradient(-45deg, var(--rosa), var(--azzurro), var(--verde));
--bg-color-mobile: linear-gradient(-45deg, var(--rosa), var(--azzurro), var(--verde));
--text-color: #f7f7f7;
--text-dark: #253841;
--link-color:#253841;

}

[data-theme="dark"] {
    --bg-color: #161625;
	--bg-color-mobile: #161625;
	--link-color:#ffff00;
}


/* ======== generali ===== */
html {margin:0; padding:0; scroll-behavior: smooth;}
body {margin:0; padding:0; font-size: 16px; color: var(--text-color); font-family: 'Roboto', arial, sans-serif; background-size:cover; background: var(--bg-color);
}

* {box-sizing: border-box;}

a, a:link {color:var(--text-color); text-decoration:underline;}
a:hover {color:var(--link-color); }

.float-left {float:left;}
.float-right {float:right;}

/* ======== tipografia ===== */
h1, h2, h3 {font-family: 'Philosopher', "trebuchet ms", serif;}
h1 {font-size:3em; line-height:1; margin:0; padding:0;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
p {line-height: 1.4; margin:1em 0;}
strong {font-family: 'Roboto-regular';}
ul.list {margin:0; padding:0.5em 1em;}
ul.list li {list-style: none; position:relative; margin-bottom:.5em; }
ul.list li:before {content: "▸"; position:absolute; top:0px; left:-15px; line-height:1; font-size:1em;}
ul.nolist {list-style-type:none; margin:0; padding:0.5em 1em;}
ul.nolist li {list-style-type:none;}

/* ======== grid ===== */
.container {margin:0px auto; padding:0 30px; max-width:1240px;}
	.contatti-switch .container {padding:15px 30px 10px; display:flex; flex-flow: row no-wrap; justify-content:space-between; align-items:center; }
.header{margin-top:60px;}
.bio {clear:both;}
.schede {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items: baseline; align-content: space-around;}
.competenze { margin:2em 0 4em;}
.footer {}
	.footer .container {padding:20px 30px;}

/* ======== style ===== */
.contatti-switch {color:var(--text-color);}

.header .dot {display:inline-block; width:10px; height:10px; position:relative; border-radius: 50%;  background:var(--rosa);}

h1.mobile {display:none;}

/* animazione */
.wrapper{box-sizing: content-box; height: 50px; padding: 0px; display: flex;}
.words{overflow: hidden;}
.words span{display: block; height: 100%; font-size:3em; line-height:1; padding-left: 10px; color:var(--rosa); font-family: 'Philosopher', "trebuchet ms", serif; animation: spin_words 6s infinite;}
@keyframes spin_words{
    10%{
        transform: translateY(-105%);
    }
    25%{
        transform: translateY(-100%);
    }
    35%{
        transform: translateY(-205%);
    }
    50%{
        transform: translateY(-200%);
    }
    60%{
        transform: translateY(-305%);
    }
    75%{
        transform: translateY(-300%);
    }
    85%{
        transform: translateY(-410%);
    }
    100%{
        transform: translateY(-400%);
    }
}

.bio .bio-block {margin:0;}
.bio .block-right {padding-left:10%;}
.bio p {font-size:1.5em; font-weight:100; margin-bottom:1.4em;}
.bio img {width:100%; max-width:200px;}
.bio img.big {width:100%; max-width:300px; margin:0 30px;}
.bio a {}

.schede {margin:3em auto;}
.scheda { width:350px; height:280px; border-top: 2em solid rgba(230, 230, 230, 0.7);
  box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4); position: relative; border-radius: 3px 3px 0 0; padding:15px; font-family: 'Roboto-regular'; position:relative; transition: all .3s ease; margin: 1em 5px;}
.scheda:before {display: block; position: absolute; content: ''; top: -1.25em; left: 1em; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #f44; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;}  
.scheda h2 {margin:.5em 0; padding:0;}  
.scheda .data {position:absolute; top:10px; right:10px; font-size:.9em; color:#f7f7f7; opacity:.7;}
.scheda img.avatar {position:absolute; top:15px; right:20px; width:80px; border-radius: 50%;}
.scheda img.logo-srl {margin:25px auto 0; text-align:center; display:block; max-height:45px;}
.scheda a:hover {opacity:0.7;}
.scheda ul li {position:relative; padding-left:20px; margin-bottom:16px; text-align:left;}
.scheda ul li img.ico-social {width:16px; height:16px; position:absolute; top:3px; left:0; background-position:top left;}
.scheda:hover {transform: translate(0, -20px) scale(1.1);}

/* le 3 schede */
.scheda.me {background: #FB8F67;}
.scheda.newmi {background: #253841;} /* 406373 */
.scheda.websushi {background: #8dc63f;}

/* competenze */
.competenze li {font-size:1.5em; color:#ddd;}
.competenze li span {display:inline-block; color:var(--text-dark); background:#ff0;  transform: skew(-6deg); padding-left:3px; padding-right:3px; font-family: 'Roboto-regular'; }

.footer p {font-size:1em; color: #ccc; font-weight:100;}
.footer a {color: #ddd;}
.footer a.top {opacity:.6;}
.footer a.top:hover {opacity:1;}

/* ======== pagina 404 ========== */
#error-page {background: var(--bg-color); min-height:100vh; display:flex; align-items: center;}
#error-page .container {}
#error-page h2 {color:#222; font-size:3em;}

.w404-story {display:flex; flex-flow: row wrap; justify-content:flex-center; align-items: flex-start;}
.w404-story .item {width:50%; padding:30px;}
.w404-story .item p {font-weight: 100; font-size:1.4em;}

blockquote {font-size:1.8em; margin: 0; padding:0; font-family: 'Philosopher', "trebuchet ms", sans-serif;}
blockquote:before {content: '"'; margin-left: -0.5em; font-size:1.5em; color:yellow;}
cite {display:block; font-size:.6em; font-style:italic; margin-top:.5em; text-align:right;}
cite:before {content: "∼ ";}

/* ========  Dark mode ========  */
div.toggle {display: inline-block;}
input[type=checkbox] {height: 0; width: 0; visibility: hidden;}
  label {cursor: pointer; text-indent: -9999px; width: 40px; height: 20px; background: #aaa; display: inline-block; border-radius: 100px; position: relative;}
  label:after {content: ""; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; background: #fff; border-radius: 20px; transition: 0.3s;}
  input:checked + label {background: var(--azzurro);}
  input:checked + label:after {left: calc(100%); transform: translateX(-100%);}
  label:active:after {width: 40px;}


/* ======== RESPONSIVE MEDIA QUERY =========================================== */

/* Small screens 576px */ 
@media screen and (max-width: 576px) { 
	body {font-size:14px; font-family: 'Roboto-regular', arial, sans-serif; background: var(--bg-color-mobile);}
	.container {margin:20px 0 20px;}
	h1, .words span {font-size:2em;}
	h1 {display:none}
	h1.mobile {display:block;}
	.header .dot {width:6px; height:6px; }
	strong {color:#ffd4c5;}
	.contatti-switch span.hide {display:none;}
	.contatti-switch strong {color:#fff;}
	.header .dot1, .header .dot2 {width:8px; height:8px; left:1px;} 
	.bio .block-right {padding-left:0%;}
	.bio p, .competenze li  {font-size:1.3em;}
	.bio img {width:50%; display:block;}
	.schede {justify-content: center; flex-flow: row wrap; padding:0}
	.scheda {height:auto; font-size:16px;}

	#error-page {display:block; padding-top:50px;}
	#error-page h2 {font-size:2em;}
	.w404-story {flex-flow: row wrap;}
	.w404-story .item {width:100%; padding:0 30px;}
} 

/* Medium screens 768px */
@media screen and (min-width: 577px) and (max-width: 768px) { 
	body {font-size:15px; }
	.container {margin:20px 10px 20px;}
	h1 {display:none}
	h1.mobile {display:block;}
	.bio p, .competenze li  {font-size:1.3em;}
	.bio img {max-width:180px;}
	.schede {justify-content: center; flex-flow: row wrap; padding:0}
	.scheda {min-width:145px; height:auto; margin:15px 0; font-size:.9em;}

	#error-page h2 {font-size:3em;}
	.w404-story {flex-flow: row wrap;}
	.w404-story .item {width:100%; padding:0 30px;}
} 

/* Medium screens 1000px */
@media screen and (max-width: 1000px){
	.scheda img.avatar {width:60px;}
}