@media screen and (min-width: 0px) and (max-width: 479px) {
.magic-mirror .mirror-back {
background: url(mobil.png)!important;
width: 320px!important;
height: 391px!important;
}
.magic-mirror .cover, .magic-mirror .cover2, .magic-mirror .cover3 {
width: 176px!important;
height: 213px!important!important;
top: 107px!important;
left: 72px!important;
}
.magic-mirror #results {
font-size: 30px!important;
width: 150px!important;
top: 150px!important;
left: 90px!important;
}
.magic-mirror textarea {
left: 69px!important;
bottom: 3px!important;
width: 188px!important;
}
.instruct {
top: 50px!important;
}
}
body {
background: url(mirror-back.jpg) #000;
background-attachment: fixed;
background-size: cover;
font-family: Tahoma, Geneva, sans-serif;
}
.logo {
display: block;
margin: 0px auto 0 auto;
width:100%;
max-width: 750px;
opacity: 0.7;
filter: contrast(150%);
}
.magic-mirror .mirror-back {
background: url(mirror.png);
width: 350px;
height: 448px;
position: relative;
margin: 0px auto 60px auto;
}
.magic-mirror .cover {
z-index: 0;
}
.magic-mirror .cover, .magic-mirror .cover2, .magic-mirror .cover3 {
width: 193px;
height: 234px;
position: absolute;
top: 122px;
left: 78px;
cursor: pointer;
}
.magic-mirror .cover2, .magic-mirror .cover3, .magic-mirror .disp-none, #quest {
display: none;
}
.magic-mirror #results {
font-family: 'Mountains of Christmas', cursive;
color: #fff;
font-weight: bold;
font-size: 34px;
text-align: center;
width: 170px;
position: absolute;
top: 170px;
left: 90px;
z-index: 0;
}
.magic-mirror textarea {
position: absolute;
left: 69px;
bottom: 5px;
z-index: 0;
width: 212px;
border-right: 3px solid #483632;
border-left: 3px solid #483632;
border-bottom: 5px solid #5d4f47;
border-top: 9px solid #5d4a33;
height: 90px;
padding: 5px;
background: #000;
color: #a59b9b;
outline: none;
}
.magic-mirror textarea:focus {
box-shadow: none;
}
.magic-mirror .cover3 {
opacity: .7;
}

element.style {
}
.instruct {
top: 100px;
}