html, body{ 
margin:0; 
padding: 0;
width:100%;
height: 100%;
background: #DFD;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s; 
}

@font-face {
font-family: Motley Forces;
src: url("MotleyForcesRegular.ttf");
}

p{
font-family: Motley Forces;
font-size: 120px;
color: #FFF;
display: inline-block;
position: relative;
left:24px;
bottom:24px;
-webkit-transition: all 2s ;
-moz-transition: all 2s;
-o-transition: all 2s;
transition: all 2s; 
}

span{
position: absolute;
left:12px;
top:-36px;
font-family: Motley Forces;
font-size: 36px;
color: #FFF;
display: inline-block;
margin: auto;
}

#boxostuff{
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:546px;
height:819px;
margin: auto;
border: solid 5px #FFF;
padding: 6px;
background: #ADCEAD;
box-shadow: 0px 0px 6px 6px #357935 inset;
}

.boxinboxostuff{
float: left;
margin: 18px;
width:225px;
height:225px;
border: solid 6px #DFD;
overflow:hidden;
box-shadow: 0px 0px 6px 6px #357935;
}

.boxinboxostuff.twit{background: #000000;}
.boxinboxostuff.steam{background: #1b2838;}
.boxinboxostuff.you{background: #e52d27;}
.boxinboxostuff.mast{background: #563ACC;}
.boxinboxostuff.bsky{background: #4099FF;}
.boxinboxostuff.nothing{background: #FF69B4;}

p:after{
opacity: 0;
-webkit-transition: all 2s ;
-moz-transition: all 2s;
-o-transition: all 2s;
transition: all 2s; 
}

p.twit:after{content: ".com"}
p.steam:after{content: "team"}
p.you:after{content: "outube"}
p.mast:after{content: "astodon"}
p.bsky:after{content: "sky"}
p.nothing:after{content: "??"}

.boxinboxostuff:hover p:after{opacity:1;}
.boxinboxostuff.steam:hover p.steam:after{content: "team"}
.boxinboxostuff.you:hover p.you:after{content: "outube"}
.boxinboxostuff.mast:hover p.mast:after{content: "astodon"}
.boxinboxostuff.bsky:hover p.bsky:after{content: "sky"}
.boxinboxostuff.nothing:hover p.nothing:after{content: "??"}

.boxinboxostuff:hover p{
transform-origin: left;
transform: scale(0.3);
}

.curved {
border-radius: 24px;
}