:root {
  --content-width: 100vw;
  overflow-x: hidden;
}

*,
*:after,
*:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
}


li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}


.page > * {
  max-width: var(--content-width);
  margin: 0 auto;
}

.header {
  margin-bottom: 0.5rem;
  width:100vw;
  position: fixed;
  top:0;
  z-index: 2;
}

.header a {
  position: relative;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .05em;
  padding: .5rem 0;
  font-weight: 500;
}

.navbar {
  display: flex;
  color: #000;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  transition: background-color 1s ease-out;
  min-height:5rem;
  padding-right:3rem;

}

nav.scroll {
  background-color: #000;
  color: #eef;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: background-color 1s ease;
  min-height:5rem;
  padding-right:3rem;
}


#navbar .logo {
  display: block;
  padding: .5rem 0;
  padding-left: 3rem;
}


.boutons a {
  margin: 1rem;
}

.boutons a:hover {
  border-bottom: 2px solid #000;
}

.navbar a[aria-current] {
  border-bottom: 2px solid #000;
}

@media screen and (max-width: 70rem) {
/* start of phone styles */

  .header {
    z-index:0;
  }

  #navbar .logo {
    display: block;
    padding: .5rem 0;
    padding-left: 0.5rem;
  }

  .boutons a {
    padding-left: 0.5rem;
    margin: 0 auto;
  }

  .navbar {
    display: flex;
    flex-wrap: wrap;
    padding-right:1rem;
    flex-direction: column;
  }

  nav.scroll {
    background-color: transparent;
    color: transparent;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-right:1rem;
    z-index:0;

    }

  #boutons {
    display:flex;
    flex-direction: column;
  }

  .boutons a:hover {
    border-bottom: none;
    color:#ddd;
  }

  .navbar a[aria-current] {
    border-bottom: none;
    color:#ddd;
  }

}


main {
  min-height: calc(100vh - 10rem);
  padding-top:0rem;
}

#home-img {
  height: calc(100vh - 0rem);
}

.intro-img { 
  margin-top: 20vh;
}

.intro-img h1 {
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: calc(1vw + 2rem);
  z-index: 1;
}

.home-bio {
  width:100vw;
  display:inline-flex;
  justify-content: center;
  min-height:40vh;

}

@media screen and (max-width: 70rem) {
/* start of phone styles */
  .home-bio {
    z-index: 1;
    text-align:center;
    padding:0 0rem 0 0em;
    margin-bottom:3rem;

  }
}

#content {
  width:50vw;
  margin:1rem 1rem 2rem 1rem;
  padding:2rem;
}

#content a{
  text-decoration: underline;
}

#content a:hover{
  color:#BBB;
  text-decoration: underline;
}

@media screen and (max-width: 70rem) {
/* start of phone styles */
  #content {
    display:block;
    width:80vw;
    margin:1rem 1rem 2rem 1rem;
    padding:1rem;
    
  }
}


.home-grid {
  z-index: 0;
  text-align:center;
  padding:0 10rem 0 10rem;
  margin-bottom:10rem;
}

@media screen and (max-width: 70rem) {
/* start of phone styles */
  .home-grid {
    z-index: 1;
    text-align:center;
    padding:0 0rem 0 0em;
    margin-bottom:3rem;

  }
}


.text {
  line-height: 1.2rem;
  font-size: .875rem;
}
.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em;
}
.text h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.text > *:first-child {
  margin-top: 0;
}
.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 400;
  z-index: 1;
  display: inline-block;
  border-bottom: 1px solid #000;
}

.text a:hover {
  color:#bbb;
  }
.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.text img {
  width: 100%;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: baseline;
  background-color: #000;
  color: #eef;
  margin-top:3rem;
  padding: 2rem 5vw 2vh;
  text-align: center;
  max-width: var(--content-width);
  line-height: 1.5em;
}
.footer a {
  display: inline-block;
  font-size: .875rem;
}
.footer > a {
  margin-bottom: 1.5rem;
  width: 16.5vw;
  padding-top: .5rem;
}


@media screen and (max-width: 70rem) {
/* start of phone styles */
  .footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  .footer .text{
    padding-bottom:1rem;
  }

}

.fa-twitter {
  font-size:2em;

}

.fa-instagram {
  font-size:2em;

}

.fa-bluesky {
  font-size:2em;

}

.fa-mastodon {
  font-size:2em;

}