/* Layout */


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

.main {
  background-image:url("../../images/controllers.jpg");
  background-size:cover;
  display:flex;
  height:100%;
  position:relative;
}

.main__nav__links:hover{
		--tw-bg-opacity: 1;
    color: rgba(59,130,246,var(--tw-bg-opacity));
}

.main__div {
  margin:0px auto;
  text-align:center;
}

/* Text */

.nav__span {
  font-family:"Roboto", sans-serif;
  font-size:18px;
  letter-spacing:.12px;
  line-height:50px;
  position:absolute;
  right:62px;
}

.div__sg {
    color:#0f4c81;
    font-family:"Play", sans-serif;
    font-size:44px;
    letter-spacing:.12px;
    margin:10% 5px 5px 5px !important;
}

.div__h1 {
  color:#0f4c81;
  font-family:"Play", sans-serif;
  font-size:44px;
  letter-spacing:.12px;
  margin:25% 5px 5px 5px;
}

.div__p {
  color:#000;
  font-family:"Roboto", sans-serif;
  font-size:22px;
  letter-spacing:.12px;
  line-height:27px;
  margin:0px 5px 50px 5px;
}

.div__form {
  position:relative;
}

.form__input,
.form__ul {
  left:0;
  position:absolute;
  top:0;
  width:100%;
}

.form__input {
  background-color:#0f4c81;
  border:1px solid transparent;
  color:#fff;
  font-family:"Roboto" sans-serif;
  font-size:18px;
  height:50px;
  letter-spacing:.12px;
  padding:5px;
}

.form__input::-webkit-input-placeholder {
  color:#fff;
}

.form__input:hover {
  background-color:#0f4c81;
  cursor:pointer;
}

.form__input:hover::-webkit-input-placeholder {
  color:#fff;
}

.form__input:focus,
.form__input.open {
  background-color:#0f4c81;
  color:#fff;
  outline:0;
}

.form__input:focus::-webkit-input-placeholder,
.form__input.open::-webkit-input-placeholder {
  color:#fff;
}

.form__ul {
  list-style:none;
  margin-top:50px;
  max-height:0px;
  overflow:hidden;
}

.form__ul.open {
  max-height:150px;
  overflow:auto;
}

.ul__li {
  align-items:center;
  background-color:#fff;
  cursor:pointer;
  display:flex;
  font-size:18px;
  height:50px;
  opacity:1;
  padding:5px;
  position:relative;
}

.ul__li:hover {
  background-color:#0f4c81;
  color:#fff;
}

.ul__li.closed {
  opacity:0;
  overflow:hidden;
  max-height:0px;
}

.li__a {
  color:#000;
  line-height:50px;
  text-align:left;
  text-decoration:none;
  width:100%;
    /*here*/
}

.li__a:hover {
  color:#fff;
}

/* Images */

.nav__img {
  height:50px;
  position:absolute;
  right:17px;
}

@media only screen and (max-width:768px) {
  /* Text */

  .div__h1 {
    margin-top:12.5% !important;
  }
}



@media screen and (max-width: 768px) {
    .li__a {
        line-height:unset !important;
    }

  form input[type=text] {
width:300px !important;
}

form input[type=password] {
width:300px !important;
}

#acctMain  { right: 9rem !important;}
#admin  { right: 18rem !important;}
  #logout { right: 4rem !important;}
	#div__sub { margin-top:25px; }
    .nav__span { display: none; }   /* hide it elsewhere */
}


@media screen and (max-width: 768px) {
  //.nav__span { display: ; }   /* hide it elsewhere */
}

@media only screen and (max-width: 768px){
	#supportedGames_div{
	margin:28%;
	}
}

@media only screen and (max-width: 568px){
	#view__desktop{

	}
}