/* Define standard variables and values for website */
* 
  {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: helvetica, sans-serif;
  }

body
  {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  }

a 
  {
  color:#ffaaaa;
  font-weight:bold;
  }
.frame
  {
  width: auto;
  height: auto;

  position: static;
  
  display:flex;
  flex-flow: wrap column;

  justify-content: space-between;
  align-items: center;
  align-self: center;
  text-align: center;
  
  color:#fff;  
  /* background effect with animation setting */
  background-image: linear-gradient(33deg, #8bb5ab, #aa8b6f, #803a44);
  background-size: 3333%;
  
  animation: wv 33s infinite alternate;

  /* page snap scrolling effect */
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  
  }
  
  /* animation for the background effect */

@keyframes wv 
  {
    0% 
      {
      background-position: left;
      }
    100%
      {
      background-position: right;
      }
  }

.head
  {
  height:4rem;
  width:100vw;
  justify-content: space-between;

  top:0;
  margin:auto;
  padding:1rem;
  position:fixed;
  display:flex;
/*   background-color:#fff4; */
  }

.brand
  {
   width:9rem;
   display:flex;
   
  }

.title
  {
  text-align: left;
  margin:auto;
  height:auto;
  width:4rem;
  display: none;
  }

.logo
  {
/*   background-color: #fff9;     */
  height:2rem;
  width:100%;
  background-size: 4rem;
  background: url(./img/amour.svg) no-repeat top left;
  background-size: contain;
  }
/* instagram icon */
.icon, .circle
  {
   border:0.2rem solid #fff;

  }
.icon:hover, .circle:hover
  {
  border:0.2rem solid #ffaaaa;
  background-color:#0000;
  }

.icon
  {
  height:2rem;
  width:2rem;
  display:flex;
  border-radius:0.5rem;
  }
.circle
  {
  height:1rem;
  width:1rem;
  margin:auto;
  border-radius:1rem;
  z-index:2;
  }

section
  {
  width: 100vw;
  height: 100vh;
  
  position: static;
  display: flex;
  overflow: hidden;
  margin: auto;
  align-content:center;
  align-items: center;
  align-self: auto;
  text-align: center;

  scroll-snap-align: start;
  }

.content
  {
  height:auto;
  width:auto;
  
  display:flex;
  flex-direction:column;
  align-content:stretch;
  align-items: center;
  align-self: auto;
  text-align: center;

  margin:auto;

  position:static;
  border-radius:1rem;

  }

.contain
  {
  height:60%;
  width:auto;
  margin:auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: space-around;
  }

.headline
  {
  color:#FFaaaa;
  width:100%;
  text-align: center;
  text-transform:uppercase;
  }

.explain
  {
  color:#FFF;
  align-self: auto;
  text-align: center;
  width:100%;
  padding:0.5rem;
  
  position: relative;
  top: 0.5rem;
  }
.contact
  {
  display: flex;
  position: relative;
  top: 1rem;
  
  }
ul
  {
   list-style: none;
   margin: auto;
   padding:auto;
   display: flex
  }
ul li
  {
  margin: 0 1ch;
  }
.CTA
  {
  display:list-item;
  height:auto;
  width:auto;
  color: #fff;
  padding:1ch;
  background-color:#ffaaaa;
  border-radius:0.3rem;
  position: relative;
  }

.CTA:hover
  {
  background-color:#fff;
  color: #ffaaaa;
  }

.foot
  {
  height:4ch;
  width:100vw;
  margin:auto;
  bottom:0;
  position:fixed;
  text-align: center;
  }

.ftTxt
  {
  color: #fff;
  }

@media screen and (max-width: 600px) {
  .contain h1{
    
  }
  .contain h3{
    
  }
  .contain a{
  }
}


@media screen and (max-height: 600px) {
  .contain h1{
    
  }
  .contain h3{
    
  }
  .contain a{
  }
}