html,
body {
  max-width: 100vw;
  overflow-x: clip;
  margin: 0;
}

img {
  max-width: 70vw;
  height: auto;
  max-height: 60vh;
  margin: 8px;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size:40px;
}

.main {
  text-align: center;
  color: white;
}


.description {
  min-width: 100vw;
  /* overflow-x: hidden; */
  background-color: black;
}

.headingSection {
  padding-top: 50px;
  padding-bottom: 50px;
  width:80vw;
  margin: auto;
  margin-top: 5vh;

  background-color: rgba(60, 55, 55, 0.90);
  border-radius: 30px;
  margin-bottom: 40px;
}


a {
  text-decoration: none;
}

.button {
  height: 40px;
  width: 200px;
  border-radius: 20px;
  display: block;
  margin: auto;
  color: white;
  /*border: none;*/
  align: center;
  font-size:18px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  border-width: 0px;
  border-color:black;
}

.button:hover {
  /*borderColor: projectData["color"],*/
  border-style: solid;
  border-width: 2px;
  background-color: black;
}


.projectMain[secondarycolor="#21D833"] .button {
  background-color: #21D833;
}

.projectMain[secondarycolor="#21D833"] .button:hover {
  border-color:#21D833;
  background-color: white;
}

.projectMain[secondarycolor="#0505CD"] .button {
  background-color: #0505CD;
}

.projectMain[secondarycolor="#0505CD"] .button:hover {
  border-color:#0505CD;
  background-color: black;
}



.projectMain[secondarycolor="#FF6F59"] .button {
  background-color: #FF6F59;
}

.projectMain[secondarycolor="#FF6F59"] .button:hover {
  border-color:#FF6F59;
  background-color: black;
}



.projectMain[secondarycolor="#E34036"] .button {
  background-color: #E34036;
}

.projectMain[secondarycolor="#E34036"] .button:hover {
  border-color:#E34036;
  background-color: black;
}



.projectMain[secondarycolor="#120F21"] .button {
  background-color: #120F21;
}

.projectMain[secondarycolor="#120F21"] .button:hover {
  border-color:#120F21;
  background-color: black;
}



.projectMain[secondarycolor="#DD0000"] .button {
  background-color: #DD0000;
}

.projectMain[secondarycolor="#DD0000"] .button:hover {
  border-color:#DD0000;
  background-color: black;
}



.projectMain[secondarycolor="#33165C"] .button {
  background-color: #33165C;
}

.projectMain[secondarycolor="#33165C"] .button:hover {
  border-color:#33165C;
  background-color: black;
}



.projectMain[secondarycolor="#21D833"] .button {
  background-color: #21D833;
}

.projectMain[secondarycolor="#21D833"] .button:hover {
  border-color:#21D833;
  background-color: black;
}


.projectMain[secondarycolor="#ffca00"] .button {
  background-color: #ffca00;

}


.projectMain[secondarycolor="#ffca00"] .button:hover {
  border-color:#ffca00;
  background-color: black;
}

.button:not(:hover) {
  color: white;
}

.buttons {

  text-align:center;
}


.projectMainContainer {
  align-content: center;
  margin: auto;
  overflow-x: clip;
  margin-top: 50px;
  margin-bottom: 50px;
}


.projectMain {
  padding-top: 50px;
  padding-bottom: 50px;
  width:80vw;
  margin: auto;
  margin-top: 5vh;

  background-color: rgba(60, 55, 55, 0.90);
  border-radius: 30px;
}

.projectMain p {
  margin-left: 4vw;
  margin-right: 4vw;
}


.imageContainer[imagecount="1"] img {
  max-width: calc(90%);
  margin: auto;
}

.imageContainer[imagecount="2"] img {
  max-width: calc(40%);
}

.imageContainer[imagecount="3"] img {
  max-width: calc(26%);
}

.imageContainer[imagecount="4"] img {
  max-width: calc(17.5%);
}

.imageContainer[imagecount="1"][isphonescreenshots="true"] img {
  border-radius: 9vw;
}

.imageContainer[imagecount="2"][isphonescreenshots="true"] img {
  border-radius: 4.5vw;
}

.imageContainer[imagecount="3"][isphonescreenshots="true"] img {
  border-radius: 3vw;
}

.imageContainer[imagecount="4"][isphonescreenshots="true"] img {
  border-radius: 2.25vw;
}


.imageContainer[isphonescreenshots="true"] img {
  border: white 5px solid;
}

.phoneScreenshots img {
  border-radius: 20px;
  border: white 5px solid;
}

.whiteStripe {
  height: 10px;
  width: 90vw;
  margin:auto;
  /* background-color: #FFFFFF;*/
  position: relative;
  left: 0;
  margin-top: 20px;
  margin-bottom: 50px;
  
}

@media screen and (min-width: 800px) {

  .button { 
    display:inline-block;
    margin: 20px;
  }
}


@media screen and (min-width: 1000px) {
  .headingSection {
    width:75vw;
    border-radius: 40px;
  }

  .projectMain {
    width:75vw;
    border-radius: 40px;
  }

}



.backgroundDiv {
  position: fixed;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 100%; height: 100%;
  background-color: none;
  opacity: 100%;
}

.nodes {
  width: 100%;
  height: 100%;
}