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

:root{
    --greenC: #0e4f1F;
    --redC: #ff1b68;
}

html{
    height: 100%;
}

body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    display: grid;

    grid-template-rows:  3.5rem auto fit-content(8rem);
    grid-template-areas:"header"
                        "main"
                        "footer";
    height:100%;
    
}

.button {
    background-color: #0e4f1F;
    color: white;
    font: inherit;
    font-weight: bold;
    border-radius: 8px;
    border: 1.5px solid #0e4f1F;
    padding: 0.5rem;
    cursor: pointer;
}

.button:hover,
.button:active {
    background-color: white;
    color: var(--greenC, #0e4f1F);
}

.button:focus {
    outline: none;
}

.button[disabled] {
    cursor:not-allowed;
    border: #a1a1a1;
    background:#ccc;
    color: #a1a1a1;

}

main{
    
    
    grid-area:main;
    
}


.main-header {
    width: 100%;
    background: #2ddf5c;
    padding: 0.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    display:flex;
    align-items: center;
    justify-content: space-between;
    grid-area: header;
}

.main-header__brand {
    text-decoration: none;
    color: #0e4f1F;
    font-weight: bold;
    vertical-align: middle;
    
    

}

.main-header__brand img{
    
    height:2.5rem;
    vertical-align: middle;
}



.backdrop{
    position:fixed;
    display: none;
    opacity:0;
    top: 0;
    left: 0;
    z-index: 51;
   height:100vh;
    width: 100vw;
    background:rgba(0,0,0,0.5);
    transition:opacity 0.2s linear;
}

.main-nav {
    display: none;
  
}

.main-nav__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display:flex;

}

.main-nav__item {
    
    margin: 0 16px;

}

.main-nav__item a,
.mobile-nav__item a {
    color: #0e4f1F;
    text-decoration: none;
    font-weight:bold;
    padding: 0.2rem 0;


}

.main-nav__item ::after {
    content: "";
    color: red;
}


.main-nav__item a:hover,
.main-nav__item a:active {
    color: white;
    font-weight: bold;
    border-bottom: 1px solid;
}


.main-nav__item--cta a,
.mobile-nav__item--cta a {
    color: white;
    background: var(--red, #ff1b68);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}


.main-nav__item--cta a:hover,
.main-nav__item--cta a:active,
.mobile-nav__item--cta a:hover,
.mobile-nav__item--cta a:active{
    border: none;
    color: #ff1b68;
    background: white;

}


.main-footer{
    background:black;
    padding:2rem;
    margin-top: 3rem;
    grid-area:footer;
    

}

.main-footer__links{
    list-style: none;
    margin:0;
    padding:0;
    text-align: center;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.main-footer__link{
    
    margin:1rem 0rem;
}

.main-footer__link a{
    color: white;
    text-decoration: none;
}


.main-footer__link a:hover,
.main-footer__link a:active{
    color: #ccc;
}


@media(min-width:40rem){
    .main-footer__link{
        
     margin:0 1rem;
    }

    .main-nav{
        /* display: inline-block;
        width: calc(100% - 122px);
        text-align: right;
        vertical-align: middle; */
        display:flex;
    }

    .main-footer__links{
  
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

.mobile-nav {
    transform:translateX(-100%);
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background: white;
    width: 80%;
    height: 100vh;
    transition: all 1.2s ease-out;
    
  }
  
  .mobile-nav__items {
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    width: 90%;
    height: 100%;
    list-style: none;
    margin: 0% auto;
    padding: 0;
    text-align: center;
    
  }
  
  .mobile-nav__item {
    margin: 1rem 0;
  }
  
  .mobile-nav__item a {
    font-size: 1.5rem;
  }



  .toggle-button {
      
    width: 3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
  }
  
  .toggle-button:focus {
    outline: none;
  }
  
  .toggle-button__bar {
    width: 100%;
    height: 0.2rem;
    background: black;
    display: block;
    margin: 0.6rem 0;
  }

  @media(min-width:40rem) {
    .toggle-button{
        display: none;
    }
  }
  

  .open{
      display : block !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
      
  }

  .main-nav__item--cta{
      animation:wiggle 400ms 3s 8 ;
  }

  @keyframes wiggle{
      0%{
        transform:rotateZ(0);
      }

      50%{
        transform:rotateZ(-10deg);
      }

      100%{
        transform:rotateZ(10deg);
      }
  }