main.css

@font-face {
  font-family: 'ps4';
  src: url('./assets/font/sst.ttf');
}

body{
	margin: 0;
	padding: 0;
    height: 100%;
	background-color: #0e6cc4;
	overflow-x:hidden;
	overflow-y:hidden;
    color: white;
    font-size: 17px;
    font-family: 'ps4', sans-serif;
}

div:focus {
    outline: white solid 3px;}

/* Resto da Página */

#imagem {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0e6cc4;
  z-index: -1;
}

#imagem img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mensagem {
    display: none;
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-family: 'ps4', sans-serif;
    opacity: 1;
}

#restoDaPagina {
    display: none;
}

/* Header */

header{
	height: 3.5em;
    position: fixed;
	width: 100%;
    top: 5px;
	left: 0;
    right: -5px;
	z-index: 999;
    font-size: 17px;
}

header div{
	height: 100%;
}

#plus {
    width: 3em;
	background-image: url("./assets/img/plus.png");
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#user{
	width: 3em;
	background-image: url("./assets/img/user.png");
	background-size: 65%;
	background-repeat: no-repeat;
	background-position: center;
    position: relative;
    left: 270px;
	float: left;
}

#userName{
	color: white;
	width: 25%;
	float: left;
    position: relative;
    left: 270px;
	line-height: 3em;
    font-size: 20px;
}

#info{
	width: 3em;
	background-image: url("./assets/img/info.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
    position: relative;
    left: 80px;
	background-size: 110%;
}

#textInfo{
	color: white;
	width: 25%;
	float: left;
	line-height: 3.5em;
    position: relative;
    left: 80px;
}

#friends{
	width: 3em;
	background-image: url("./assets/img/friends.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
    position: relative;
    left: 480px;
	background-size: 110%;
}

#trophies{
	width: 3em;
	background-image: url("./assets/img/trophy.png");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
    position: relative;
    left: 280px;
}

#clock{
	line-height: 2.5em;
	float: right;
	margin-right: 1em;
	color: white;
    font-size: 22px;
}

/*END OF HEADER********************************/

#games{
	width: 1120em;
	position: absolute;
	top: 1em;
	left: 0;
	padding: 5em;
	z-index: 99;
}

#games .squareGame:focus-within .imgGame {
  height: 85%;
}

.squareGame{
	height: 11em;
	width: 11em;
	vertical-align: top;
	display: inline-block;
	transition: 0.3s ease;
}

.squareGame:hover, .squareGame:focus, #games .squareGame:focus-within{
    height: 16.5em;
    width: 15em;
    border: 3px solid white;
    cursor: pointer;
}

.squareGame:hover .imgGame{
	height: 85%;
}

.imgGame{
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.gameText{
	color: white;
	text-align: center;
	line-height: 2.4em;
	background-color: rgba(255,255,255,.2);
}

.gameTitle{
	position: absolute;
	color: white;
	font-size: 1.2em;
	transform: translate(13.2em,-1.5em);
}

/* Notification */

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  background-color: #222;
  color: #eee;
  font-family: 'ps4', sans-serif;
  padding: 16px;
  border-radius: 8px;
  /*border: 1px solid blue;*/
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  transform: translateX(150%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
  max-width: 400px;
}

.notification-container.slide-in {
  transform: translateX(0);
}

.notification-container.slide-out {
  transform: translateX(150%);
}

.icon-container {
  margin-right: 16px;
}

.icon-container img {
  height: 48px;
}

.notification-title {
  margin: 0 0 4px 0;
  font-size: 20px;
  color: white;
}

.notification-message {
  margin: 0;
  font-size: 16px;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #0091FF;
  animation: pulse 1s infinite;
}

.icon-container img {
  width: 90%;
  height: auto;
  filter: brightness(1.5);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/*SQUARE IMAGE*****************************************/

.ascii{
	font-weight: bold;
}

.ps{
	background-image: url("./assets/img/ps.png");
}

.new{
	background-image: url("./assets/img/new.png");
}

.last{
	background-image: url("./assets/img/last.png");
}

.detroit{
	background-image: url("./assets/img/detroit.png");
}

.battle{
    background-image: url("./assets/img/battle.png")
}

.death{
    background-image: url("./assets/img/death.png")
}

.red{
    background-image: url("./assets/img/red.png")
}

.spiderman{
	background-image: url("./assets/img/spider.png");
}

.elden{
	background-image: url("./assets/img/elden.png");
}

.cod{
	background-image: url("./assets/img/cod.png");
}

.jedi{
	background-image: url("./assets/img/jedi.png");
}

.fifa{
	background-image: url("./assets/img/fifa.png");
}

.youtube{
	background-image: url("./assets/img/yt.png");
}

.settings{
	background-image: url("./assets/img/settings.png");
    background-size: 40%;
}

.off{
	background-image: url("./assets/img/off.png");
    background-size: 40%;
}

.storeGame{
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#god{
	background-image: url("./assets/img/god.png");
}

#raider{
	background-image: url("./assets/img/tomb.png");
}

#codi{
	background-image: url("./assets/img/if.png");
}

#mafia{
	background-image: url("./assets/img/mafia.png");
}

#destiny{
	background-image: url("./assets/img/destiny.png");
}

#bt1{
	background-image: url("./assets/img/b1.png");
}

#lg{
	background-image: url("./assets/img/horizon.png");
}

#per{
	background-image: url("./assets/img/per.png");
}

/*store*/

#store{
	padding: 1em;
	padding-top: 6em;
	margin-top: -3em;
	width: 60em;
	height: 25em;
	padding-left: 12em;
}

#store div{
	float: left;
	width: 12em;
	height: 12em;
	display: inline-block;
}

#store div:hover , #store div:focus-within{
	transform: scale(1.1, 1.1);
	box-shadow: 0px 5px 10px 3px rgba(45,45,45,.7);
	transition: 0.3s ease;
}

/*waves****************************/


.box {
	position: fixed;
	top: 0;
	transform: rotate(80deg);
	left: 0;
}

.wave {
	position: fixed;
	top: 0;
	left: 0;
  opacity: .4;
  position: absolute;
  top: 3%;
  left: 10%;
  background: #0af;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 7000ms infinite linear;
}

.wave.-three {
  animation: drift 7500ms infinite linear;
	position: fixed;
	background-color: #0e6cc4/*#77daff*/;
}

.wave.-two {
  animation: drift 3000ms infinite linear;
  opacity: .4 /*.1*/;
  background: black;
	position: fixed;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

/*Animation*/
.icon:nth-child(2) img {-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.icon:nth-child(3) img {-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.icon:nth-child(4) img {-webkit-animation-delay: 0.4s;animation-delay: 0.4s}

.icon img {
  -webkit-animation: anim 2s ease infinite;
  animation: anim 2s ease infinite;
  -webkit-transform: scale(0,0) rotateZ(180deg);
  transform: scale(0,0) rotateZ(180deg);
}

@-webkit-keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}

@keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}