/*how to cover text with strips and reveal the text at a:hover ?*/

a:hover{
    color: aquamarine;
    
}

p{
    text-align: justify;
}

#box{
    margin-left:26%;
    width:50%;
}

img{
    width:100%;
}

a {
    text-decoration:none;
    color: white;
    line-height:0;
    width:100%;
    
    
}
h3 {
    font-family:sans-serif;
    font-size: 100px;
    text-align: left;
    margin-top:70px;
    margin-left:50px;
    color:white;
    line-height:0.94
}
body {
    z-index: 10;           /*------------doesn't work*/
    border-color:100px solid white;
    color:white;
    font-size: 30px;
    font-family: sans-serif;
    text-align:left;
background: linear-gradient(206deg, #fea2ff, #d2c7ff, #b4fffc, #dbf8b2);
background-size: 3000% 3000%;
    
-webkit-animation: AnimationName 8s ease infinite;
-moz-animation: AnimationName 8s ease infinite;
animation: AnimationName 8s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*#strips {
    position:relative;
    width:100%;
    margin-bottom:0px;
}
#title{
    margin-top: -200px;
}

#black{
    position: absolute;
    width:100%;
    height:5%;
}

#black2{
    position:absolute;
    width:100%;
    height:5%;

}

head, p {
    font-family: monospace;
    position: relative;

}

body{
    margin-top: 200px;
}

footer{
        font-family: monospace;
        position: relative;
}
*/