@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap");

	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  font-family: "Open Sans", sans-serif;
	}

	html {
	  font-size: 62.5%;
	}

	.whoIsWatching {
	  width: 100vw;
	  min-height: 100vh;
	  background-color: #141414;
	}

	.logo-section {
	  width: 95vw;
	  margin: auto;
	  height: 7rem;
	  background-color: rgb(20, 20, 20);
	  /* background-color: red; */
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	}
	.logo-section a img {
	  width: 10rem;
	  height: 4rem;
	  cursor: pointer;
	}

	.main-div {
	  width: 100vw;
	  height: 80vh;
	  /* background-color: rosybrown; */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	  color: #fff;
	}

	.main-div h1 {
	  font-size: 6.5rem;
	  letter-spacing: 0.2rem;
	  font-size: 600;
	}

	.memberDiv {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-wrap: wrap;
	}

	.memberDiv .btn,
	.addIcon {
	  height: 10vw;
	  min-height: 8.4rem;
	  max-height: 20rem;
	  width: 10vw;
	  min-width: 8.4px;
	  max-width: 20rem;
	  border-radius: 0.4rem;
	  border: none;
	  outline: none;
	  margin-top: 4rem;
	  margin-right: 3.5rem;
	  position: relative;
	  cursor: pointer;
	  background-repeat: no-repeat;
	  background-size: cover;
	}

	.memberDiv .btn:nth-child(2) {
	  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg");
	}

	.memberDiv .btn:nth-child(3) {
	  background-image: url("https://images.seeklogo.com/logo-png/35/2/jupyter-logo-png_seeklogo-354673.png");
	}

	.memberDiv .btn:nth-child(4) {
	  background-image: url("https://images.seeklogo.com/logo-png/49/2/overleaf-logo-png_seeklogo-499397.png");
	}

	.memberDiv .btn:nth-child(5) {
	  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Git_icon.svg/2048px-Git_icon.svg.png");
	}

	.memberDiv .btn:nth-child(7) {
	  background-image: url("https://avatars.githubusercontent.com/u/67865462?s=280&v=4");
	}

	.memberDiv .btn:nth-child(6) {
          background-image: url("https://play-lh.googleusercontent.com/-jz18EgBYlmeHlnsq_iltq6uLnYFtXAVR_gi_d0qEj0pANQ1MtrJIstJoCQtImlWKwc=w240-h480-rw");
        }

	.memberDiv .btn:nth-child(8) {
          background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Diagrams.net_Logo.svg/2048px-Diagrams.net_Logo.svg.png");
        }

	.memberDiv .btn:nth-child(11) {
          background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Kanboard_icon.svg/800px-Kanboard_icon.svg.png");
        }
	.memberDiv .btn:nth-child(9) {
          background-image: url("https://play-lh.googleusercontent.com/XMhEdZTmiBo2GrR6LnYuoi1bZG0yoKejVtLWxSn11ButjzJP5Q87deGoKmvlbMTgiDng=w240-h480-rw");
        }

	.memberDiv .btn:nth-child(10) {
          background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/31/Apache_Guacamole_logo.png");
        }

	.memberDiv .btn:nth-child(12) {
          background-image: url("./image.png");
        }

	.memberDiv .btn:nth-child(1) {
          background-image: url("./icon.png");
        }

.memberDiv .btn:hover {
  box-shadow: inset 0 0 0 5px rgba(28, 28, 28, 0.9);
}

.memberDiv .btn span,
.addIcon span {
  width: inherit;
  /* background-color: red; */
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  text-transform: capitalize;
  color: rgb(153, 153, 153);
  font-size: 2rem;
}

.fa-plus-circle {
  font-size: 7vw;
  color: grey;
  opacity: 0.8;
}

.addIcon {
  background-color: transparent;
}

.addIcon:hover{
  background-color: #fff;
}

.addicon:hover > .fa-plus-circle {
  opacity: 1;
}

.manageProfile {
  border: 1px solid grey;
  color: grey;
  text-transform: uppercase;
  padding: 0.8rem 2.6rem;
  letter-spacing: 0.5rem;
  font-size: 2.5rem;
  margin-top: 12rem;
  background-color: transparent;
  cursor: pointer;
}
.manageProfile:hover {
  border: 1px solid #fff;
  color: #fff;
}