body, html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background-color:#26394E ;
		}
		a{
			color:#222;
			text-decoration:none;
			font-weight:bold;
		}

		#menu {
			height: 100%;
			position: fixed;
			background-color: #FFFDDA;
			width: 200px;
			transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
			transform: translateX(-100%);
			left: 60px;
		}

		#menu.expanded {
			transform: translateX(0%);
			left: 0px;
		}

		.menu-inner {
			width: 100%;
			height: 100%;
			position: relative;
			font-size: 2vmin;
		}

		#blob {
			top: 0;
			z-index: -1;
			right: 60px;
			transform: translateX(100%);
			height: 100%;
			position: absolute;
		}

		#blob-path {
			height: 100%;
			fill:  #FFFDDA;
		}

		.hamburger {
			right: 20px;
			position: absolute;
			width: 20px;
			height: 20px;
			margin-top: -10px;	
		}

		.hamburger .line {
			width: 100%;
			height: 4px;
			background-color: #222;
			position: absolute;
		}

		.hamburger .line:nth-child(2) {
			top: 50%;
			margin-top: -2px;
		}

		.hamburger .line:nth-child(3) {
			bottom: 0;
		}

		h1 {
			position: fixed;
			right: 0;
			margin: 0;
		}

		ul {
			padding: 0;
			list-style: none;
			width: 80%;
			margin-left: 10%;
			position: absolute;
			top: 10px;
		}

		ul li {
			color: #222;
			font-family: sans-serif;
			padding: 20px 0;
		}

		h2 {
			z-index:1;
			position: absolute;
		  	left: 50%;
    			color: #fff;
			margin: 0;
			font-size: 16px;
      			font-family: sans-serif;
      			font-weight: 100;
		}

		p {
			position: relative;
  			top: 10%;
width:40%;
			align-items: center;
		  	left: 40%;
    			color: #fff;
			margin: 0;
			font-size: 16px;
      			font-family: sans-serif;
      			font-weight: 100;
		}

.title-word {
  animation: color-animation 5s linear infinite;
}

.title-word-1 {
  --color-1: #DF8453;
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;
}

.title-word-2 {
  --color-1: #DBAD4A;
  --color-2: #ACCFCB;
  --color-3: #17494D;
}

.title-word-3 {
  --color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;
}

.title-word-4 {
  --color-1: #3D8DAE;
  --color-2: #DF8453;
  --color-3: #E4A9A8;
}
.title-word-5 {
  --color-1: #DBAD4A;
  --color-2: #17494D;
  --color-3: #ACCFCB;
}
.title-word-6 {
  --color-1: #E4A9A8;
  --color-2: #DF8453;
  --color-3: #3D8DAE;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

/* Here are just some visual styles. ?? */

.container {
  display: grid;
  place-items: center;  
  text-align: center;
  //height: 100vh
}

.title {
  //font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.5vw;
  text-transform: uppercase;
}