@import url('https://fonts.googleapis.com/css?family=Tajawal:500,800');
@import url('https://fonts.googleapis.com/css2?family=Strait&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400&display=swap');

/* BASE */

body {
  font-family: 'Catamaran', sans-serif;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

h1, h2, h3, h4, h5, h6, p {
  margin:0;
}

a {
  text-decoration:none;
}

.pagewidth {
  margin:0 auto;
  box-sizing:border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Strait', sans-serif;
}


/* HEADER */

header {
  top:0;
  left:0;
  height:60px;
  width:100%;
  position:fixed;
  line-height:60px;
  text-align:center;
  text-transform:uppercase;
  font-size:19px;
  z-index:100;
}

header .logo {
  float:left;
}

nav.mainmenu {
  overflow: hidden;
}

nav.mainmenu a {
  display:inline-block;
  padding:0 0.8%;
}

nav.mainmenu a:hover {
  text-decoration:underline;
}




/* MAIN */

#main {
  position:relative;
  left:0;
  width:100%;
  top:60px;
  min-height:calc(100% - 120px);
  box-sizing:border-box;
}

#main section {
  padding:10px;
  box-sizing:border-box;
  margin-bottom:25px;
  text-align:center;
}


/* RESPONSIVE ELEMENTS  */
@media only screen and (max-width: 768px) { /* PHONES AND VERY SMALL SCREENS */
  .pagewidth {
    width:100%;
  }
    #main .pagewidth {
    padding:15px;
  }
  
  header .logo {
    margin-left:20px;
  }
  nav.mainmenu a {
    display: none;
  }
  
  .menubars {
    font-size:1.2em;
    display:block;
    position: absolute;
    right: 20px;
    top:20px;
  }

  nav.mainmenu.mobile {
    position: relative;
    display:block;
    width:100%;
    background-color: #327E8D;
  }
  
  nav.mainmenu.mobile a {
    display: block;
    text-align: left;
  }
}

@media only screen and (min-width: 769px) { /* TABLETS AND SMALL SCREENS + */

  .pagewidth {
    width:100%;
  }
      .menubars {
    display: none;
  }
  
    #main .pagewidth {
    padding:25px;
  }
}

@media only screen and (min-width: 1025px) { /* LAPTOPS/DESKTOPS ONLY */

  .pagewidth {
    width:80%;
    max-width:1400px;
    min-width:1025px;
  }
}

/* FOOTER */

footer {
  position:relative;
  top:60px;
  height:60px;
  width:100%;
  border-top:1px solid;
  box-sizing:border-box;
  text-align:center;
}

footer span {
  margin:0;
}

/* NOTIFICATION SYSTEM */

.notif {
  display:table;
  position:relative;
  min-height:45px;
  width:80%;
  border-right:4px solid;
  border-radius:2px;
  margin: 10px auto 10px;
  text-align:left;
  box-shadow:2px 2px 5px #aaa;
  box-sizing:border-box;
}

.notificon, .notifmsg {
  display:table-cell;
  vertical-align:middle;
}

.notificon {
  width:75px;
  text-align:center;
  padding:15px 0;
  color:#eee;
}

.notifmsg {
  padding:15px;
}

.msg_info {
  border-color:#104f55;
}

.msg_info .notificon {
  background-color:#104f55;
}

.msg_scs {
  border-color:#9EA772;
}

.msg_scs .notificon {
  background-color:#9EA772;
}

.msg_warn {
  border-color:#C9843D;
}

.msg_warn .notificon {
  background-color:#C9843D;
}

.msg_err {
  border-color:#BB2525;
}

.msg_err .notificon {
  background-color:#BB2525;
}

/* OTHER IDS AND CLASSES */

a.abtn {
  display:inline-block;
  padding:8px 16px;
  border:1px solid;
  font-weight:bold;
  font-size:1.2em;
  font-family:'Strait', sans-serif;
  text-transform:uppercase;
}

.dailybox {
  width:400px;
  max-width:100%;
  border:1px solid;
  padding:20px;
  box-sizing:border-box;
  border-radius:4px;
  margin:0 auto;
  text-align:center;
}

.rarity-1, .rarity-2, .rarity-3, .rarity-4, .rarity-100 {
  font-weight:bold;
}





/* COLLECTION SETS */

#setcontainer {
  display:block;
  margin:0 auto;
  width:80%;
  text-align:center;
}

.itemcontainer {
  display:inline-block;
  text-align:center;
  vertical-align:top;
  margin-bottom:30px;
}

@media only screen and (max-width: 750px) {
  .itemcontainer {width:50%;}
}

@media only screen and (min-width: 751px) {
  .itemcontainer {width:33%;}
}

@media only screen and (min-width: 1500px) {
  .itemcontainer {width:25%;}
}

.itemcontainer img {
  width:60%;
}

.qover1 {
  font-weight:bold;
  color:#C9843D;
}





/* ITEM PAGE */
#itemcontainer {
  display:block;
  margin:0 auto 20px auto;
  width:80%;
  max-width:1000px;
}

.itemimg {
  display:inline-block;
  vertical-align:top;
  margin:0;
}

@media only screen and (max-width: 750px) {
  .itemimg {width:100%; text-align:center}
}

@media only screen and (min-width: 751px) {
  .itemimg {width:300px;}
}

.itemdetails {
  display:inline-block;
  vertical-align:top;
  margin:0;
  padding:0 10px;
  box-sizing:border-box;
}

@media only screen and (max-width: 750px) {
  .itemdetails {width:100%; text-align:center}
}

@media only screen and (min-width: 751px) {
  .itemdetails {width:700px; text-align:left;}
}

/* TRADE PAGE */
#tradecontainer {
  display:block;
  width:80%;
  max-width:1000px;
  text-align:center;
  margin:0 auto;
  border:1px solid;
  padding:20px;
  box-sizing:border-box;
  border-radius:4px;
}

.tradeoffer {
  display:inline-block;
  width:50%;
  text-align:center;
}

#itemimg1, #itemimg2 {
  width:300px;
  min-height:450px;
}

#itemimg1 img, #itemimg2 img {
  width:100%;
}



/*OLD STUFF*/

table {
  margin:0 auto;
}

form {
  text-align:center;
}

input[type="text"], input[type="email"], input[type="password"] {
  border:1px solid #5ba396;
  border-radius:4px;
  padding:4px;
  margin:2px;
}

input[type="submit"] {
  border:0;
  border-radius:8px;
  background-color:#5ba396;
  padding:10px 26px;
  margin:8px;
  font-size:18px;
  color:#fff;
  text-transform:uppercase;
  cursor:pointer;
}

/**/

.profile_left, .profile_right {
  display:inline-block;
  width:50%;
  vertical-align:top;
}

.profile_block {
  display:block;
  margin:20px auto;
  padding:12px 18px;
  width:95%;
  box-sizing: border-box;
  border:1px solid #bbb;
  border-radius:2px;
}

.profile_block h3 {
  font-weight:800;
  margin:0;
}

.profile_block p {
  margin:0;
}