/*©PL Malhaprez - 2020*/
@charset "utf-8";

/*COULEURS*/
:root{ 
/*S=sombre, M=moyen, C=clair*/
--bleu:#141E32;
--bleuC:#009CCB;    
--jaune:#FFD503;   

}
/*************************global*************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight:300;
	font-size:100%; 
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}
ul, li {list-style-type:none;}

html{min-width:100vw; min-height:100vh;background: linear-gradient(#012338,#00192B);background-size: cover;}
#global{max-width:640px;width:95vw;height:auto; margin:10vh auto;}
span{color:var(--jaune); display:block;width:100%; text-align: center;font-weight:500;font-size:1.15rem;margin-bottom:5vh;}


/*************************section*************************/
section a:link{display:block; width:75%; min-height:3rem; margin:auto; border-radius:1rem; text-align: center; line-height:3rem; background:var(--jaune);color:var(--bleu); font-weight: 500;font-size:1rem;text-decoration: underline;transition:background .25s ease;}
section a:hover,section a:focus{text-decoration: none;background:var(--bleuC); transition:background .25s ease;}
section a:visited{text-decoration:underline;background:#5EB130; transition:background .25s ease;}



section ul{display:block;margin:2.5vh auto;}
section ul li{display:inline-block;width:20%;margin:6%;}
section ul li:nth-of-type(1){width:25%;}
section ul li:nth-of-type(3){opacity:.8;width:15%;}

/*************************footer*************************/
footer{display:block;color:var(--bleuC);font-size:.8rem; text-align: center;margin:15vh auto 0 auto;}
footer img{width:15%; display:block; margin:5vh auto;opacity:.5; filter: blur(0);}
footer img:hover{animation: bounce 0.35s ease infinite alternate; opacity:1;filter: blur(.05rem);}
footer a:link{color:var(--bleuC);}
footer a:hover{text-decoration: none;}
footer a:visited{color:aquamarine;}


@keyframes bounce{
     from {transform: translateY(0);}
     to   {transform: translateY(-.75rem);}
}

/*************************typo*************************/
/* roboto-regular - latin */
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), 
       url('fonts/roboto-v20-latin-regular.woff') format('woff'); }
/* roboto-italic - latin */
@font-face {font-family: 'Roboto';font-style: italic;font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('fonts/roboto-v20-latin-italic.woff2') format('woff2'), 
       url('fonts/roboto-v20-latin-italic.woff') format('woff'); }
/* roboto-500 - latin */
@font-face {font-family: 'Roboto';font-style: normal;font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('fonts/roboto-v20-latin-500.woff2') format('woff2'), 
       url('fonts/roboto-v20-latin-500.woff') format('woff'); }
/* roboto-500italic - latin */
@font-face {font-family: 'Roboto';font-style: italic;font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('fonts/roboto-v20-latin-500italic.woff2') format('woff2'), 
       url('fonts/roboto-v20-latin-500italic.woff') format('woff'); }

/*************************Medias*************************/