/*
Theme Name:   Jacqueline Naville
Theme URI:    https://xroque.com/
Description:  Thème pour le site web de Jacqueline Naville
Author:       Alexandre Roque
Author URI:   https://xroque.com/
Version:      1.0.0
*/

/* COULEURS

bleu foncé
#3970B3

vert foncé
#39A982

vert haben sie fragen
#1FCF92

vert contact
#53CF1F

vert bleu über mich
#18BFC5
*/
.clr-angebote{
  color: #39A982;
}
.clr-kontakt{
  color: #1FCF92;
}
.clr-info{
  color: #4BD6DB;
}

@font-face {
  font-family: 'Casper';
  src: url('assets/fonts/Casper-Regular.ttf') format('ttf'),
  url('assets/fonts/Casper-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Casper';
  src: url('assets/fonts/Casper-RegularItalic.ttf') format('ttf'),
  url('assets/fonts/Casper-RegularItalic.ttf') format('ttf');
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}

@font-face {
  font-family: 'Idealist Sans';
  src: url('assets/fonts/IdealistSans-Light.otf') format('otf'),
  url('assets/fonts/IdealistSans-Light.otf') format('otf');
  font-weight: lighter;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Idealist Sans';
  src: url('assets/fonts/IdealistSans-Regular.otf') format('otf'),
  url('assets/fonts/IdealistSans-Regular.otf') format('otf');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

body {
  font-family: 'Casper', sans-serif;
  font-size: 1.25rem;
  /* background-image: url('assets/images/jnaville-bg-max-414px-2.svg');
  background-size:cover; */
}
h2{
  margin-bottom: 1.5rem;
}
.navbar{
  font-size: 1.15rem;
  background-color: white;
  font-family: 'Idealist Sans', sans-serif;
}
.logo-div{
  left: 50%;
  top: 0.5rem;
}
.logo{
  color: #3970B3;
  font-size: 24px;
  line-height: 1.25em;
  text-align: center;
  left:-50%;
}
.navbar-dark .navbar-nav .nav-link {
  color: #3970B3;
}
.navbar-toggler{
  z-index: 10;
}
.collapse.navbar-collapse{
  justify-content: space-between;
  align-items: baseline;
}
.collapse.navbar-collapse .languages{
  margin-top: 1rem;
}
.lang-item {
  display: inline;
  color: #3970B3;
  margin-right: 0.5em;
}
.wp-block-group {
  display: flex;
  /* height: 100vh; */
  align-items: center;
}
.wp-block-group__inner-container{
  width: 100%;
}
#ueber-mich{
  display:block;
}
.navbar{
  /* z-index:2; */
  padding-bottom: 1.75rem;
}
.max-w-680{
  max-width: 680px;
  padding: 1rem;
  margin: auto;
}
.page-template{
  /* padding: 1rem;
  margin: auto;
  max-width: 680px; */
  /* z-index:1; */
  /* position:relative;
  top: 6rem; */
  padding-bottom: 5rem;
}
.wp-block-image img{
  height: auto;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  body {
    font-size: 18px;
  }
  .navbar-toggler{
    padding: 0.15rem 0.3rem;
  }
  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(57,112,179, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  .custom-toggler.navbar-toggler {
    border-color: rgb(57, 112, 179);
  }
  .navbar{
    background-color: white;
    justify-content: flex-end;
  }
  .navbar-collapse{
    margin-top: 1rem;
  }
  .navbar-collapse .navbar-nav{
    justify-content: center;
    align-items: center;
    font-size:  20px;
  }
  .navbar-mobile .navbar-nav li{
    padding-right: 0.5em;
  }
  #angebote{
    scroll-margin: -340px;
  }
  #ueber-mich{
    scroll-margin: -340px;
  }
  .languages{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .logo{
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width: 330px) {
  .navbar{
    padding-bottom: 2.5rem;
  }
  #top{
    margin-top: 2rem;
  }
  #angebote{
    margin-top: 10rem;
  }
  #ueber-mich{
    margin-bottom: 10rem;
  }
}

/* body {
background-image: url('assets/images/jnaville-bg-default.svg');
background-size: cover;
} */
#line-1,#line-2,#line-3,#line-4, #line-5{
  width: 100vw;
  height: 180px;
  background-size: cover;
}
#line-1{
  background-image: url('assets/images/mobile/line-1.svg');
}
#line-2{
  background-image: url('assets/images/mobile/line-2.svg');
}
#line-3{
  background-image: url('assets/images/mobile/line-3.svg');
}
#line-4{
  background-image: url('assets/images/mobile/line-4.svg');
}
#line-5{
  background-image: url('assets/images/mobile/line-5.svg');
}

@media only screen and (max-width: 344px) {
  /* body {
  background-image: url('assets/images/jnaville-bg-max-w-344.svg');
  } */
  .navbar-nav{
    margin-top: 2rem;
  }
  .page-template{
    padding-top: 3.5rem;
  }
}

@media only screen and (min-width: 414px) {
  /* body {
  background-image: url('assets/images/jnaville-bg-min-w-414.svg');
  } */
  #line-1,#line-2,#line-3,#line-4, #line-5{
    height: 280px;
  }
}

@media only screen and (min-width: 768px) {
  /* body {
  background-image: url('assets/images/jnaville-bg-min-w-768.svg');
  } */
  /* .wp-block-group {
  height: 90vh;
  } */
  #kontakt{
    scroll-margin: 300px;
  }
  #line-1,#line-2,#line-3,#line-4, #line-5{
    height: 440px;
  }
  #line-1{
    background-image: url('assets/images/line-1.svg');
  }
  #line-2{
    background-image: url('assets/images/line-2.svg');
  }
  #line-3{
    background-image: url('assets/images/line-3.svg');
  }
  #line-4{
    background-image: url('assets/images/line-4.svg');
  }
  #line-5{
    background-image: url('assets/images/line-5.svg');
  }
}
@media only screen and (min-width: 1440px) {
  #line-1{
    background-image: url('assets/images/large/line-1.svg');
  }
  #line-2{
    background-image: url('assets/images/large/line-2.svg');
  }
  #line-3{
    background-image: url('assets/images/large/line-3.svg');
  }
  #line-4{
    background-image: url('assets/images/large/line-4.svg');
  }
  #line-5{
    background-image: url('assets/images/large/line-5.svg');
  }
}