/* general styling */
:root {
  --smaller: .75;
}

@font-face {
    font-family: 'DopeText';
    src: url('../font/Arial-Black.eot');
    src: url('../font/Arial-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/Arial-Black.woff2') format('woff2'),
        url('../font/Arial-Black.woff') format('woff'),
        url('../font/Arial-Black.ttf') format('truetype'),
        url('../font/Arial-Black.svg#Arial-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}


body {

  align-items: center;
    		background:;

  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("img/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position:center top;
	font-family: 'DopeText';
    font-weight: normal;
    font-style: normal;
	font-size: 10px;
}




.container {
  color: #000000;
  margin: 0 auto;
  text-align: center;
      overflow: hidden;
    position: relative;
    


}

.container img{
  position: inline-block;
  
}

.AYF{
  height: 40%;
  width: 40%;
   margin: 0 auto;
  text-align: center;


}

p{

	padding-top: 10px;
}


h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1.0em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 3.5rem;
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}
@media (max-width: 393px){
	
	
.AYF{
  height: 70%;
  width: 70%;
   margin: 0 auto;
  text-align: center;

}
.Cross{
	height: 10%;
		width: 10%;
}

.tmh{
	height: 30%;
		width: 30%;
}

li span {
  display: block;
  font-size: 3.0rem;
}
	
}

@media (max-width: 682px){
	.AYF{
  height: 80%;
  width: 80%;
   margin: 0 auto;
  text-align: center;

}
li span {
  display: block;
  font-size: 2.0rem;
}
.Cross{
	height: 10%;
		width: 10%;
}

.tmh{
	height: 30%;
		width: 30%;
}
}