/*-----------------------*/
/* Fonts
/*-----------------------*/

@font-face {
  font-family: "Barokah";
  src: url("../fonts/barokahsignatureregular.woff2") format("woff2"),
    url("../fonts/barokahsignatureregular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Mangabey";
  src: url("../fonts/mangabeyregular.woff2") format("woff2"),
    url("../fonts/mangabeyregular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Miki";
  src: url("../fonts/KontrapunktMiki-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Miki";
  src: url("../fonts/KontrapunktMiki-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Miki";
  src: url("../fonts/KontrapunktMiki-ExtraBold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

/*-----------------------*/
/* CSS variables
/*-----------------------*/

:root {
  --color-white: #ffffff;
  --color-white-hover: #f5f5f5;
  --color-dark-gray: #4c4c4c;
  --color-light-gray: #dcdcdc;
  --color-theme: #fabc2a;
  --color-accent: #e63946;
  --color-accent-hover: #96131d;

  --height-menu: 40px;

  --margin-grid: 20px;
  --margin-expandable: 10px;

  --border-radius-inputs: 2px;
  --border-radius-button: 25px;
  --border-radius-card: 0px;

  --shadow-menu: 0px 5px 5px 5px rgba(0, 0, 0, 0.2);
  --shadow-card: 0px 5px 5px 2px rgba(0, 0, 0, 0.2);
  --shadow-expandable: 0px 5px 5px 2px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 768px) {
  :root {
    --margin-grid: 40px;
    --margin-expandable: 20px;
  }
}

/*-----------------------*/
/* Default item styling
/*-----------------------*/

html,
body {
  margin: 0;
  padding: 0;

  font-family: "Miki", sans-serif;
  font-weight: 400;

  color: var(--color-dark-gray);

  scroll-behavior: smooth;
}

html *,
body * {
  box-sizing: border-box;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  font-size: 40%;
}

body {
  font-size: 1rem;
}

@media screen and (min-width: 321px) {
  html {
    font-size: 55%;
  }
}

@media screen and (min-width: 481px) {
  html {
    font-size: 70%;
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 85%;
  }
}

@media screen and (min-width: 1025px) {
  html {
    font-size: 100%;
  }
}

h1,
h2,
h3,
h4 {
  font-family: "Barokah", cursive;
  font-weight: normal;

  line-height: 150%;

  margin: 0;
  padding: 0;

  text-align: center;
  text-decoration: none;

  color: var(--h-color);
  background-color: transparent;
}

h1 {
  font-size: 3rem;

  margin-top: 3rem;
  margin-bottom: 6rem;
}

h2 {
  font-size: 2.5rem;

  margin-top: 2.5rem;
  margin-bottom: 5rem;
}

h3 {
  font-size: 2rem;

  margin-top: 2rem;
  margin-bottom: 4rem;
}

p,
label {
  font-weight: normal;

  text-align: justify;
  text-decoration: none;
}

p {
  font-size: 2rem;
}

label {
  font-size: 1.4rem;
}

p.italic {
  font-style: italic;
}

a {
  text-align: center;
  text-decoration: none;

  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

input[type="text"],
textarea {
  font-size: 1.2rem;
  font-weight: normal;

  outline: none;
}

input[type="text"] {
  width: 100%;

  border: none;
  border-radius: 0;
}

textarea {
  width: 100%;
  height: 16rem;

  border: 1px solid var(--color-dark-gray);
  border-radius: var(--border-radius-inputs);

  resize: none;
}

/*-----------------------*/
/* Utils
/*-----------------------*/

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

.no-scroll {
  overflow: hidden;
}

/*-----------------------*/
/* Text color
/*-----------------------*/

.text-white {
  color: var(--color-white);
}

.text-dark {
  color: var(--color-dark-gray);
}

.text-theme {
  color: var(--color-theme);
}

.text-accent {
  color: var(--color-accent);
}

/*-----------------------*/
/* Background color
/*-----------------------*/

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

.dark {
  background-color: var(--color-dark-gray);
}

.gray {
  background-color: var(--color-light-gray);
}

.theme {
  background-color: var(--color-theme);
}

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

/*-----------------------*/
/* Input
/*-----------------------*/

.input {
  display: flex;

  align-items: center;
  align-content: center;

  justify-content: center;

  width: 100%;

  margin: 0;
  padding: 0px 0px 0px 5px;

  border: 1px solid var(--color-dark-gray);
  border-radius: var(--border-radius-inputs);
}

.input > .i-glyph {
  width: 1.6rem;
  height: auto;

  font-size: 1.2rem;

  color: var(--color-accent);
}

.input > .i-input {
  margin: 0;
  padding: 5px 0px 5px 5px;
}

/*-----------------------*/
/* Button
/*-----------------------*/

.button {
  width: auto;
  height: auto;

  font-size: 1.2rem;
  font-weight: bold;

  color: var(--color-white);
  background-color: var(--color-accent);

  padding: 5px 10px;

  border: none;
  border-radius: var(--border-radius-button);
}

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

/*-----------------------*/
/* Sections
/*-----------------------*/

.section {
  width: 100%;
  height: auto;

  margin: 0;
  padding: 4rem 0 0 0;

  display: grid;

  grid-template-columns:
    [xs] var(--margin-grid) [xm1] 1fr [xm] 1fr [xm2] var(--margin-grid)
    [xe];
  grid-template-rows:
    [ys] var(--margin-grid) [ym1] auto [ym] auto [ym2] var(--margin-grid)
    [ye];
}

.section .s-bgnd {
  width: 100%;
  height: 100%;

  grid-row: ys / ye;
  grid-column: xs / xe;

  z-index: -1;
}

.section .s-img-s-full,
.section .s-img-s-top,
.section .s-img-s-top-left,
.section .s-img-s-top-right,
.section .s-img-s-bottom,
.section .s-img-s-bottom-left,
.section .s-img-s-bottom-right,
.section .s-img-s-left,
.section .s-img-s-right {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.section .s-img-s-full {
  grid-area: ys / xs / ye / xe;
}

.section .s-img-s-top {
  grid-area: ys / xs / ym / xe;
}

.section .s-img-s-top-left {
  grid-area: ys / xs / ym / xm;
}

.section .s-img-s-top-right {
  grid-area: ys / xm / ym / xe;
}

.section .s-img-s-bottom {
  grid-area: ym / xs / ye / xe;
}

.section .s-img-s-bottom-left {
  grid-area: ym / xs / ye / xm;
}

.section .s-img-s-bottom-right {
  grid-area: ym / xm / ye / xe;
}

.section .s-img-s-left {
  grid-area: ys / xs / ye / xm;
}

.section .s-img-s-right {
  grid-area: ys / xm / ye / xe;
}

.section .s-content-s-full,
.section .s-content-s-top,
.section .s-content-s-top-left,
.section .s-content-s-top-right,
.section .s-content-s-bottom,
.section .s-content-s-bottom-left,
.section .s-content-s-bottom-right,
.section .s-content-s-left,
.section .s-content-s-right {
  width: 100%;
  height: auto;

  place-self: center center;
}

.section .s-content-s-full {
  grid-area: ym1 / xm1 / ym2 / xm2;
}

.section .s-content-s-top {
  grid-area: ym1 / xm1 / ym / xm2;
}

.section .s-content-s-top-left {
  grid-area: ym1 / xm1 / ym / xm;
}

.section .s-content-s-top-right {
  grid-area: ym / xm / ym / xm2;
}

.section .s-content-s-bottom {
  grid-area: ym / xm1 / ym2 / xm2;
}

.section .s-content-s-bottom-left {
  grid-area: ym / xm1 / ym2 / xm;
}

.section .s-content-s-bottom-right {
  grid-area: ym / xm / ym2 / xm2;
}

.section .s-content-s-left {
  grid-area: ym1 / xm1 / ym2 / xm;
}

.section .s-content-s-right {
  grid-area: ym1 / xm / ym2 / xm2;
}

@media screen and (min-width: 768px) {
  .section .s-img-full,
  .section .s-img-top,
  .section .s-img-top-left,
  .section .s-img-top-right,
  .section .s-img-bottom,
  .section .s-img-bottom-left,
  .section .s-img-bottom-right,
  .section .s-img-left,
  .section .s-img-right {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }
  .section .s-img-full {
    grid-area: ys / xs / ye / xe;
  }
  .section .s-img-top {
    grid-area: ys / xs / ym / xe;
  }
  .section .s-img-top-left {
    grid-area: ys / xs / ym / xm;
  }
  .section .s-img-top-right {
    grid-area: ys / xm / ym / xe;
  }
  .section .s-img-bottom {
    grid-area: ym / xs / ye / xe;
  }
  .section .s-img-bottom-left {
    grid-area: ym / xs / ye / xm;
  }
  .section .s-img-bottom-right {
    grid-area: ym / xm / ye / xe;
  }
  .section .s-img-left {
    grid-area: ys / xs / ye / xm;
  }
  .section .s-img-right {
    grid-area: ys / xm / ye / xe;
  }

  .section .s-content-full,
  .section .s-content-top,
  .section .s-content-top-left,
  .section .s-content-top-right,
  .section .s-content-bottom,
  .section .s-content-bottom-left,
  .section .s-content-bottom-right,
  .section .s-content-left,
  .section .s-content-right {
    width: 100%;
    height: auto;

    place-self: center center;
  }
  .section .s-content-full {
    grid-area: ym1 / xm1 / ym2 / xm2;
  }
  .section .s-content-top {
    grid-area: ym1 / xm1 / ym / xm2;
  }
  .section .s-content-top-left {
    grid-area: ym1 / xm1 / ym / xm;
  }
  .section .s-content-top-right {
    grid-area: ym / xm / ym / xm2;
  }
  .section .s-content-bottom {
    grid-area: ym / xm1 / ym2 / xm2;
  }
  .section .s-content-bottom-left {
    grid-area: ym / xm1 / ym2 / xm;
  }
  .section .s-content-bottom-right {
    grid-area: ym / xm / ym2 / xm2;
  }
  .section .s-content-left {
    grid-area: ym1 / xm1 / ym2 / xm;
  }
  .section .s-content-right {
    grid-area: ym1 / xm / ym2 / xm2;
  }
}

/*-----------------------*/
/* Row
/*-----------------------*/

.row {
  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  display: flex;
  flex-flow: row wrap;

  align-items: flex-start;
  align-content: flex-start;

  justify-content: center;
}

/*-----------------------*/
/* Expandable
/*-----------------------*/

.expandable {
  position: relative;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  display: flex;
  flex-flow: column nowrap;

  align-items: center;
  align-content: center;

  justify-content: center;

  color: var(--color-white);
  background-color: var(--color-accent);

  box-shadow: var(--shadow-expandable);
}

.expandable:hover {
  background-color: var(--color-accent-hover);
}

.expandable:after {
  content: "\f067";

  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 900;

  position: absolute;

  top: 5px;
  right: 5px;
}

.expandable .e-popup {
  z-index: 6;

  position: fixed;

  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 10vh 5vw;

  top: 0;
  left: 0;

  display: none;

  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.5);
}

.expandable.active .e-popup {
  display: block;
}

.expandable .e-popup .content {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns: [xs] 1fr [xe];
  grid-template-rows: [ys] min-content [ym] 1fr [ye];

  overflow-y: auto;

  box-shadow: var(--shadow-expandable);
}

.expandable .e-popup .content .header {
  position: relative;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 10px;

  grid-area: ys / xs / ym / xe;
}

.expandable .e-popup .header .close {
  font-size: 2rem;
  font-weight: 900;

  position: absolute;

  color: var(--color-accent);

  top: 20px;
  right: 20px;
}

.expandable .e-popup .header .close:hover {
  color: var(--color-accent-hover);
}

.expandable .e-popup .content .body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 10px 20px 200px 20px;

  grid-area: ym / xs / ye / xe;
}

.expandable .e-popup .content .bgnd {
  width: 100%;
  height: 50%;

  grid-area: ys / xs / ye / xe;

  object-fit: cover;
  object-position: bottom;

  place-self: end end;
}

/*-----------------------*/
/* Card
/*-----------------------*/

.card {
  margin: 0;
  padding: 0;

  background-color: var(--color-white);

  display: grid;

  grid-template-columns:
    [xs] var(--margin-grid) [xm1] 1fr [xm2] var(--margin-grid)
    [xe];
  grid-template-rows:
    [ys] var(--margin-grid) [ym1] auto [ym2] var(--margin-grid)
    [ye];

  place-items: center;

  border: none;
  border-radius: var(--border-radius-card);

  box-shadow: var(--shadow-card);
}

.card .c-content {
  z-index: 1;

  width: 100%;
  height: auto;

  grid-area: ym1 / xm1 / ym2 / xm2;

  display: flex;
  flex-flow: column nowrap;

  align-items: center;
  align-content: center;

  justify-content: center;
}

.card .c-bgnd {
  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  grid-area: ys / xs / ye / xe;
}

/*-----------------------*/
/* Menu bar
/*-----------------------*/

.menu {
  position: fixed;

  height: auto;
  width: 100vw;

  margin: 0;
  padding: 10px 40px 10px 40px;

  background-color: var(--color-white);

  display: flex;
  flex-flow: row nowrap;

  align-items: center;
  align-content: center;

  justify-content: center;

  z-index: 2;

  box-shadow: var(--shadow-menu);
}

.menu .m-item {
  margin: 0 5px;
  padding: 0;

  font-size: 2rem;
  font-weight: normal;
}

/*-----------------------*/
/* Section specific styling
/*-----------------------*/

#home {
  min-height: 95vh;
}

#home #introduction {
  font-size: 2.5rem;
}

#home #violon {
  height: 33vmax;
  width: auto;

  place-self: end start;

  transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
  #home #violon {
    height: 33vmax;
    width: auto;

    place-self: start end;

    transform: rotate(0deg);
  }
}

#lessons .row {
  place-self: end center;
  justify-content: flex-start;

  margin: 0 0 calc(-1.5 * var(--margin-grid)) 0;
}

#lessons .expandable {
  width: 24vw;
  height: 24vw;

  margin: 0 10px 0 0;
}

#lessons .expandable .e-popup .body {
  clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 20px), 0% calc(100% - 200px));
}

#lessons .expandable > p {
  font-size: 1.2rem;
  font-weight: normal;
}

#lessons #violon {
  height: 20vmax;
  width: auto;

  place-self: end end;
}

@media screen and (min-width: 768px) {
  #lessons .expandable {
    width: 18vw;
    height: 18vw;
  }

  #lessons #violon {
    height: 25vmax;
    width: auto;
  }
}

#prices #content {
  padding-bottom: 40px;
}

#prices .card {
  width: 40vw;
  height: 40vw;

  margin: 0 0 calc((-2 * var(--margin-grid)) - 10px) 0;
}

#prices .card h3 {
  font-size: 1.5rem;
  font-weight: normal;

  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

#prices .card p {
  font-size: 1.4rem;
  font-weight: normal;

  margin: 2px 0;
}

@media screen and (min-width: 768px) {
  #prices .card {
    width: 25vw;
    height: 25vw;
  }
}

#contact #background {
  background-color: var(--color-theme);
  clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 50% 60%, 0% 40%);
}

#contact #card {
  width: 80%;
}

#contact label {
  margin: 2px 0;
}

#contact #card #form-send {
  align-self: center;

  margin: 10px 0 0 0;
}

@media screen and (min-width: 768px) {
  #contact {
    min-height: 95vh;
  }

  #contact p,
  #contact h1,
  #contact h2 {
    color: var(--color-white);
  }

  #contact #background {
    background-color: var(--color-theme);
    clip-path: polygon(0 80%, 100% 0, 100% 100%, 0% 100%);
  }
}