@charset "UTF-8";
@font-face { font-family: justsans; src: url(../font/justSans.woff) format(truetype); }

* { transition: color .4s, background-color .4s; }
a { text-decoration: none; }
li { float: left; list-style-type: none; margin: 30px 10px 0; }
:is(body, header) { background: #FFF; }

#navbar { top: -90px; height: 90px; position: sticky; transition: top .2s, background-color .4s; z-index: 10; }
#navbar.scrolled { background-color: rgba(255, 255, 255, .4); backdrop-filter: blur(10px); }
.txtNavbar { color: #0A0A0A; font: 18px justsans; margin: 35px; }
.txtNavbar.scrolled { color: #0A0A0A; }

.toggleTheme { color: #FFF; position: absolute; top: 36%; right: 40px; cursor: pointer; width: 32px; height: 32px; }
.themeIcon { position: absolute; font-size: 24px; transition: opacity .5s, transform .5s; }

.languageToggle {
  top: 35.45%;
  z-index: 20;
  right: 110px;
  cursor: pointer;
  font-size: 24px;
  color: #0A0A0A;
  position: absolute;
  transition: color .4s;
}
.languageMenu {
  right: 0;
  top: 140%;
  opacity: 0;
  width: auto;
  overflow: hidden;
  position: absolute;
  background: #FFF;
  border-radius: 8px;
  visibility: hidden;
  min-width: max-content;
  transform: translateY(-10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: opacity .2s, visibility .2s, transform .2s;
}
.languageMenu button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font: 16px justsans;
  color: #0A0A0A;
  cursor: pointer;
  transition: background .2s;
}
.languageMenu button:hover { background: rgba(0, 0, 0, .05); }
.languageMenu.open { opacity: 1; visibility: visible; transform: translateY(0); }

h1 { color: #0A0A0A; font: normal 5em justsans; text-align: center; }
header p { color: #0A0A0A; font: 20px justsans; margin-top: -55px; text-align: center; }

main { background: #F4F4F4; padding-bottom: 80px; }
p { color: #62748E; font: 22px justsans; margin: 40px 160px; text-align: justify; line-height: 1.5; }
h2 { color: #0A0A0A; font: 40px justsans; text-align: center; }
h3 { color: #0A0A0A; font: 26px justsans; margin: 30px 0 -20px 30px; }

.boxes { display: flex; justify-content: center; gap: 90px; padding-top: 40px; }
.boxWrapper { background: #FFF; display: flex; flex-direction: column; width: 450px; border-radius: 30px; }
.boxWrapper p { margin: 20px 0 0; text-align: justify; padding: 30px; }
.box {
  height: 220px;
  overflow: hidden;
  position: relative;
  border-radius: 30px;
  display: inline-block;
  border: 1.8px solid transparent;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  background: linear-gradient(145deg, #d4d4d4, #FFF, #a8a8a8) border-box, transparent padding-box;
}
.box img { width: 100%; height: 100%; object-fit: cover; }

footer { background: #FFF; padding: 40px 20px 30px; box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, .015); }
footer p { color: #62748E; font-size: 16px; margin: 0 135px 0 0; }
.icon { color: #0A0A0A; font-size: 32px; padding: 10px; }

body.dark :is(.txtNavbar, .txtNavbar.scrolled, .languageToggle, .languageMenu button, h1, h2, h3, p, .icon) { color: #E5E5E5; }
body.dark :is(.languageMenu, .boxWrapper) { background: #171717; }
body.dark #navbar.scrolled { background: rgba(0, 0, 0, .4); }
body.dark .languageMenu button:hover { background: rgba(255, 255, 255, .1) }
body.dark, body.dark :is(header, footer) { background: #0A0A0A; }
body.dark main { background: #262626; }
body.dark footer p { color: #ABABAB; }

@media(max-width: 768px) {
    p { margin: 40px 40px; font-size: 18px; }
    h2 { margin: 40px 40px; font-size: 22px; }
}