* {
  user-select: none;
  transition: background-color .05s ease, color .05s ease;
}

p, span, header, a, b, h1, h2, h3, h4, h5, h6 {
  user-select: text;
}

*::selection {
  background-color: var(--tertiary-container);
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  margin: 0;
}

.view-1 {
  box-sizing: border-box;
  padding: 0 8%;
  padding-top: 9vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--surface);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}

h1.big {
  font-weight: 600;
  font-size: 4.5em;
  font-family: "Outfit", sans-serif;
  line-height: 1.1em;
}

.country {
  color: var(--primary);
  margin-bottom: 4%;
  display: block;
}

.container, .image-container {
  flex-basis: 0;
}

.container {
  margin: auto;
  margin-left: 0;
  margin-right: 0;
  flex-grow: 2.6;
}

.container hr {
  border: 1px solid var(--on-surface-variant);
  margin-left: 0;
}

.container > * {
  max-width: 85%;
}

.container img {
  width: 1.2em;
  filter: var(--social-filter);
  transition: transform .3s ease-in-out;
}

.container .links {
  height: 1.2em;
  display: flex;
  align-items: center;
  gap: .5em;
}

.container img:is(:hover, :active) {
  transform: scale(1.2);
  filter: none;
}

.container a {
  text-decoration: none;
}

.container img[alt="facebook"]:is(:hover, :active) {
  content: url('/assets/images/facebook_color.png');
}

.container img[alt="instagram"]:is(:hover, :active) {
  content: url('/assets/images/instagram_color.svg');
}

.container img[alt="youtube"]:is(:hover, :active) {
  content: url('/assets/images/youtube_color.png');
}

.container img[alt="mail"]:is(:hover, :active) {
  content: url('/assets/images/mail_color.svg');
}

.subheader {
  margin: 0;
  margin-top: 2%;
  font-size: 2.3em;
  font-family: "Dancing Script", cursive;
  font-weight: 300;
}

.subheader:lang(mm) {
  font-family: "YoeYar One", cursive, sans-serif;
  font-size: 1.5em;
}

.image-container {
  width: 20em;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0 1em 0;
  flex-grow: 1;
}

.big-image {
  object-fit: contain;
  max-width: 100%;
}

.brief {
  font-family: "Nunito", sans-serif;
  color: var(--on-surface-variant);
  font-size: 1em;
  margin-bottom: 3%;
}

.brief:lang(mm) {
  font-family: "Padauk Sgaw", sans-serif;
  font-size: 1.2em;
  word-spacing: -.1em;
}

.brief b {
  font-size: larger;
  font-family: "Nova Cut", cursive;
}

.brief b:lang(mm) {
  font-family: "Myanmar Head One", serif;
  font-size: x-large;
}

.transparent-space {
  height: 100vh;
  height: 100svh;
  max-height: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.transparent-space::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/background_su.png');
  background-position: center var(--parallax-position);
  background-size: 100% auto;
  z-index: -1;
}

.view-2 {
  display: flex;
  gap: 6%;
  box-sizing: border-box;
  padding: 3% 8%;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--surface);
}

.view-2 .text, .view-2 .images-wrapper {
  flex-basis: 0;
}

.view-2 .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1.3;
  box-sizing: border-box;
}

.view-2 .title {
  padding-top: 2%;
  font-family: "Outfit", serif;
  font-size: 3em;
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: .03em;
}

.view-2 .title:lang(mm) {
  font-family: "Myanmar Tagu", serif;
}

.view-2 .subtitle {
  font-family: "Nunito", sans-serif;
  font-size: 1.5em;
}

.view-2 .subtitle:lang(mm) {
  font-family: "Padauk Sgaw", sans-serif;
}

.view-2 .images-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}

.view-2 .images {
  box-sizing: border-box;
  padding-top: 10%;
  padding-bottom: 5%;
  display: grid;
  grid-template-areas:
    "portrait paris"
    "portrait stylish"
  ;
  grid-template-rows: 1fr;
  gap: 7%;
  min-height: 0;
  height: 100%;
}

.view-2 .images div {
  border-radius: 2vw;
  overflow: hidden;
  position: relative;
}

.view-2 .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

.view-2 .portrait {
  grid-area: portrait;
}

.view-2 .paris {
  grid-area: paris;
}

.view-2 .stylish {
  grid-area: stylish;
}

.view-2 .images * {
  transition: all .2s ease-in-out;
}

.view-2 .images div::after {
  content: '';
  font-family: 'Dancing Script', cursive, sans-serif;
  font-size: 1.3em;
  margin: 0 auto;
  width: 75%;
  min-height: 7vh;
  backdrop-filter: blur(2px) brightness(80%);
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  border-radius: 3.5vh;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: black 0 0 5px;
  transition: all .2s ease-in-out;
  box-shadow: 0 0 5px 1px black;
}

.view-2 .images div:is(:hover, :active)::after {
  opacity: 1;
}

.view-2 .images .portrait::after {
  content: 'Snowshoeing';
}

.view-2 .images .paris::after {
  content: 'Panthéon';
}

.view-2 .images .stylish::after {
  content: 'Stylish';
}

.view-2 .images div:is(:hover, :active) img {
  transform: scale(1.15);
}

.view-2 .to-gallery {
  height: 10%;
  display: flex;
  align-items: center;
}

.view-2 .to-gallery a {
  color: var(--on-surface);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 1.1em;
  font-family: 'Nunito', sans-serif;
  padding: 2% 5%;
  height: 100%;
  border: 2px solid var(--on-surface-variant);
  display: flex;
  gap: 5%;
  align-items: center;
  white-space: nowrap;
}

.view-2 .to-gallery a:lang(mm) {
  font-family: "Myanmar Text", sans-serif;
  letter-spacing: 0;
}

.view-2 .to-gallery a:is(:hover, :active) svg {
  transform: translateX(30%);
}

.view-2 .to-gallery a svg {
  width: 20%;
  height: 70%;
  box-sizing: border-box;
  transition: transform .3s ease;
}

.transparent-space > * {
  width: 100%;
}

.scrollable-indicator {
  position: sticky;
  bottom: 5%;
  left: 0;
  right: 0;
  width: 2em;
  height: 2em;
  margin: 2% auto;
  padding: .7%;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--on-surface);
  backdrop-filter: blur(1px);
}

.scrollable-indicator img {
  box-sizing: border-box;
  max-width: 100%;
  padding: 10%;
}

.view-3 {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  gap: 5vmax;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 8%;
  padding-bottom: 5%;
}

.latest-blog {  
  display: flex;
  flex-direction: column;
  max-width: 50%;
  flex-grow: 1;
  padding: 4%;
  background-color: var(--surface-container-lowest);
  border-radius: 20px;
  box-sizing: border-box;
}

.latest-blog img {
  border-radius: 10px;
  max-height: 40svh;
  object-fit: cover;
}

.latest-blog h5 {
  margin: 2% 0;
  font-family: "Outfit", sans-serif;
  font-size: .8em;
  letter-spacing: .1em;
  color: var(--on-surface-variant);
}

.latest-blog h5:lang(mm) {
  letter-spacing: 0;
  font-family: "YoeYar One", sans-serif;
}

.latest-blog h3 {
  margin-top: 0;
  margin-bottom: 4%;
  font-size: 2em;
  font-family: 'Outfit', sans-serif;
}

.latest-blog h3:lang(mm) {
  font-size: 1.8em;
  font-weight: 100;
  font-family: "Myanmar Tagu", sans-serif;
}

.latest-blog h4 {
  margin: 0;
  font-family: "Nunito", sans-serif;
  color: var(--on-surface-variant);
  margin-bottom: 4%;
}

.latest-blog h4:lang(mm) {
  font-family: "Padauk Sgaw", sans-serif;
}

.latest-blog a {
  padding: 3%;
  border: 2px var(--on-surface) solid;
  background: none;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--on-surface);
  text-decoration: none;
  text-align: center;
  font-size: 1em;
  transition: letter-spacing .5s ease-in-out;
}

.latest-blog a:lang(mm) {
  font-family: "Myanmar Text", sans-serif;
  letter-spacing: normal;
}

.latest-blog a:is(:hover, :active) {
  letter-spacing: .3em;
}

.latest-blog a:lang(mm):is(:hover, :active) {
  letter-spacing: .2em;
}

.newsletter .title {
  font-family: "Rowdies", cursive, sans-serif;
  font-size: 2.2em;
  margin-bottom: 0;
  text-align: center;
}

.newsletter .title:lang(mm) {
  font-family: "Myanmar Tagu", sans-serif;
}

.newsletter .description {
  font-family: "Nunito", sans-serif;
  font-size: 1em;
  margin-bottom: 8%;
  text-align: center;
  color: var(--on-surface-variant);
  font-style: italic;
}

.newsletter .description:lang(mm) {
  font-family: "Padauk Sgaw", sans-serif;
}

.newsletter label {
  font-size: 1em;
  font-family: "Nunito", sans-serif;
}

.newsletter label:lang(mm) {
  font-family: "Myanmar Text", sans-serif;
}

.required {
  color: var(--error);
}

.newsletter input {
  border-radius: 0;
  border: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2%;
  margin-bottom: 2%;
  padding: 4%;
  background-color: var(--surface-container-lowest);
}

.newsletter button {
  width: 100%;
  margin-top: 2%;
  box-sizing: border-box;
  padding: 3.5%;
  text-transform: uppercase;
  border: none;
  font-size: 1.5em;
  letter-spacing: .2em;
  font-family: 'Rowdies', sans-serif;
  cursor: pointer;
  background-color: var(--primary);
  font-weight: 900;
  color: var(--on-primary);
}

.newsletter button:lang(mm) {
  font-family: "Myanmar Tagu", sans-serif;
  letter-spacing: normal;
  font-weight: 500;
}