@font-face {
  src: url(/fonts/seaweedscriptregular.ttf);
  font-family: 'seaweedscript';
  font-weight: normal;
}
@font-face {
  src: url(/fonts/poppinslight.ttf);
  font-family: 'poppins';
  font-weight: normal;
}
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}

html, body{
  font-family: 'poppins';
  height: 100%;

}


#gradtop{
  background-image: linear-gradient(to bottom, #0D374C 14.71%, #010101 100%);

height: 4em;
}
.bannerbox{
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner{
  width: 25%;
  vertical-align: bottom;
}
.logo{
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
svg{
  width:10%;
  height:10%
}


input{
  display: none;
}
 input label div{
  display: none
}
.navigation{
  display: none;
}

.navtopgrad{
  margin-top: 0;
  height: 1rem;
  background-image: linear-gradient(to top, #0D364B 0%, #000000 100%);

}
.alterheader{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-top:0.5rem;
  padding-bottom:0.5rem;

  background-image: linear-gradient(to bottom, #0D384E 5%, #000000 33%, #000000 66%, #0D364B 95%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbottomgrad{
  height: 1rem;
  background-image: linear-gradient(to bottom, #0D364B 0%, #000000 100%);
}




ul{list-style: none;}

.navibar{
  padding-left: 0;
  padding-right: 0;
  margin-left: 10%;
  margin-right: 10%;
  width:100%;
  position:sticky;
  top: 0;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#home{
  color: white;
}

.navlink{
  text-align: center;
  font-size: 1.5rem;
  color: #0D364B;
  text-decoration: none;
}

.altesmain{
  padding-left: 20%;
  padding-right:20%;
  background-image:linear-gradient(to bottom, #000000 0%, #0D364B 15%, #0D364B 85%, #000000 100%);
}

.wrapper{
  background-color: #000000;
  min-height: 70%;
}
.wrapper2{
  background-color: #000000;
  min-height: 10vh;
}




.mid{
  /* padding-top:  10%; */
  padding-left: 5%;
  padding-right: 5%;
  background-color: #000000;
}

h2{

  font-size: 4rem;
  font-weight: lighter;
  color: white;
}

article{
  padding-left: 10%;
  padding-bottom: 10%;
}


.lorem{

  color: white;
  margin-top: 4%;

}


.superman{
  background-color: #000000;
}
.foot{
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.batman{
  margin: 5%;
  margin-left: 7.5%;
  margin-right: 7.5%;
}
.burger{
  color: #0D364B;
  text-decoration: none;
}
.harrypotter{
  background-color:#000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:3%;
}
#logofooter{
  width: 5%;
  /* height:15%; */
}


@media screen and (max-width: 1025px) {
  .banner{
    width: 60%;
    margin-bottom: 7.5%;
  }
  .logo{

    padding-bottom: 7.5%;
  }
  #logotop{
    width: 20%;
  }
.altesmain{
  padding-left: 10%;
  padding-right: 10%;
}


.foot{
min-height: 100%;
}


}