body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

h1 {
  color: maroon;
  margin-left: 40px;
  text-shadow: 2px 2px 5px red;
}
h2 {
  border:2px solid Tomato;
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  text-decoration: underline;
  box-shadow: 10px 10px black;
}

div.background > p {
  background-color: yellow;
  background-clip: content-box;
}

#para1 {
  font-family: verdana;
  color: darkgreen;
  text-align: center;
  font-size: 20px;
}
.center {
  text-align: center;
  color: red;
}
p.center {
  text-align: center;
}
* {
  color: blue;
}

.background {
  background-color: lightblue;
  background-size: 50px, 100%;
  background-image: url("Data/Portfolio/Penguin.png"), url("Data/background1.png");
  background-repeat: no-repeat, repeat-x;
  background-position: right bottom, right top;
  background-attachment: scroll;
  border-style: solid;
  border-width: medium;
}

.border {
  background-color: lightblue;
  border-style: dotted solid;
  border-width: 25px 10px 20px 35px;
  border-color: red green blue yellow;
  border-radius: 15px 50px 30px 5px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
  width: 300px;
  height: 500px;
}

div.box {
  width: 320px;
  padding: 15px;
  border: 5px solid gray;
  border-image: url('Data/Portfolio/Penguin.png') 50 round;
  margin: 50px;
	/* 320px (width) */
	/* + 20px (left + right padding) */
	/* + 10px (left + right border) */
	/* + 0px (left + right margin) */
	/* = 350px */
  outline-style: ridge;
  outline-color: red;
  outline-offset: 5px;
  outline-width: 10px;
	
}
p.box {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-transform: capitalize;
  text-indent: 50px;
  letter-spacing: 3px;
  line-height: 0.5;
  word-spacing: 10px;
  white-space: nowrap;
  text-shadow: 2px 2px 5px red;
}
img.middle {
  vertical-align: middle;
}

.font {
  font-family: Impact, Charcoal, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
  font-size:10vw
}
a.button:link {
  color: red;
  text-decoration: none;
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/* visited link */
a.button:visited {
  color: green;
  text-decoration: none;
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/* mouse over link */
a.button:hover {
  color: hotpink;
  text-decoration: underline;
}

/* selected link */
a.button:active {
  color: blue;
  text-decoration: underline;
}
ul.list {
  background: #3399ff;
  padding: 20px;
  list-style-type: square;
  /* list-style-image: url('Data/Portfolio/Penguin.png'); */
}

.tableau{
  border: 1px solid black;
  empty-cells: hide;
}

.invisible{
  display: none;
  visibility: hidden;
}

.img-container {
  box-sizing: border-box;
  float: left;
  width: 33.33%;
  padding: 5px;
} 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;

}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
p.hidden {
  display: none;
  background-color: yellow;
  padding: 20px;
}
p.hidden:first-child {
  color: red;
} 

div.hidden:hover p.hidden{
  display: block;
}

q:lang(no) {
  quotes: "~" "~";
}

.imagedropdown {
  position: relative;
  display: inline-block;
}

.imagedropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.imagedropdown:hover .imagedropdown-content {
  display: block;
}

.imagedesc {
  padding: 15px;
  text-align: center;
}

.invert {filter: invert(100%);}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

img[width] {
  border: 5px solid black;
}

[class*="image"] {
  border: 5px solid white;
}

input[type=text], select {
  padding: 12px 40px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-image: url('Data/Portfolio/Penguin.png');
  background-position: 10px 10px;
  background-size: 20px;
  background-repeat: no-repeat;
  width: 200px;
  transition: width 1.0s ease-in-out;
}

input[type=text]:focus {
  background-color: lightblue;
  width: 90%;
}

input[type=submit] {
  background-color: #4CAF50;
  border-radius: 10px;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

select {
  border-radius: 10px;
  background-color: lightred;
}

h1.count {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2.count::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h3.count::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}


.overflow {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  resize: horizontal;
}

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s, height 0.5s, transform 2s, background 2s;
  transition-timing-function: ease-in-out;
}

.transition:hover {
  width: 150px;
  height: 125px;
  background: blue;
  transform: rotate(180deg);
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

.animation {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: both;
}

.tooltip {
  position: relative;
  margin-left: 60px;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.container-photo {
  position: relative;
  width: 50%;
}

.image-photo {
  display: block;
  width: 100%;
  height: auto;
  border: none;
}

.overlay-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container-photo:hover .overlay-photo {
  opacity: 1;
}

.text-photo {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.contenu,
.contenu1,
.contenu2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
          }

.contenu div,
.contenu1 div,
.contenu2 div {
    height: 50%;
    width: 300px;
              }

.rouge {
    background: orangered;
       }

.vert {
    background: yellowgreen;
      }

.bleu {
    background: steelblue;
      }

/* Styles pour les boîtes flexibles*/
.contenu {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #c3c3c3;
    height: 100vh;
}

.contenu1 {
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid #c3c3c3;
}

.contenu2 {
    display: flex;
    flex-wrap: wrap-reverse;
    border: 1px solid #c3c3c3;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
    background-color: DodgerBlue;
    border: 5px solid #c3c3c3;
                }

.flex-container div {
    background-color: #f1f1f1;
    width: 100px;
/*    margin: 10px;*/
/*    text-align: center;*/
/*    line-height: 75px;*/
/*    font-size: 30px;*/
                      }