@import url(https://fonts.googleapis.com/css?family=Raleway);
@import 'https://fonts.googleapis.com/css?family=Anton';
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');


html, body, .grid-container { height: 100%; margin: 0; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1% 1%;
  grid-template-areas: "Title1 Title1 Title1 Title1 Title1 Title1 Title1 Title1 Title1 Title1 Title1 Title1" "Collection Collection Collection Collection StickerCollection StickerCollection StickerCollection StickerCollection Amount Amount Search Search" "Title2 Title2 Title2 Title2 Title2 Title2 Title2 Title2 Title2 Title2 Title2 Title2" "CustomSticker1 CustomSticker1 CustomSticker1 CustomSticker2 CustomSticker2 CustomSticker2 CustomSticker3 CustomSticker3 CustomSticker3 CustomSticker4 CustomSticker4 CustomSticker4" "CustomWeapon CustomWeapon CustomWeapon CustomExterior CustomExterior CustomExterior CustomWithoutOrder CustomWithoutOrder CustomWithoutOrder CustomInOrder CustomInOrder CustomInOrder" "AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch AgentSearch" "AgentName AgentName AgentName AgentPatch1 AgentPatch1 AgentPatch1 AgentPatch2 AgentPatch2 AgentPatch2 AgentPatch3 AgentPatch3 AgentPatch3" ". . . AgentSearchWithoutOrder AgentSearchWithoutOrder AgentSearchWithoutOrder AgentSearchInOrder AgentSearchInOrder AgentSearchInOrder . . ." "Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer";
}

.Title1 { grid-area: Title1; }

.Amount { grid-area: Amount; }

.Search { grid-area: Search; }

.StickerCollection { grid-area: StickerCollection; }

.Collection { grid-area: Collection; }

.Title2 { grid-area: Title2; }

.CustomSticker1 { grid-area: CustomSticker1; }

.CustomSticker2 { grid-area: CustomSticker2; }

.CustomSticker3 { grid-area: CustomSticker3; }

.CustomSticker4 { grid-area: CustomSticker4; }

.CustomWeapon { grid-area: CustomWeapon; }

.CustomExterior { grid-area: CustomExterior; }

.CustomWithoutOrder { grid-area: CustomWithoutOrder; }

.CustomInOrder { grid-area: CustomInOrder; }

.AgentSearch { grid-area: AgentSearch; }

.AgentName { grid-area: AgentName; }

.AgentPatch1 { grid-area: AgentPatch1; }

.AgentPatch2 { grid-area: AgentPatch2; }

.AgentPatch3 { grid-area: AgentPatch3; }

.AgentSearchWithoutOrder { grid-area: AgentSearchWithoutOrder; }

.AgentSearchInOrder { grid-area: AgentSearchInOrder; }

.Footer { grid-area: Footer; }

* {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	margin: 0;
	padding: 0;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;

	height: 100%;
}

body {
  margin-left: 2%;
  margin-right: 2%;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 20px; 
	width: 95%;
	color: #fff;
    background-image:url("https://i.imgur.com/SdRpVid.png");
    background-size: cover;
    background-attachment:fixed;
    padding: 0;
}

h1 {
  color: white;
	text-align: center;
  font-family: 'Oswald'; 
	font-size: 125px; 
  text-shadow: 4px 4px #030303;
  margin-top: 0%;
	margin-bottom: 0%;
	height: 100%;
}

select {
	display: block;
	width: 100%;
	font-size: 40px; 
	color: #EC6F66;
	cursor: pointer;
	border-radius:5px;
	padding-left: 1%;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
}

select:hover {
	background-color: rgba(225,225,225,0.3);
	color: white;
	padding-left: 2%;
}

select option {
	background-color: #FFFFFF;
	color: #EC6F66;
	width: 310px;
	padding-left: 10px;
	height: 20px;
	cursor: pointer;
	font-size: 40px; 
}

button {
	background:#FFFFFF;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  color:#ec6f66;
	display:inline-block;
	border-radius:5px;
	border:1px solid #949494;
	width: 100%;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 40px; 
	cursor: pointer; 
}
button:hover {
	background-color: rgba(225,225,225,0.3);
  color: white;
}

#count-select{
}
#count-select:hover{
  padding-left: 3%
}

#search-btn{
}

input{
  width: 100%;
  background-color:#FFFFFF;
	border:1px solid #949494;
	border-radius:5px;
  color:#ec6f66;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 40px; 
	padding-left: 2%;
}

input:hover {
  transition-duration: 0.4s;
	background-color: rgba(225,225,225,0.3);
  color: white;
}
input::-webkit-input-placeholder
{
  color:#ec6f66;
}
input:hover::-webkit-input-placeholder{
  -webkit-transition-duration: 0.3s; 
	background-color: transparent;
	color: white;
  padding-left: 1%;
  opacity: 1;
}
input:focus{
  padding-left: 2%;
}
input:focus::-webkit-input-placeholder{
  opacity: 0.5;
  padding-left: 2%;
}

h2 {
  color: white;
	text-align: center;
  font-family: 'Oswald'; 
	font-size: 30px; 
  text-shadow: 2px 2px 2px #030303;
  margin-top: 0%;
margin-bottom: -3%;
}

#titletop {
  margin-top: -2%;
}

html, body {height: 100%; overflow: hidden}

/* For CSS reworking only
.grid-container * { 
 border: 1px solid red;
 position: relative;
}

.grid-container *:after { 
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
}
*/