html {
  font-size: 62.5%;
  font-family: sans-serif;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%; }

/* VARIABLES */
:root {
  --darkPink: #ff87de;
  --brightPink: #ffd2f5;
  --blue: #212bd4;
  --darkBlue: #12263a;
  --brightBlue: #e1f0ff;
  --purple: #e3bdff; }

body {
  margin: 0;
  transition: all 0.7s ease;
  height: 100%;
  width: 100%;
  overflow-x: hidden; }

*,
*:before,
*:after {
  box-sizing: border-box; }

@font-face {
  font-family: 'Editorial New';
  src: url("./fonts/EditorialNew-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }
@font-face {
  font-family: 'Editorial New';
  src: url("./fonts/EditorialNew-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Adieu';
  src: url("./fonts/Adieu-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }
body,
button,
input,
select,
optgroup,
textarea {
  font-family: "Editorial New", serif;
  line-height: 1.3;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  letter-spacing: -0.015rem;
  color: var(--blue); }

a,
a:active,
a:visited {
  color: var(--blue);
  outline: 0;
  text-decoration: none;
  transition: all 0.3s; }

a:focus,
a:active {
  color: var(--darkBlue); }

@media screen and (min-width: 700px) {
  a:hover,
  a:focus {
    outline: 0;
    text-decoration: none;
    transition: all 0.3s; }

  a:hover {
    color: var(--darkBlue); } }
img {
  border-style: none;
  display: block;
  height: auto;
  max-width: 100%; }

.content-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 150; }
  .content-wrapper .portfolio {
    position: fixed;
    top: 6rem;
    right: 50%;
    transform: translateX(50%);
    background: var(--darkPink);
    padding: 1rem 1rem 0.7rem 1rem;
    border-bottom-right-radius: 2rem;
    border-top-right-radius: 2rem;
    font-style: italic;
    color: #fff; }
    .content-wrapper .portfolio:after {
      content: '';
      background: transparent url(./images/moon.svg) no-repeat center/1.8rem;
      width: 1.8rem;
      height: 1.8rem;
      display: inline-block;
      vertical-align: middle;
      margin-left: 1rem; }
  .content-wrapper p {
    width: 100%;
    font-size: 2rem;
    text-align: center;
    padding: 0 2rem;
    margin: 0;
    line-height: 1;
    position: fixed; }
    .content-wrapper p:first-of-type {
      top: 2rem; }
    .content-wrapper p:last-of-type {
      bottom: 2rem;
      text-align: right; }
  .content-wrapper .logo-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .content-wrapper .logo-wrapper .logo {
      padding: 2rem;
      width: 90vw; }
    .content-wrapper .logo-wrapper .socials {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center; }
      .content-wrapper .logo-wrapper .socials a {
        width: 4rem; }
        .content-wrapper .logo-wrapper .socials a svg {
          width: 4rem;
          height: 4rem; }
        .content-wrapper .logo-wrapper .socials a:last-of-type {
          width: 3.5rem; }
  .content-wrapper .contact {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background: var(--darkPink);
    padding: 1rem 1rem 0.7rem 1rem;
    border-bottom-right-radius: 2rem;
    border-top-right-radius: 2rem;
    font-style: italic;
    color: #fff; }
    .content-wrapper .contact:after {
      content: '';
      background: transparent url(./images/heart.svg) no-repeat center/1.8rem;
      width: 1.8rem;
      height: 1.8rem;
      display: inline-block;
      vertical-align: middle;
      margin-left: 1rem; }

@media screen and (min-width: 700px) {
  .content-wrapper {
    /*.contact {
      position: absolute;
    }*/ }
    .content-wrapper p {
      font-size: 4rem; }
      .content-wrapper p:last-of-type {
        text-align: center; }
    .content-wrapper .portfolio {
      top: 2rem;
      right: 2rem;
      transform: translateX(0); }
    .content-wrapper .logo-wrapper .logo {
      width: 58vw; }
    .content-wrapper .logo-wrapper .socials a {
      width: 5rem; }
      .content-wrapper .logo-wrapper .socials a svg {
        width: 5rem;
        height: 5rem; }
      .content-wrapper .logo-wrapper .socials a:last-of-type {
        width: 4.5rem; } }
#wave-container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 80px 0 20px 0;
  background: #feebff;
  background: -moz-linear-gradient(10deg, #E1F0FF 25%, #FFD2F5 50%, #a2d6f2 75%);
  background: -webkit-linear-gradient(10deg, #E1F0FF 25%, #FFD2F5 50%, #a2d6f2 75%);
  background: linear-gradient(10deg, #E1F0FF 25%, #FFD2F5 50%, #a2d6f2 75%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffebfb', endColorstr='#FFD2F5',GradientType=1 ); }
  #wave-container .wave-canvas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    top: 0;
    height: 100%; }
  #wave-container #waves-bottom {
    z-index: 40; }
  #wave-container #waves-middle-bottom {
    z-index: 35; }
  #wave-container #waves-middle-top {
    z-index: 20; }
  #wave-container #waves-top {
    z-index: 10; }

/*# sourceMappingURL=styles.css.map */