:root{
    --color-primary: #006c61;
    --color-primary-dark: #00423b;
    --btn-color-primary: #006c61;
    --btn-color-primary-hover: #05aa99;
} 

a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover{
    color: var(--btn-color-primary-hover)
}


#base {
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0px 0px #bdd9a3;
    }
    50% {
        box-shadow: 0 0 10px 10px #bdd9a3;
    }
    100% {
        box-shadow: 0 0 -5px -5px #bdd9a3;
    }
}


@media (max-width: 500px){
    #mydata{
        width:90%
    }
    #toast-container > .toast {
      width: 268px !important;
    }
}

@media (max-width: 650px){
    #hello{
        margin-left:5px
    }    
}
@media (min-width: 501px){
    #mydata{
        width:450px
    }
    #toast-container > .toast {
      width: 450px !important;
    }    
}
@media (min-width: 651px){
    #hello{
        margin-left:20%
    }    
}

#theme-page .theme-page-wrapper .theme-content{
 padding: 0px !important;   
}

#container {
margin-top: 100px;
margin-bottom: 100px;
}