:root {
  /* FONTS */
  --font-p-size: 26px;
  --font-p-lineHeight: 46px;

  /* PADDING */
  --padding-standard: 32px;
  --padding-marquee: 90px;

  /* LIGHT THEME COLORS*/
  --color-fonts-lightTheme: #000000;
  --color-background-lightTheme: #000000;
  --color-surface-lightTheme: #ffffff;
  --color-surface2-lightTheme: #e9755e;
  --color-surface3-lightTheme: #a9c6f0;
  --color-surface4-lightTheme: #f1b777;

  /* DARK THEME COLORS */
  --color-fonts-darkTheme: #ffffff;
  --color-background-darkTheme: #000000;
  --color-surface-darkTheme: #131516;
  --color-surface2-darkTheme: #e9755e;
  --color-surface3-darkTheme: #245173;
  --color-surface4-darkTheme: #332940;
}

/* GLOBAL */

.lightTheme a, .lightTheme button {
  outline-color: var(--color-fonts-lightTheme);
}

.darkTheme a, .darkTheme button{
  outline-color: var(--color-fonts-darkTheme);
}

.lightTheme p > a {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface-lightTheme);
  color: var(--color-fonts-lightTheme);
  text-decoration: none;
  transition: all 0.5s linear;
}

.darkTheme p > a {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface-darkTheme);
  color: var(--color-fonts-darkTheme);
  text-decoration: none;
  transition: all 0.5s linear;
}

body.lightTheme {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-lightTheme);
  font-family: "turkey-regular";
  font-size: var(--font-p-size);
  margin: 0;
  opacity: 1;
  transition: all 0.5s linear;
}

body.darkTheme {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-darkTheme);
  font-family: "turkey-regular";
  font-size: var(--font-p-size);
  margin: 0;
  opacity: 1;
  transition: all 0.5s linear;
}

body.fade {
  opacity: 0;
}

p {
  line-height: var(--font-p-lineHeight);
  margin: 0;
}

h1 {
  font-size: 48px;
  font-weight: 300;
  margin: 0;
}

h2 {
  margin: 0;
}

.lightTheme .containerMiddle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-lightTheme);
  padding: 16px 32px;
  transition: all 0.5s linear;
}

.darkTheme .containerMiddle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-darkTheme);
  padding: 16px 32px;
  transition: all 0.5s linear;
}

.lightTheme .containerTop {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-lightTheme);
  padding: 32px 32px 16px 32px;
  transition: all 0.5s linear;
}

.darkTheme .containerTop {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-darkTheme);
  padding: 32px 32px 16px 32px;
  transition: all 0.5s linear;
}

.lightTheme .containerBottom {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-lightTheme);
  padding: 16px 32px 32px 32px;
  transition: all 0.5s linear;
}

.darkTheme .containerBottom {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-background-darkTheme);
  padding: 16px 32px 32px 32px;
  transition: all 0.5s linear;
}

.lightTheme .containerInner {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface-lightTheme);
  padding: var(--padding-standard);
  transition: all 0.5s linear;
}

.darkTheme .containerInner {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface-darkTheme);
  padding: var(--padding-standard);
  transition: all 0.5s linear;
}

/* TOP NAVIGATION */
#topNav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--padding-marquee);
}
@media (max-width: 768px) {
  #topNav {
    flex-direction: column;
  }
  #topNav p {
    text-align: center;
  }
}

.lightTheme #topNav .themeToggle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background-color: transparent;
  background-image: url("../img/darkTheme.svg");
  background-size: var(--padding-standard);
  border: none;
  cursor: pointer;
  height: var(--padding-standard);
  padding: 16px;
  display: block;
  transition: all 0.5s linear;
  width: var(--padding-standard);
}

.darkTheme #topNav .themeToggle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background-color: transparent;
  background-image: url("../img/lightTheme.svg");
  background-size: var(--padding-standard);
  border: none;
  cursor: pointer;
  height: var(--padding-standard);
  padding: 16px;
  display: block;
  transition: all 0.5s linear;
  width: var(--padding-standard);
}

.lightTheme #topNav img {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  max-width: 100px;
  transition: all 0.5s linear;
}

.darkTheme #topNav img {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  filter: invert(1);
  max-width: 100px;
  transition: all 0.5s linear;
}

@media (max-width: 768px) {
  #topNav img {
    padding: 32px 0;
  }
}

#topNav > ul {
  align-items: center;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lightTheme #topNav > ul > li > a {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-lightTheme);
  margin-left: var(--padding-standard);
  text-decoration: none;
  transition: all 0.5s linear;
}
.darkTheme #topNav > ul > li > a {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-darkTheme);
  margin-left: var(--padding-standard);
  text-decoration: none;
  transition: all 0.5s linear;
}
@media (max-width: 992px) {
  .lightTheme #topNav > ul > li > a {
    margin-left: 0;
    padding: 16px;
  }
  .darkTheme #topNav > ul > li > a {
    margin-left: 0;
    padding: 16px;
  }
}

/* HERO */

#hero .containerInner {
  padding: 0;
}

#hero .heroPhotoArea {
  display: flex;
  justify-content: center;
}

#hero img.imgKait {
  display: block;
  margin-right: var(--padding-standard);
  max-height: 262px;
  max-width: 400px;
  width: 100%;
}
@media (max-width: 768px) {
  #hero img.imgKait {
    margin-right: 0;
  }
}

/* ABOUT */

#about p {
  text-align: center;
}

/* EVENTS */

.lightTheme #events .containerInner {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface2-lightTheme);
  text-align: center;
  transition: all 0.5s linear;
}
.darkTheme #events .containerInner {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface2-darkTheme);
  text-align: center;
  transition: all 0.5s linear;
}

.lightTheme .eventsTitle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-lightTheme);
  text-align: center;
  transition: all 0.5s linear;
}
.darkTheme .eventsTitle {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-lightTheme);
  text-align: center;
  transition: all 0.5s linear;
}

#events .eventsLogos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

#events .eventsLogos > a {
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  width: 20%;
}
@media (max-width: 768px) {
  #events .eventsLogos > a {
    max-width: 100%;
    width: 29%;
  }
}

#events .eventsLogos img {
  max-height: 76px;
  max-width: 186px;
}
@media (max-width: 992px) {
  #events .eventsLogos img {
    max-width: 100%;
  }
}

/* BRAIN */

#brain .containerInner {
  display: flex;
  padding: 0;
}
@media (max-width: 992px) {
  #brain .containerInner {
    flex-direction: column;
  }
}

#brain .brainArea {
  box-sizing: border-box;
  width: 50%;
}
@media (max-width: 992px) {
  #brain .brainArea {
    width: 100%;
  }
}

.lightTheme #brain #leftBrain {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface3-lightTheme);
  background-image: url("../img/leftViolin.svg");
  background-position: right;
  background-repeat: no-repeat;
  padding: var(--padding-marquee);
  transition: all 0.5s linear;
}
.darkTheme #brain #leftBrain {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface3-darkTheme);
  background-image: url("../img/leftViolin.svg");
  background-position: right;
  background-repeat: no-repeat;
  padding: var(--padding-marquee);
  transition: all 0.5s linear;
}
@media (max-width: 992px) {
  .lightTheme #brain #leftBrain {
    padding: var(--padding-standard);
  }
  .darkTheme #brain #leftBrain {
    padding: var(--padding-standard);
  }
}

.lightTheme #brain #rightBrain {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface4-lightTheme);
  background-image: url("../img/rightViolin.svg");
  background-position: left;
  background-repeat: no-repeat;
  padding: var(--padding-marquee);
  text-align: right;
  transition: all 0.5s linear;
}
.darkTheme #brain #rightBrain {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  background: var(--color-surface4-darkTheme);
  background-image: url("../img/rightViolin.svg");
  background-position: left;
  background-repeat: no-repeat;
  padding: var(--padding-marquee);
  text-align: right;
  transition: all 0.5s linear;
}
@media (max-width: 992px) {
  .lightTheme #brain #rightBrain {
    padding: var(--padding-standard);
  }
  .darkTheme #brain #rightBrain {
    padding: var(--padding-standard);
  }
}
#brain .brainDescription {
  padding-top: var(--padding-standard);
}

/* FOOTER */

footer .containerInner {
  display: flex;
  justify-content: center;
}

footer ul {
  align-items: center;
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  max-width: 500px;
  padding: 0;
  width: 100%;
}

.lightTheme footer .fa {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-lightTheme);
  transition: all 0.5s linear;
}

.darkTheme footer .fa {
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  color: var(--color-fonts-darkTheme);
  transition: all 0.5s linear;
}