@font-face{
    font-family: 'Open Sans';
    src: url('./fonts/OpenSans-Bold.ttf');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
  overflow: auto;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block;} /* To remove the scrollbars */


  /* END OF RESET */
  /* END OF RESET */
  /* END OF RESET */
  /* END OF RESET */
  /* END OF RESET */

button{
  /* position:inherit; */
  background-color: inherit;
  border: none;
  text-decoration: inherit;
  font-family: inconsolata, sans-serif;
  /* text-shadow: */
    -2px -2px 0 #FFFFFF,
    2px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  padding:0px;
}

img{
  width: auto;
  height: auto;
  max-height: 30vh;
  max-width: 60vw;
}

h1{
  position: relative;
  display: inline-block;
  font-family: inconsolata, sans-serif;
  /* -webkit-text-stroke: 1px white; */
  /* text-shadow: */
    -2px -2px 0 #FFFFFF,
    2px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  color:black;
  font-size: clamp(30px, 4vW, 80px);
  /* font-size: 4vW; */
  /* width:50%; */
  /* letter-spacing: 1px; */
  z-index: 99;
}

h1:hover{
  transform: rotateX(180deg);
}

h2{
  position: relative;
  display:block;
  /* text-align: center; */
  font-family: inconsolata, sans-serif;
  color:black;
    -2px -2px 0 #FFFFFF,
    2px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  font-size: clamp(20px, 3.2vW, 35px);
  z-index: 99;
  width:max-content;
}

h2:hover {
  transform: rotateX(180deg);
}

h3{
  position: relative;
  font-family: inconsolata, sans-serif;
  /* -webkit-text-stroke: 1px white; */
  /* text-shadow: */
    -2px -2px 0 #FFFFFF,
    2px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  color:black;
  /* font-size: 1.5vW; */
  font-size: clamp(12px, 1.6vw, 24px);
  margin-left: 2vW;
  letter-spacing: 1px;
  z-index:4;
}

/* h3:hover {
  transform: rotateX(180deg);
} */

h4{
  position: relative;
  display:inline-block;
  font-family: inconsolata, sans-serif;
  color:black;
    -2px -2px 0 #FFFFFF,
    2px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  font-size: clamp(18px, 2.2vW, 28px);
  right: 0vW;
  bottom: 0vH;
  z-index: 99;
  background-color: white;
  width:max-content;
}

h4:hover {
  transform: rotateX(180deg);
}

.links{
  position:fixed;
  display:block;
  /* width:100%; */
  right: 1.5vW;
  bottom: 0;
  /* background-color: white; */
  z-index:99;
}

.linksPortfolio{
  position:fixed;
  display:block;
  width:100%;
  right: 1.5vW;
  bottom: 0;
  text-align: right;
  z-index:99;
}


/*
.links{
  position:absolute;
  width:100%;
  height: 100%;
  display:inline-block;
  left: 5vW;
  top: 80vH;
  bottom: 5vH;
  z-index:1334;
} */

#nome{
  background-color: transparent;
  position: fixed;
  display: inline-block;
  text-align: right;
  top: 3vH;
  left: 50vW;
  z-index: 1333;

}

#menu{
  position: fixed;
  z-index: 99
}

#text{
  position: absolute;
  margin-top: 9vW;
}

#aboutMeBox{
  display:none;
  position:absolute;
  overflow:scroll;
  top:5%;
  left:20vW;
  width:70%;
  height:100%;
  background-color: transparent;
  /* transform:rotate(10deg); */
  transform:rotate(0deg);
  z-index:10;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: move;
}

#aboutMeBox::-webkit-scrollbar {
  display: none;
}

#aboutMeText{
  position: relative;
  text-align: justify;
  width:80%;
  height:80%;
  /* padding: 5vH; */
  padding-left: 0vW;
  /* left: 2vW;
  top: 3vH; */
  /* transform:rotate(-10deg); */
  transform:rotate(0deg);
}

#projectos{
  position: absolute;
  /* display: flex; */
  /* display:inline-block; */
  left: 10vW;
  top: 20vH;
  /* width: fit-content; */
}

#som{
  position: absolute;
  left: 3vW;
  top: 25vH;
}

#imagem{
  position: absolute;
  left: 7vW;
  top: 30vH;
}

.aboutSom{
  display:none;
  position:absolute;
  overflow:scroll;
  top:10%;
  left:30vW;
  width:70%;
  height:90%;
  background-color: transparent;
  /* transform:rotate(6deg); */
  transform:rotate(0deg);
  z-index:10;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: move;
}

#aboutSom::-webkit-scrollbar {
  display: none;
}

.aboutImagem{
  display:none;
  position:absolute;
  overflow:scroll;
  top:10%;
  left:30vW;
  width:70%;
  height:90%;
  background-color:transparent;
  /* transform:rotate(6deg); */
  transform:rotate(0deg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: move;
}

#aboutImagem::-webkit-scrollbar {
  display: none;
}

.aboutProjectos{
  display:none;
  position:absolute;
  overflow:scroll;
  top:10%;
  left:30vW;
  width:70%;
  height:90%;
  background-color:transparent;
  /* transform:rotate(6deg); */
  transform:rotate(0deg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: move;
}

#aboutProjectos::-webkit-scrollbar {
  display: none;
}

.projectContainer{
  /* transform: rotate(-6deg); */
  transform:rotate(0deg);
  position:absolute;
  z-index: inherit;
  max-width: inherit;
  /* padding-top: 50vH; */
  /* display: inherit; */
}

.projectText{
  position: relative;
  display:inline-block;
  /* text-align: justify; */
  width:90%;
  height:100%;
  margin-left: 7vW;
  /* top: 1vH; */
  /* left:30vW; */
  /* padding-left: 20vW; */
  padding-top: 20vH;
  padding-bottom: 1vH;
  z-index: 99;
  /* display: block; */
}
/*
#projectoSom{
  padding-left:70vW !important;
  background-color: red !important;
} */

.fotoPerfil{
  display:flex;
  position: relative;
  justify-content: right;
  /* padding-top:3vH;
  padding-left: 10vW; */
  max-width: 50%
  /* height: auto; */
  /* padding-top: 15vH; */
  z-index:1;
}

.gif{
  position:relative;
  display: block;
  padding-top:3vH;
  /* padding-left: 10vW; */
  max-width: 50%;
  height: auto;
  /* padding-top: 15vH; */
  z-index:1;
}





p{
  position: relative;
  display: table;
  font-family: inconsolata, sans-serif;
  color: black;
  /* -webkit-text-stroke: 1px white; */
  /* text-shadow: */
    -2px -2px 0 #FFFFFF,
    1px -2px 0 #FFFFFF,
    -2px 2px 0 #FFFFFF,
    2px 2px 0 #FFFFFF;
  /* max-width: 80%; */
  /* font-size: 1.3vW; */
  font-size: clamp(11px, 1.3vw, 20px);
  margin-left: 2vW;
  letter-spacing: 1px;
  z-index: 4;
}

a{
  display: table;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}

#link{

}

#link :hover{
  transform: rotateX(180deg);
}

#c1{
  position: absolute;
  top:0px;
  z-index:-1;
}

#pfEmbed{
  position: relative;
  display: inline-block;
  margin-left: 2vW;
  width: 20%
  /*height:100%; */
  /* margin-left: 7vW; */
}

@media screen and (max-width:900px) {
 .projectContainer{
    margin-left: 0.1vw;
  }
  .img{
    width: 200px;
  }

  .gif{
    width: 700px;
  }

  .projectText{
    width:50%;
    margin-left: 1vw;
    margin-right: 0.5vw;
  }

  .fotoPerfil{
    width: 100%;
  }
}