Spaces:
Sleeping
Sleeping
File size: 1,885 Bytes
e8afe32 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
html{
height: 100%;
margin: 0;
}
body{
font-family: Arial, Helvetica,sans-serif;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Website Title */
.container{
padding: 30px;
position: relative;
background: linear-gradient(45deg, #ffffff, #ffffff, #f9f9f9, #eeeeee, #e0e4e1, #d7e1ec);
background-size: 500% 500%;
animation: change-gradient 10s ease-in-out infinite;
}
@keyframes change-gradient {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
.container-heading{
margin: 0;
}
.container span{
color: #ff0000;
}
.description p{
font-style: italic;
font-size: 14px;
margin: 3px 0 0;
}
/* Text Area */
.ml-container{
margin: 30px 0;
flex: 1 0 auto;
}
.message-box{
margin-bottom: 20px;
}
/* Predict Button */
.my-cta-button{
background: #f9f9f9;
border: 2px solid #000000;
border-radius: 1000px;
box-shadow: 3px 3px #8c8c8c;
padding: 10px 36px;
color: #000000;
display: inline-block;
font: italic bold 20px/1 "Calibri", sans-serif;
text-align: center;
}
.my-cta-button:hover{
color: #ff0000;
border: 2px solid #ff0000;
}
.my-cta-button:active{
box-shadow: 0 0;
}
/* Footer */
.footer{
font-size: 14px;
padding: 20px;
flex-shrink: 0;
position: relative;
background: linear-gradient(45deg, #ffffff, #ffffff, #f9f9f9, #eeeeee, #e0e4e1, #d7e1ec);
background-size: 500% 500%;
animation: change-gradient 10s ease-in-out infinite;
}
.contact-icon{
color: #000000;
padding: 7px;
}
.contact-icon:hover{
color: #8c8c8c;
}
.footer-description{
margin: 0;
font-size: 12px;
}
/* Result */
.results{
padding: 30px 0 0;
flex: 1 0 auto;
}
.danger{
color: #ff0000;
}
.safe{
color: green;
}
.gif{
width: 30%;
}
|