* {
 
  box-sizing: border-box;
}
:root {
  --primary: rgb(252, 100, 2);
  --secondary: rgb(78, 43, 19);
  --nipponcolors: rgb(182, 19, 0);
  --secondarynippon: rgb(242, 226, 200);
  --blackpanther: rgb(102, 78, 174);
  --wakandaforever: rgb(12, 11, 19);
}


header {
  /* background-color: #968565; */
  background-image: url(../AvengersImages/headernologo.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  margin: 0;
  padding: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  /* opacity: 0.6; */
}
header nav {
  display: flex;
  flex-direction: row;
  flex-basis: calc(50% - 1em);
  padding: 5px 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 75px;
}
header h1 {
  text-align: center;
  position: relative;
  top: 60px;
  text-shadow: 2px 2px 2px black;
  color: lavenderblush;
  font-size: 72px;
}

.About video {
  padding: 15px;
  margin: auto;
}
/* header img{
  
} */
section {
  display: block;
}

section h2 {
  margin-top: auto;
}

/* #floatright{
  float: right;
} */

#kicking {
  float: left;
  margin: 2px;
  /* max-width:400px */
}

#floatbodyleft {
  padding: 18.2px;
  border: solid 2px var(--blackpanther);
  display: inline-flex;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

#crosshands {
  position: relative;
  right: -45px;
  top: 250px;
  /* margin-top:20px; */
  /* max-width:400px; */
}
.name{
  background-color: whitesmoke;
  border: 4px solid var(--blackpanther);
  color: var(--primary);
}

html{
  scroll-behavior: smooth;
}

#motto{
  background-color: rgb(255, 255, 255);
  border: solid 2px var(--blackpanther);
  display: inline-flex;
  margin-left: 45%;
  position: relative;
  right: 685px;
  /* margin-right: 30%; */
}
.workinglink a {
  padding: 8px 10px;
  margin: 90px;
  font-size: 32px;
  display: inline-flex;
  flex-direction: row;
  /* margin-bottom: auto; */
  /* margin-right: 60px;
        padding-bottom: 10px; */
  /* justify-content: space-between; */
  align-items: center;
  border-image: linear-gradient(to right, #3353d0 0%, #ff5151 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: px;
  border-style: groove;
  padding: 8px;
  background-image: linear-gradient(
    275deg,
    var(--secondarynippon) 0%,
    var(--nipponcolors) 100%
  );
  transition: all 0.4s ease-in;
  text-decoration: none;
}

.workinglink img {
  width: 11%;
  height: 11%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  object-fit: cover;
  /* width:100%;
    height: 76%; */
}

.workinglink a:hover {
  background-image: linear-gradient(
    275deg,
    var(--wakandaforever) 0%,
    var(--blackpanther) 100%
  );
  color: white;
  transition: all 0.4 ease-out;
  text-decoration: none;
}

.boxshadows{
  border: 4px solid var(--blackpanther);
  background-color: whitesmoke;
  display: inline-block;
  box-shadow: 10px 5px 5px grey;
}

.boxshadows2 {
  border: 4px solid var(--blackpanther);
  background-color: whitesmoke;
  box-shadow: 10px 5px 5px grey;
  margin-right: auto;
  margin-left: auto;
  display: block;
  text-align: center;
  font-size: 35px21;
}
.creativebg img {
  width: 80%;
  height: 80%;
  background-size: cover;
}
x img {
  width: 30%;
  height: 30%;
}

.links {
  text-align: center;
}

main{
  text-align: center;
  font-size: xx-large;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* .links2 a {
        text-decoration: none;
        display: inline-block;
        flex-grow: 1;
        margin: 0 0.5em;
        border:solid;
        text-align:center;
        
      } */

body {
  background-image: url(../AvengersImages/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
  color: var(--primary);

  /* background: rgb(242,52,52);
    background: linear-gradient(90deg, rgba(242,52,52,1) 4%, rgba(171,48,41,1) 38%, rgba(179,94,45,1) 62%, rgba(153,77,30,1) 79%, rgba(115,61,27,1) 100%);
    font-size: 20px; */
}

/* #about {
  border: 3px solid var(--nipponcolors);
} */

/* #contact{
 bottom: 2px;
 text-align: center;
} */

.provide {
  margin-bottom: 4px;
}

/* .reachout img {
    height:5%;
    width:5%;
} */

#thisisus {
  position: relative;
  left: -385px;
  top: 21px;
}

#signup-btn{
  display: flex;
  position: absolute;
  left: 50%;
  right:50%;
  
  font-size: xx-large;
}

.footer {
  background-color: black;
  padding: 20px 6% 20px 0;
  text-align: center;
  text-decoration: underline;
  font-size: 32px;
  justify-content: space-around;
}

@media screen and (max-width: 768px) {
  #video-containter {
    flex-direction: column;
    text-align: center;
  }
  video {
    height: 75%;
    width: 75%;
  }
  #floatbodyleft {
    font-size: 28px;
    padding: 18.2px;
    float: left;
  }
}

#subscribe{
  text-align: center;
  padding: 25px;
  display:flex;
  justify-content: center;
}
/* h1 {
    color: purple;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif 
} */
/* } */
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/* please work */

.about-section {
  text-align: center;
}
.overlay-text h2 {
  font-size: 2em;
  margin-bottom: 10px;
  text-align: center;
  background-color: white;
  margin-left: 750px;
  margin-right: 750px;
}

.overlay-text p {
  font-size: 1.5em;
  margin-bottom: 20px;
  margin-left: 500px;
  margin-right: 500px;
  color: black;
  background-color: white;
}

.team {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.team-member {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 200px;
  text-align: center;
  font-size: 1.5em;
  color: black;
  background-color: whitesmoke;
}

.team-photo {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.name {
  font-weight: bold;
  margin-bottom: 5px;
}

.description {
  font-size: 0.7em;
  color: var(--primary);
}
#contact {
  width: 150%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  bottom: 2px;
  text-align: center;
  background-color: white;
}

#contact h2 {
  text-align: center;
  font-size: 3em;
}

.contact-detail {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.contact-icon {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: white;
}

.contact-detail p {
  margin: 0;
  font-size: 0.5;
}

/* body {
  background-image: url(../AvengersImages/istockphoto-495868375-612x612.jpg);
  background-repeat: no-repeat;
  background-size: cover; */
/* background: rgb(242,52,52);
    background: linear-gradient(90deg, rgba(242,52,52,1) 4%, rgba(171,48,41,1) 38%, rgba(179,94,45,1) 62%, rgba(153,77,30,1) 79%, rgba(115,61,27,1) 100%);
    font-size: 20px; */
/* } */

/* h1 {
    color: purple;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif 
} */
/* } */
/* @tailwind base;
@tailwind components;
@tailwind utilities; */

#schedule {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#center {
  margin: 0 auto;
}
#video-container {
  position: relative;
  /* width: %; */
  margin: 0;
  padding: 0;
}

video {
  width: 100%;
  height: auto;
  opacity: 0.8;
}

/* #fightScene {
  opacity: 0.8;
  width: 100%;
  margin: 0;
  padding: 0;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  text-align: center;
} */

/*MAP STYLING  */
#map {
  width: 100%;
  height: 400px;
}