@navbarColor: lighten(black, 20%);
@navbarTextColor: lightgray;
@mainTextColor: black;
@teasingTextColor: antiquewhite;
@titleFont: "Montserrat";
@mainFont: "Raleway";
@fontSize: 1.2em;
@teasingFontSize: 1.4em;
@teasingTextAlign: center;
@teasingTextShadow: none;
@minHeight: 420px;
@imageOpacity: 1;
@themeColor1 : lightblue;
@themeColor2 : antiquewhite ;
@themeColor3 : lightgreen;
@themeTitleColor1 : darkblue;
@themeTitleColor2 : darkred;
@themeTitleColor3 : darkgreen;
@themeSubtitleColor1: darkblue;
@themeSubtitleColor2: darkred;
@themeSubtitleColor3: darkgreen;
@themeTextColor1: black;
@themeTextColor2: black;
@themeTextColor3: black;
@themeTitleAlign1: left;
@themeTitleAlign2: left;
@themeTitleAlign3: left;
@themeSubtitleAlign1: left;
@themeSubtitleAlign2: left;
@themeSubtitleAlign3: left;
@themeTextAlign1: justify;
@themeTextAlign2: justify;
@themeTextAlign3: justify;
@windowHeight: 1920;
@windowWidth: 1080;

body {
  background-color: @themeColor1;
}

main {
  font-family: @titleFont, Helvetica, Arial, sans-serif !important;
}

section {
  padding: 5px 125px 5px 125px;
}

h5 {
  color: @themeSubtitleColor1;
  font-size: @fontSize !important;
}

p, footer, cite, button, input, textarea, a, span, label {
  font-family: @mainFont, Arial, serif !important;
  color: @mainTextColor;
  font-size: @fontSize;
  text-align: justify;
  text-rendering: auto; // TODO ?
}

a {
  font-size: @fontSize * 0.8;
  &:hover {
    text-decoration: none !important;
  }
}

input, textarea {
  background-color: lighten(@navbarColor, 60%) !important;
}

header img {
  float: right;
  max-width:100px;
  max-height: 80px;
}

footer, .navbar {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

footer p, span.caret {
  color: @navbarTextColor !important;
}

footer, footer span {
  font-size: @fontSize * 0.8;
}

cite {
  font-size: @fontSize * 0.8;
}

form blockquote {
  padding: 0 !important;
  border: none !important;
}

.little_logo {
  min-height: 40px;
  max-height: 40px;
  min-width: 40px;
  max-width: 40px;
  margin-top: -10px !important;
  margin-left: -10px !important;
}

.avatar {
  max-width: 40px;
  max-height: 40px;
  border: 1px lightgrey solid;
  border-radius: 50%;
}

.big-avatar {
  max-width: 5em;
  max-height: 5em;
  border: 1px lightgrey solid;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: -15px;
  margin-top: 10px;
}

.left {
  float: left;
}

.right {
  text-align: right;
}

.pull-right {
  padding-top: 20px !important;
}

.vertical-align {
  display: inline-block;
  vertical-align: middle;
  float: none !important;
  width: 100% !important;
}

#myCarousel {
  height: (@windowHeight - 50) * 1px;
}

.large-image {
  margin: 0 auto;
  height: (@windowHeight - 50) * 1px !important;
  // max-width: @windowWidth * 1px !important;
}

.small-image {
  display: none;
}

.image {
  max-width: @minHeight * 0.9;
  min-width: @minHeight * 0.15;
  max-height: @minHeight * 0.9;
  min-height: @minHeight * 0.15;
  padding: 5px;
  border-radius: 10px;
  opacity: @imageOpacity;
}

.little-image {
  max-width: 100px;
  min-width: 50px;
  max-height: 100px;
  min-height: 50px;
  padding: 5px;
}

.smaller {
  font-size: @fontSize * 0.6 !important;
}

.teasing {
  text-align: @teasingTextAlign !important;
  font-size: @teasingFontSize !important;
  color: @teasingTextColor !important;
  text-shadow: @teasingTextShadow !important;
}

.theme .container {
  min-height: @minHeight;
  display: flex;
  align-items: center;
  display: -webkit-flex;
  -webkit-align-items: center;
  width: @windowWidth * 0.75px !important;
  // width: auto !important;
}

#contact .container {
  min-height: initial;
  display: block;
  width: @windowWidth * 0.75px !important;
}

.theme:nth-child(3n+1) {
  background-color: @themeColor1;
  h3 {
    color: @themeTitleColor1;
    text-align: @themeTitleAlign1;
  }
  h5 {
    color: @themeSubtitleColor1 !important;
    text-align: @themeSubtitleAlign1;
  }
  p {
    color: @themeTextColor1;
    text-align: @themeTextAlign1;
  }
  a {
    color: lighten(@themeSubtitleColor1, 10%);
  }
}

.theme:nth-child(3n+2) {
  background-color: @themeColor2;
  h3 {
    color: @themeTitleColor2;
    text-align: @themeTitleAlign2;
  }
  h5 {
    color: @themeSubtitleColor2 !important;
    text-align: @themeSubtitleAlign2;
  }
  p {
    color: @themeTextColor2;
    text-align: @themeTextAlign2;
  }
  a {
    color: lighten(@themeSubtitleColor2, 10%);
  }
}

.theme:nth-child(3n+3) {
  background-color: @themeColor3;
  h3 {
    color: @themeTitleColor3;
    text-align: @themeTitleAlign3;
  }
  h5 {
    color: @themeSubtitleColor3 !important;
    text-align: @themeSubtitleAlign3;
  }
  p {
    color: @themeTextColor3;
    text-align: @themeTextAlign3;
  }
  a {
    color: lighten(@themeSubtitleColor3, 10%);
  }
}

.theme:nth-of-type(2n+1) .image:nth-child(1) {
  display: none;
}

.theme:nth-of-type(2n+2) .image:nth-child(3) {
  display: none;
}

.navcolors {
  background-color: @navbarColor !important;
  color: @navbarTextColor !important;
  margin: 0 !important;
  border: 0 !important;
  font-size: @fontSize;
}

.navbar-brand, .navbar-text,.navbar-nav>li>a, .navcolors>li>a {
  color: @navbarTextColor !important;
  font-size: @fontSize * 0.8 !important;
  line-height: @fontSize !important;
}

.newlines {
  white-space: pre-line;
}

.divider {
  background-color: lighten(@navbarColor, 20%) !important;
}

.noCarousel {
  display: none;
}

@media all and (max-width:1440px) {
  .navbar-text {
    display: none;
  }
}

@media all and (max-width:1180px) {
  section {
    padding: 5px 20px 5px 20px;
  }

  .image {
    display: none !important;
  }

  .small-image {
    max-width: @minHeight / 3;
    min-width: @minHeight * 0.1;
    max-height: @minHeight / 3;
    min-height: @minHeight * 0.1;
    padding: 5px;
    border-radius: 10px;
    opacity: @imageOpacity;
    display: inline-block;
  }

  .vertical-align {
    display: flex;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    align-items: center;
  }

  //#myCarousel {
  //  height: ((@windowHeight * 2 / 3) - 50) * 1px;
  //}
  //
  //.large-image {
  //  margin: 0 auto;
  //  height: ((@windowHeight * 2 / 3) - 50) * 1px !important;
  //}

  .carousel-caption {
    font-size: @fontSize * 0.6;
    bottom: 0 !important;
    padding: 0px 20px !important;
  }

  .carousel-indicators {
    display : none !important;;
  }
}

@media all and (max-aspect-ratio: 1/1) and (max-width: 860px) {
  .noCarousel {
    display: flex;
    align-items: center;
  }

  .carousel-indicators, .carousel-control, .carousel-inner {
    display : none !important;;
  }

  p, footer, cite, button, input, textarea, a, span, label {
    font-size: @fontSize * .9;
  }

  h3, h5 {
    text-align: center !important;
  }

  section {
    padding: 5px 5px 5px 5px;
  }

  #myCarousel {
    height: (@windowHeight - 100) * 1px;
  }

  .large-image {
    margin: 0 auto;
    height: (@windowHeight - 100) * 1px !important;
  }

  .container {
    padding: 0 !important;
  }
}