@media screen and (max-width:768px){
.theme-button{
width:120px;
height:120px;
padding:12px;
}
.ip-address{
font-size:3em;
}
}
@media screen and (max-width:480px){
.theme-toggle{
top:15px;
}
.theme-button{
width:100px;
height:100px;
padding:10px;
}
.ip-address{
font-size:2.5em;
}
.copy-notification{
font-size:1.6em;
}
}
@media screen and (max-width:380px){
.theme-button{
width:80px;
height:80px;
padding:8px;
}
.ip-address{
font-size:2.2em;
}
}
@media screen and (max-width:320px){
.ip-address{
font-size:2em;
}
}
@media screen and (max-width:280px){
.ip-address{
font-size:1.6em;
}
}
@media screen and (max-width:240px){
.ip-address{
font-size:1.2em;
}
}
@media screen and (max-height:600px){
.walrus-main{
transform:translate(-50%, calc(-50% - 90px));
width:70px;
height:70px;
}
.walrus-main:hover{
transform:translate(-50%, calc(-50% - 90px)) scale(1.1);
}
.ip-address{
font-size:2.5em;
}
.ip-details{
transform:translate(-50%, calc(-50% + 40px));
font-size:0.8em;
}
.copy-container{
transform:translate(-50%, calc(-50% + 85px));
}
}
@media screen and (max-height:500px){
.walrus-main{
transform:translate(-50%, calc(-50% - 75px));
width:60px;
height:60px;
}
.walrus-main:hover{
transform:translate(-50%, calc(-50% - 75px)) scale(1.1);
}
.ip-address{
font-size:2.2em;
}
.ip-details{
transform:translate(-50%, calc(-50% + 35px));
font-size:0.75em;
}
.copy-container{
transform:translate(-50%, calc(-50% + 75px));
}
.copy-button{
padding:6px;
}
.copy-button svg{
width:40px;
height:40px;
}
}
@media screen and (max-height:450px){
.walrus-main{
transform:translate(-50%, calc(-50% - 65px));
width:50px;
height:50px;
}
.walrus-main:hover{
transform:translate(-50%, calc(-50% - 65px)) scale(1.1);
}
.ip-address{
font-size:2em;
}
.ip-details{
transform:translate(-50%, calc(-50% + 30px));
font-size:0.7em;
}
.copy-container{
transform:translate(-50%, calc(-50% + 65px));
}
.copy-button svg{
width:36px;
height:36px;
}
}
@media screen and (max-height:400px){
.walrus-main{
transform:translate(-50%, calc(-50% - 55px));
width:45px;
height:45px;
}
.walrus-main:hover{
transform:translate(-50%, calc(-50% - 55px)) scale(1.1);
}
.ip-address{
font-size:1.8em;
}
.ip-details{
transform:translate(-50%, calc(-50% + 25px));
font-size:0.65em;
}
.copy-container{
transform:translate(-50%, calc(-50% + 60px));
}
.copy-button{
padding:4px;
}
.copy-button svg{
width:32px;
height:32px;
}
}