body {
    background-color: #f4f4f4;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.demo-footer {
    text-align: center;
	padding: 20px;
	background-color: #111;
	color: #ccc;
	font-size: 0.9rem;
}

.demo-footer a:first-child {
    margin: 0 auto 0 0;
}
.validation {
	color: #1abc9c;
	text-decoration: none;
}

.home {
	color: #1abc9c;
	text-decoration: none;
  }

.demo-footer a {
    line-height: 2;
    padding: 0 .5em;
    
}

html {
    box-sizing: border-box;
}

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

body {
    margin: 0;
}

main {
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}

.callout {
    font-family: sans-serif;
    background-color: #1abc9c;
    padding: 12px;
}

.callout-heading {
    color: white;
    font-size: 3em;
    text-transform: uppercase;
    margin: 0 0 32px;
}

.callout-intro {
    color: whitesmoke;
    font-size: 1.5em;
    margin: 0 0 16px;
}

.subscribe-newsletter {
    --color-white-20: hsla(0, 0%, 100%, 0.20);
    --color-white-40: hsla(0, 0%, 100%, 0.40);
    --color-white-60: hsla(0, 0%, 100%, 0.60);
    --color-white-80: hsla(0, 0%, 100%, 0.80);
    --color-white-90: hsla(0, 0%, 100%, 0.90);
    --color-white-100: hsla(0, 0%, 100%, 1.00);
    --color-black-20: hsla(0, 0%, 0%, 0.20);
    --color-black-40: hsla(0, 0%, 0%, 0.40);
    --color-black-60: hsla(0, 0%, 0%, 0.60);
    --color-black-80: hsla(0, 0%, 0%, 0.80);
    --color-button-dark: hsla(266, 47%, 30%, 1.00);
    --color-button-light: hsla(54, 86%, 58%, 1.00);
    --z-index: -1;
}

.subscribe-newsletter {
    transition: all 1s ease-in;
    background: var(--color-white-20);
    border-radius: .5em;
}

.subscribe-newsletter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.subscribe-newsletter fieldset {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
}

.subscribe-newsletter fieldset:first-child {
    flex: 1 1 auto;
}

.subscribe-newsletter fieldset:last-child::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("images/loader-circles-spin.svg") no-repeat center;
    z-index: var(--z-index, -1);
}

.subscribe-newsletter input:not([type="radio"]):not([type="checkbox"]) {
    
    border: none;
    border-radius: 0;
}

.subscribe-newsletter input {
    position: relative;
    font-family: inherit;
    font-size: 1.2em;
    line-height: 2.4;
    letter-spacing: 0.05em;
    padding: 0 .5em;
    margin: 0;
    color: var(--color-button-dark);
}

.subscribe-newsletter input[type=email] {
    background: var(--color-white-60);
}

.subscribe-newsletter input[type=email]:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-button-dark);
}

.subscribe-newsletter input::placeholder {
    position: relative;
    color: var(--color-button-dark);
    opacity: .4
}

.subscribe-newsletter input::placeholder {
    transition: 2s cubic-bezier(1, 1.65, 0.35, 1.32), opacity .25s ease;
}

.subscribe-newsletter input:focus::placeholder {
    transform: translateX(100%);
    transition: transform 1s cubic-bezier(0.15, 0.69, 0.7, -0.42), opacity 2s ease;
    opacity: 0
}

.subscribe-newsletter input[type=submit],
.subscribe-newsletter input[type=submit]:invalid {
    background: var(--color-button-dark);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 1em;
    transition: all 1s .5s ease-in;
    transform-origin: right center;
    transform: scale(1);
    box-shadow: 0 0 0px 0px var(--color-black-60);
}

.subscribe-newsletter:valid input[type=submit] {
    color: var(--color-button-dark);
    background: var(--color-button-light);
    transform: scale(1);
    box-shadow: -2px 2px 4px var(--color-black-60), -2px -2px 4px var(--color-black-60);
}

.subscribe-newsletter fieldset input[type=submit]:disabled {
    background: var(--color-white-80);
    color: black;
    transform: scale(1);
    box-shadow: 0 0 0px 0px var(--color-black-60);
}

.subscribe-newsletter label {
    color: var(--color-white-100);
    line-height: 1.625em;
    padding: 0 .5em;
}

.subscribe-newsletter.sending {
    background: var(--color-white-60);
}

.subscribe-newsletter.received {
    background: var(--color-white-20);
}

.subscribe-newsletter .subscribe-newsletter-message-error {
    background: var(--color-button-dark);
}

.subscribe-newsletter .subscribe-newsletter-message-success {
    background: var(--color-white-80);
    color: var(--color-button-dark);
    font-size: 1.6em;
    flex: 1;
    text-align: center;
}

@media (min-width: 1001px) {
    .callout {
        padding: 80px;
    }
    .subscribe-newsletter {
        flex-direction: row;
        height: 8em;
        align-items: center;
    }
    .subscribe-newsletter:valid input[type=submit] {
        transform: scale(1.2);
    }
    
    .container {
        
        text-align: center;
      }
    
      .nav-links {
        margin-top: 1rem;
      }
    
      .nav-links a {
        
        margin: 0.5rem 0;
      }
    
      
    }

    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
    
    
    
    /* Navbar */
  nav {
	background-color: #222;
	color: #fff;
	padding: 1rem 0;
  }
  
  .logo {
	font-size: 1.5rem;
	font-weight: 600;
  }
  
  .nav-links a {
	margin-left: 2rem;
	color: #fff;
	text-decoration: none;
	transition: color 0.3s;
  }
  
  .nav-links a:hover {
	color: #1abc9c;
  }

 /* Container */
 .container {
	width: 90%;
	max-width: 1200px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }