html{
background-image: url('https://anamonator.com/6207554_1416902_anamonator_magma.922a41af984cde1d866b86fe961a0b0c.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 60% 60%;
font-family: Comic Sans MS, Helvetica, sans-serif;
height: auto;
width: auto;
margin: 0%;
padding: 0%;
}
@font-face {
font-family: synk;
src: url(https://anamonator.com/ChillSide.otf);
}
img {
width: 480px;
height: 360px;
}
h1{
color: #202ef5;
text-shadow: 3px 3px #2A88FC;
font-size: 1.7vw;
text-align: center;
letter-spacing: 5%;
transition: ease-in-out 0.5s;
}
h1:hover{
color:#2A88FC;
text-shadow: 3px 3px #FF53FD;
}
h2{
color: #00000;
text-shadow: 3px 3px #cccccc;
font-size: 1.7vw;
text-align: center;
letter-spacing: 5%;
transition: ease-in-out 0.5s;
}
h2:hover{
color: #000000;
text-shadow: 3px 3px #cccccc;
}
.container {
display: grid;
grid-template-columns: 0.6fr 2fr 0.6fr;
grid-template-rows: 0.5fr 0.2fr 2.4fr 0.1fr;
grid-auto-columns: 1fr;
gap: 1% 1%;
grid-auto-flow: row;
grid-template-areas:
"header header header"
"nav nav nav"
"sideleft main sideright"
"footer footer footer";
margin: auto;
margin-bottom: 2%;
width: auto;
height: auto;
padding: 2%;
}
.header {
grid-area: header;
}
.header img{
margin: auto;
display: block;
width: auto;
-webkit-animation: pop 2s ease-in-out infinite alternate;
-moz-animation: pop 2s ease-in-out infinite alternate;
animation: pop 2s ease-in-out infinite alternate;
}
@keyframes pop {
from { transform:scale(1) }
50% { transform:scale(1.5) }
to { transform:scale(1) }
}
.nav{
grid-area: nav;
display: flex;
flex-direction: row;
font-family: synk;
font-size: 3vw;
}
.nav div{
margin: auto;
display: block;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid transparent;
border-radius: 30px;
padding: 1.3%;
}
.nav a{
text-decoration: none;
color: #2A88FC;
transition: ease-in-out 0.5s;
text-shadow: 2px 2px #FF53FD;
}
nav a:visited{
color: ##b8b8b8;
text-shadow: 2px 2px #FF53FD;
}
a:hover{
color: #000000;
text-shadow: 2px 2px #2A88FC;
text-transform: uppercase;
}
a{
text-decoration: none;
}
.sideleft {
grid-area: sideleft;
padding: 5%;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sideleft .meow{
background-color: rgba(244, 255, 255, 0.6);
border: 1px solid transparent;
border-radius: 15px;
padding: 5%;
}
.xtralinks{
background: #000000;
padding: 3%;
font-size: 1vw;
border: 1px solid #2A88FC;
border-radius: 15px;
}
.xtralinks a{
text-decoration: none;
color: white;
filter: drop-shadow(1px 1px 0 rgb(0, 0, 0)) drop-shadow(-1px 1px 0 rgb(0, 0, 0)) drop-shadow(0 -1px 0 rgb(0, 0, 0)) drop-shadow(1px 0 rgb(0, 0, 0));
transition: ease-in-out 0.3s;
}
.xtralinks a:hover{
padding: 3px 13px 3px 13px;
}
.pic{
transition-property: transform;
transition-duration: 1s;
border-image: #a3a3a3;
border-width: 4px;
border-style: solid;
background-color: rgba(255, 255, 255, 0.5);
margin-bottom: 5%;
}
.pic img{
width: 100%;
height: auto;
}
.pic img:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.main {
grid-area: main;
background-color: rgba(255, 255, 255, 1.0);
height: 1000px;
border-radius: 15px;
padding: 9%;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sideright {
grid-area: sideright;
padding: 5%;
-ms-overflow-style: none;
scrollbar-width: none;
overflow: auto;
}
.footer {
grid-area: footer;
background-color: white;
padding: 1%;
}
.box, .inner {
box-sizing: border-box;
}
.box {
background-image:url('https://anamonator.com/Opera%20Snapshot_2025-06-18_153645_onecompiler.com.png');
background-size:cover;
padding:8%;
width:100%;
border:2px solid #9ae2ff;
border-radius: 15px;
font-size: 0.8vw;
}
.inner {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
padding:3%;
border:1px solid #FF53FD;
border-radius: 15px;
overflow:auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.inner p{
text-align: center;
}
.sideright textarea{
resize: none;
}
@media only screen and (max-width: 640px) {
body{
font-size: 4vw;
}
.container {
display: block;
grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr 0.1fr 0.1fr;
grid-auto-columns: 1fr;
gap: 5% 5%;
grid-auto-flow: row;
grid-template-areas:
"header header header"
"nav nav nav"
"main main main"
"sideleft sideleft sideleft"
"sideright sideright sideright";
margin: auto;
width: 110%;
height: auto;
padding: 2%;
}
h1{
font-size: 8vw;
}
h2{
font-size: 3vw;
}
.header img{
margin: auto;
width: 110%;
}
.nav{
font-size: 4vw;
}
#guy{
display: none;
}
.sideleft {
padding: 2%;
}
.sideleft .meow{
padding: 2%;
}
.xtralinks{
font-size: 5vw;
}
.inner p{
font-size: 4vw;
}
.pic{
display: none;
}
textarea{
display: block;
margin: auto;
}
}