/* CSS Homepage Ortie_pnk  */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');



body {    /* le corps de la page */
  margin:0;
  font-family: Verdana; /* la police utilisée sur toute la page */
  background-color: #f35c49;    /* la couleur du fond (si l'image ne charge pas) */
  cursor: url(''));  /* un curseur personnalisé */
}

.subPage{
  margin: 0 auto; /* centre le bloc */
  background:  var(--bg);
  border : solid;
  border-color:  var(--border1);;
  border-width:2em;
  display: flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items: flex-start;
  padding:1em;
}

@media (min-width: 1124px) {
  .subPage{
    max-width:700px;    /* sa largeur */
    min-height:768px;
  }}

h1, h2, h3, h4 {
  font-family: "Heading";
}

h1 {
  color: var(--titre);; /* colore les titre h1 */
  font-size: 4em;
  text-align:center;
  margin:0;
  margin-bottom:-20px;
}

h6 {
  margin:0;
  margin-left:20px;
  margin-right:20px;
  padding:0;
}

.left {
  text-align:start;
}

.right {
  text-align:end;
}

p {
}

blockquote {
  border:solid;
  border-width:0.3em;
  border-color:var(--accent);
  padding:1em;
}
blockquote::before {
  content: "«";
  float:left;
  font-size:2em;
  font-weight:bold;
  margin-right:1em;
  margin-bottom:0;
  color:var(--accent);
}
blockquote::after {
  content: "»";
  float:right;
  font-size:2em;
  font-weight:bold;
  margin-top:0;
  margin-bottom:0;
  color:var(--accent);
}

.gif {
  max-width:400px;
  height:auto;
  margin:20px;
  margin-bottom:0;
}

.icon {
  max-width:50px;
  height:auto;
  float:right;
  margin:10px;

}

.row {
  display: flex;
  flex-direction:  row;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
  margin-bottom:2em;
}

@media (min-width: 1124px) {
  .row {
    width:1124px;
    position:relative;
    left: -200px;
  }
}

.portion {
  background:  var(--bg2);
  border : solid;
  border-color: var(--border2);
  border-width:1em;
  padding:1em;
}


@media (min-width: 1124px) {
  .portion {
    max-width:600px;
  }
}

.small {
  max-width:470px;
  height:auto;
  background:  var(--bg2);
  border : solid;
  border-color: var(--border2);
  border-width:0.5em;
  padding:1em;
  margin:20px;
}

.boxy {
  border:solid;
  border-width:0.5em;
  border-color:var(--accent);
}

header {
}

footer {
  margin-top:50px;
  display: flex;
  flex-wrap:  wrap;
  justify-content: center;
  align-items: center;
}


/*Navbar*/

@media (max-width:1024px){
  .nav {
    margin-left:4px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    font-family:  Caveat Brush;
  }
  }

  @media (min-width:1024px){
    .nav-left {
      position: absolute;
      top: 20%;
      right:80%;
      margin-left:4px;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      font-family:  Caveat Brush;
    }
    }

    @media (min-width:1024px){
      .nav-essai {
        position: absolute;
        top: 90%;
        right:80%;
        margin-left:4px;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        font-family:  Caveat Brush;
        background: var(--bg);
        border: solid;
        border-color: var(--border1);
        border-width:0.5em;
      }
    }


  .button {
    background-color: var(--bg);
    border: solid;
    border-color: var(--border1);
    color: black;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    margin:7px
  }

  .button:hover {
    border-color: var(--accent);
  }

  .button:active {
    background-color: var(--accent);
    color: white;
  }

  .navtitle {
    margin:0.5em;
    max-width:200px;
    font-size:1.5em;
  }

  /*NAVBAR*/
  #navbar {

  }



  /* take away margins from the edges of the screen */
  html, body {
    margin: 0;
  }