body {
height: 100vh;
width: 100vw;
overflow: hidden;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
color: white;
}
.title {
position: absolute;
background-color: white;
border-radius: 5%;
animation: shadowAnimation 2s infinite, borderAnimation 2s infinite;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 350px;
}
.titlesub {
border-radius: 4%;
background-color: rgba(255, 255, 255, 0.828);
width: 230px;
height: 330px;
display: flex;
align-items: center;
justify-content: center;
animation: backgroundAnimation 1s infinite alternate;
}
.titlebox {
border-radius: 4%;
background-color: white;
width: 220px;
height: 320px;
display: grid;
grid-template-columns: auto;
align-items: center;
justify-content: center;
}
.text{
text-align: center;
margin: auto;
animation: textAnimation 2s infinite;
}
img{
width: 200px;
height: 250px;;
animation: imgAnimation 2s infinite;
}
@media screen and (max-width: 300px) {
.title {
width: 75px;
height: 115px;
}
.titlesub {
width: 65px;
height: 95px;
}
.titlebox {
width: 60px;
height: 90px;
}
.text {
font-size: 7px;
}
img {
width: 60px;
height: 70px;
}
}
@keyframes shadowAnimation {
0% {
box-shadow: 0 0 10px rgba(244, 243, 238, 0.8);
}
50% {
box-shadow: 0 0 20px rgba(188, 184, 177, 0.8);
}
100% {
box-shadow: 0 0 10px rgba(138, 129, 124, 0.8);
}
}
@keyframes borderAnimation {
0% {
border: 3px dotted rgb(244, 243, 238);
}
50% {
border: 3px dotted rgb(188, 184, 177);
}
100% {
border: 3px dashed rgb(138, 129, 124);
}
}
@keyframes backgroundAnimation {
0% {
background-color: rgba(244, 243, 238, 0.828);
}
50%{
background-color: rgba(100, 100, 100, 0.8);
}
100% {
background-color: rgb(107, 112, 92,0.8);
}
}
@keyframes textAnimation {
0%, 100% {
opacity: 0.5;
color: black;
}
50% {
opacity: 1;
color: black;
}
70%{
opacity:0 ;
}
71%{
opacity: 0.3;
}
}
@keyframes imgAnimation {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}