@import "fonts/stylesheet.css";

/* CONTAINERS */
body {
  margin: 0; padding: 0; /* Browsers have default 8px margins _or_ padding! */
  font-size: 100%; /* See: http://www.informationarchitects.jp/en/100e2r/ */
  line-height: 1.5; /* Default value, `normal`, depends on the font */
}
/* HTML5 blocks - needed in older browsers */
article, aside, figcaption, figure, footer, header, nav, section {
  display: block;
}

/* PARAGRAPHS */
h1, h2, h3, h4 {
  margin: 1em 0 .5em; /* Titles should be close to the text they describe */
  line-height: 1.25; /* Bigger text is often nicer with smaller line height */
  font-weight: bold; /* Browser default. Use `normal` for less bulky titles */
}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}
ul, ol {
  margin: 1em 0; /* Default for all browsers except IE */
  padding-left: 40px; /* IE has a 40px margin-left instead */
}
p {
  margin: 1em 0;
}
blockquote {
  margin: 1em 40px; /* Same for all browsers - Customize or remove */
}
figure {
  margin: 1em 0; /* Default in HTML5 spec: `1em 40px` */
}

/* LINKS */
/* Default browser styles (from Firefox, similar in most browsers) */
a {
  text-decoration: underline;
}
a:link {color: #0000EE;}
a:visited {color: #551A8B;}
a:active {color: #EE0000;}
/* Add your own styles for hover _and_ focus styles */
a:hover, a:focus {
  /* ... */
}
/* Remove dotted outline clicked links - Keeps outline on focus */
a:active, a:hover {
  outline: none;
}
/* No border around images in links */
a img {
  border: none;
}

/* MISC TEXT-LEVEL ELEMENTS */
/* Make quotations and references more visible */
q, cite {
  font-style: italic;
}
/* Remove automatic quotation marks for inline quotations
   (`q {quotes:none}` not implemented in WebKit) */
q:before, q:after {
  content: "";
}
/* Stopping superscript and subscript from adding to the line's leading */
sup, sub {
  line-height: 0;
}

/* FORMS */
fieldset {
  margin: 0; /* Common default is `0 2px` */
  padding: 0; /* Common default (roughly): `.35em .625em .75em` */
  border: none;
}
input, button, select {
  vertical-align: middle; /* Helps keep form elements roughly aligned */
}

/* TABLES */
table {
  border-collapse: collapse; /* Merges cell borders together */
  /* Browser default: border-collapse: separate; border-spacing: 2px; */
}
td, th {
  padding: 1px; /* Same as browser default - set to "0" to remove padding */
  vertical-align: top; /* Default is "middle" */
  text-align: left; /* Default for TH elements is "center" */
}
td:first-child, th:first-child {
  empty-cells: hide; /* Hide empty cells when they're the first in the row */
}




/* Normalize.css */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/* End Normalize.css */

body{
  font-family: 'anka', cursive;
  font-size: 16px;
  background: #000; 
  color: #FFF;
  margin:0;
  padding: 0;
  overflow-x: hidden;
}

header{
  width: 100%;
  top: 0;
  padding: 10px 30px;
}

header h1{
  font-size: 2em;
  color: #D423D1;
  font-weight:normal;
  margin-bottom:0;
  text-transform:uppercase;
}

header p{
  font-size: 2em;
  color: #3FCDFF;
   margin-top:0;
}

header span{
  color: #9918FF;
}

span.par{
  color: #FFF;
}

main p span.par{
  font-size:2em;
}

li{
  list-style: none;
}

main{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  margin-bottom: 200px;
  padding-left: 40px;
  padding-right: 30px;
}

.col{
  width: 24%;
}

h3{
  font-size: 2em;
  color: #9918FF;
  font-weight:normal;
  margin-left:-20px;
}

h2{
  font-size: 2em;
  color: #0DFF00;
  margin-left: -55px;
  font-weight:normal;
}

main li a:link{
  font-size: 1.8em;
  text-decoration: none;
  color: #3FCDFF;
}

.groupe{
  color:#9918FF;
  font-size: 0.8em;
}

main li a:active, main li a:visited, main li a:focus {
  color: #9918FF;
}
main li a:hover{
  color: #D423D1;
}

ol{
  margin-top:0;
}

pre{
  color: grey; 
  margin-top:0;
  line-height:1.2;
}

.credits{
  color: grey;
  width: 90%;
  margin:auto;
  margin-top: 30px;
}



@media (min-width:320px) and (max-width:768px) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
  .col{
    width: 100%;
  }
}

@media (min-width:768px) and (max-width:1024px) { 
/* tablet, landscape iPad, lo-res laptops ands desktops */ 
  .col{
    width: 49%;
  }
}

@media print{
  @page{
    size: A3;
  }
  body{
    background: #FFF;
    font-size: 12px;
  }

  header{
    // page-break-after: always;
  }

  h1, h2, h3, span, li, a, p, pre{
    color: #000 !important;
  }

  ol{
    page-break-avoid: always;
  }

  .col{
    padding-top: 1cm;

    width: 14cm;
  }
}