/*
auteur:kylian puerro
date:18.01.2024
description:feuille style pour le projet 293
*/

/*style pour ordinateur*/
/*page 1*/
body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(rgb(219, 166, 166), rgb(152, 152, 216));
  height: auto;
  width: auto;
  background-repeat: no-repeat;
  color: whitesmoke;
  margin-left: 1cm;
  margin-right: 1cm;
  font-size: 20pt;
}
/*style entête*/
header {
  margin-bottom: 1cm;
}
h1 {
  font-size: 50px;
  text-align: center;
  cursor: pointer;
}
/*style pied de page*/
footer {
  text-align: center;
  border: solid whitesmoke 3pt;
  border-radius: 1cm;
  padding: 1cm;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(700px);
  background-color: rgba(255, 255, 255, 0.059);
  height: auto;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-size: 20pt;
  font-weight: bolder;
}

/*style navigation*/

.lienNavigation {
  border: solid 4pt;
  border-radius: 1cm;
  padding: 8pt;
  cursor: pointer;
}
.lienNavigation:hover {
  background-color: rgb(209, 127, 141);
}

a {
  color: whitesmoke;
  text-decoration: none;
  font-size: 20pt;
}
nav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2cm;
}
/*style contenu principal*/

.p_section {
  border: solid whitesmoke 3pt;
  border-radius: 1cm;
  padding: 2%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(700px);
  background-color: rgba(255, 255, 255, 0.059);
  text-align: justify;
  height: max;
  width: 50%;
  margin: 0;
  margin-bottom: 1cm;
}

.p_center {
  border: solid whitesmoke 3pt;
  border-radius: 1cm;
  padding: 2%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(700px);
  background-color: rgba(255, 255, 255, 0.059);
  text-align: justify;
  height: max;
  width: 50%;
  margin-bottom: 4cm;
}

#p_slogant {
  margin-bottom: 10cm;
}

.section_1 {
  display: flex;
  margin-bottom: 2cm;
}
.section_2 {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 2cm;
}
.section_3 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 4cm;
  margin-top: 4cm;
}
#section_4 {
  display: flex;
  justify-content: center;
  margin-bottom: 1cm;
}
#section_5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4cm;
  margin-top: 4cm;
}
#logo_apple {
  width: 400px;
  height: max;
  margin-left: 15%;
  border-radius: 1cm;
}
#iphone_3 {
  width: 400px;
  height: max;
  margin-right: 15%;
  border-radius: 1cm;
}
#ecosysteme {
  width: 800px;
  height: 620px;
  border-radius: 1cm;
}

#logo_eu {
  width: 400px;
  height: max;
  margin-left: 15%;
  border-radius: 1cm;
}
#slogant {
  width: 100%;
  border-radius: 1cm;
}
/*style page 2*/
#images_fondateurs {
  text-align: center;
}
img {
  border-radius: 1cm;
}
.image_droite {
  display: flex;
}
#page_actuel {
  background-color: rgb(148, 70, 83);
}

#imac-ipod-itunes {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
}
#iphone3 {
  width: 800px;
}
#ipad2010 {
  margin-right: auto;
}
#airpods-appleWatch-appleMusic {
  display: flex;
  justify-content: space-around;
}
#ibm {
  width: 800px;
}
/*page 3 polemique*/
#usine_chinoise {
  margin-left: 8cm;
}
#confidentialite {
  margin-right: 8cm;
}
#app_store {
  margin-left: 8cm;
}
#android_ios {
  margin-right: 8cm;
  width: 20%;
}
#logo_recyclable {
  margin-left: 8cm;
  width: 20%;
}
/*page 4 innovation*/
#macintosh2 {
  width: 200px;
  margin-left: 8cm;
}
#ipods2 {
  width: 400px;
  margin-right: 8cm;
}
#app_store_2 {
  margin-left: 8cm;
}
#ipad2010_2 {
  margin-left: 8cm;
}
#face_ID {
  width: 600px;
}
#touch_ID {
  width: 600px;
  height: 300px;
}
#face_touch_id {
  display: flex;
  justify-content: space-between;
}
#apple_watch_2 {
  width: 600px;
  margin-left: 8cm;
}
#airpods_2 {
  width: 600px;
  height: 300px;
  margin-left: 8cm;
}
#M1 {
  width: 100%;
}
/* page son marche*/
.image_page_son_marche {
  width: 600px;
  height: 300px;
  margin-left: 8cm;
}
.image_son_marche_2 {
  width: 800px;
  height: 400px;
}
/*style pour mobile*/
@media screen and (max-width: 600px) {
  /*page 1*/
  body {
    margin-left: 5pt;
    margin-right: 5pt;
  }
  /*style pied de page*/
  #mailto {
    font-size: 10pt;
  }
  /*style navigation*/
  nav {
    flex-direction: column;
  }
  /*style contenu principal*/
  main {
    align-items: center;
  }
  .section_1 {
    flex-direction: column;
    align-items: center;
  }
  .p_section {
    width: auto;
    margin-bottom: 1cm;
    padding: 20pt;
  }
  #logo_apple {
    width: 100%;
    margin: 0;
  }
  .section_2 {
    flex-direction: column;
    align-items: center;
    margin-bottom: 1cm;
  }
  .section_3 {
    width: 100%;
    margin: 0;
    align-items: center;
    flex-direction: column;
  }
  #section_4 {
    flex-direction: column;
    align-items: center;
  }
  #iphone_3 {
    margin: 0;
    width: 100%;
  }
  .p_center {
    margin-inline: 41%;
    width: 85%;
    margin-bottom: 1cm;
    padding: 20pt;
  }
  #ecosysteme {
    width: 100%;
    height: auto;
    margin: 0;
    margin-left: 0;
  }

  #logo_eu {
    width: 100%;
    height: max;
    margin-left: 0%;
    border-radius: 1cm;
  }
  /*page 2 histoire*/
  #wayne{
    width: 100%;
    margin:0
  }
  #jobs{
    width: 100%;
    margin:0
  }
  #wozniak{
    width: 100%;
    margin:0
  }
  .image_droite{
    flex-direction: column;
  }
  #ibm{
    width: 100%;
  }
  #imac-ipod-itunes{
    flex-direction: column;
  }
  #imac1{
    width: 100%;
    margin-bottom: 1cm;
  }
  #ipod{
    width: 100%;
    margin-bottom: 1cm;
  }
  #itunes{
    width: 100%;
  }
  #ipad2010{
    width: 100%;
  }
  #airpods-appleWatch-appleMusic{
    flex-direction: column;
    align-items: center;
  }
  #airpods_pro{
    width: 80%;
    margin: 0;
  }
  #apple_watch_4{
    width: 80%;
  }
  #apple_music_red{
    width: 80%;
  }
  #iphone3{
    width: 100%;
  }
  /*page 3 polemique*/
  #usine_chinoise {
    width: 100%;
    margin: 0;
  }
  #confidentialite {
    width: 100%;
    margin: 0;
  }
  #app_store {
    width: 100%;
    margin: 0;
  }
  #stoncksman {
    width: 100%;
    margin: 0;
  }
  #android_ios {
    width: 100%;
    margin: 0;
  }
  #logo_recyclable {
    width: 100%;
    margin: 0;
  }
  /*page 4 innovation*/
  #macintosh2 {
    margin: 0;
    width: 100%;
  }
  #ipods2 {
    width: 100%;
    margin: 0;
  }
  #iphone_3_2 {
    width: 100%;
    margin: 0;
  }
  #app_store_2 {
    width: 100%;
    margin: 0;
  }
  #ipad2010_2 {
    width: 100%;
    margin: 0;
  }
  #touch_ID {
    width: 100%;
    margin: 0;
  }
  #face_ID {
    width: 100%;
    margin: 0;
  }
  #face_touch_id {
    flex-direction: column;
  }
  #apple_watch_2 {
    width: 100%;
    margin: 0;
  }
  #airpods_2 {
    width: 100%;
    margin: 0;
  }
  /*page 5 son marche*/
  .image_son_marche_2 {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .image_page_son_marche {
    width: 100%;
    height: auto;
    margin: 0;
  }
}