body {
  font-family: sans-serif;
  text-align: center;
}

@layer properties;

.relative {
  position: relative;
}

.static {
  position: static;
}

.mx-auto {
  margin-inline: auto;
}

.flex {
  display: flex;
}

.inline {
  display: inline;
}

.h-screen {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.hero {
  background: url("/assets/japanese-waves-painting.jpg");
  background-size: cover;
}

.hero2 {
  background: url("/assets/anchors-away.svg");
  background-repeat: repeat;
  background-color: #508a95;
  overflow: hidden;
}

.title {
  color: #e0d3b8;
  font-size: 5rem;
}

.title2 {
  color: #0a2b38;
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 2px 2px 5px #00000080;
  border-bottom: 2px solid #006994;
  letter-spacing: .1rem;
}

.title-text {
  color: #e0e9e9;
  font-size: .5rem;
}

.logo {
  background: url("/assets/anchors-away.svg");
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
    }
  }
}