/* Hero */
#bg{
  width: 100vw;
  height: 60vh;
  overflow: hidden; 
  position: absolute;
  top: 0;
  pointer-events: auto;
  background: linear-gradient(#170944,#0d0c22,#030517);
  background: -webkit-linear-gradient(#170944,#0d0c22,#030517);
}

cell #c-7-7-1, #c-7-1-1, #c-7-5-1, #c-2-6-1, #c-3-5-1, #c-2-4-1, #c-3-6-1{
  display: none;
}

.intro{
  position: relative;
  padding: 20px;
  padding-top: 10vh;
  z-index: 2;
  pointer-events: none;
}

.name{
  margin: 0 auto;
  font-size: 7em;
  letter-spacing: 5px;
  font-weight: bold;
	color: var(--purple);
	text-shadow:  
		1px 1px #fbf0ff,2px 2px #fbf0ff,
		3px 3px #f5e4ff,4px 4px #f5e4ff,
		5px 5px #f0dcfc,6px 6px #f0dcfc;
  padding: 0px 3rem 1rem 3rem;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23BABBF2FF' stroke-width='8' stroke-dasharray='21%2c 15%2c 15%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  border: none;
}

.about{
  max-width: 1200px;
  width: 80%;
  padding-top: 1.5em;
  padding: 2em;
  margin: 5em auto;
  border: var(--border);
  text-align: left;
}

.about h1{font-size: 2.2em;}
.about p{
  font-size: 1.10em;
  pointer-events: auto;
}
.about p a{
  display: inline-block;
  color:#ff7a91;
}

/* Footer */

.footer{
  position: relative;
  top: 10em;}

.socials{
  position: relative;
  z-index: 4;
  padding: 0 10px;
  pointer-events: none;
}

.con{
  position: relative;
  top: -2em;
  margin: 0 auto;
  border: var(--border);
  padding: 1em 2em;
}

.sm{margin: 3em 0;}


.icon{
  pointer-events: auto;
  cursor: pointer; 
  background: var(--box-color); 
  border-radius: var(--b-radius);
  margin: 1em; 
  transition: .2s ease-in-out;  
  border: 1px solid transparent;
  padding: 10px;
}

a{  
  display: flex;
  text-decoration: none;
}

.icon:hover{
  border: var(--border);
  transform: scale(1.1);
}

.copyright{padding: 30px 0;}

.btn{
  border: var(--border);
  padding: .5em 1em; 
  text-align: center;
}

#bg_two{
  z-index: 0;
  width: 100vw;
  height: 340px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  pointer-events: auto;
  background: linear-gradient(#031117, #06051b, #091e44);
  background: -webkit-linear-gradient(#030517, #06051b, #091e44);
}

/* Responsive */

@media only screen and (min-width: 1400px){
  .name{font-size: 10em;}
  .g{grid-template-columns: auto auto auto auto;}
}

@media screen and (max-width: 732px){
  .boox{margin:0 1em; padding: 0px 2em .5em 2em;}
  .name{font-size: 5em;}  
  .copyright{padding-top: 0;}
  .g{display: flex}
}

@media screen and (max-width: 500px){
  .name{padding: 10px;}
  #bg_two{height: 400px;} 
  .footer,.con{top:0;}
}

@media only screen and (max-width: 320px){
  .name{font-size: 3.5em;}
}