* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*border: 1px solid red;*/
}

html {
  height:100%;
  font-family: 'Open Sans', sans-serif;
}

body {
  margin:0;
}

.container {
  min-height: 100vh;
}

nav a {
  font-size: 40px;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  text-align: center;
}

nav img{
  width: 50%;
  height: auto;
}

nav {
  position: fixed;
  left: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100vh;
  /*background: white;*/
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  font-family: Lora, serif;
  font-size: 15px;
  visibility: hidden;
  width: 120px;
  background-color: rgba(255,255,255,0.5);
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(255,255,255,0.5) transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

section{
  position: absolute;
  top: 0;
  height: 100vh;
  width: 0;
  opacity: 0;
  transition: all width 3s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

section h1 {
  color: black;
  font-size: 2em;
  font-family: Lora, serif;
  opacity: 0;
  padding: 20px;
}

/* Styles applied on trigger */
section:target {
  opacity: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}

section:target h1{
  opacity: 0;
  animation: 1s fadeIn forwards .1s;
}

.content{
  display: block;
}

#first {
  position: absolute;
  display: flex;
  top: 0;
  height: 100vh;
  right: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#second {
  background: #1FA5FF;
}

#third {
  background: #39B2CC;
}

#fourth {
  background: #46B9B3;
}

#fifth{
  background: #79D24C;
}

@keyframes fadeIn {
  100% { opacity:1 }
}

/*primeira página*/

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

#first h1{
  color: black;
  font-size: 2em;
  font-family: Lora, serif;
  opacity: 0;
  animation: 1s fadeIn forwards .1s;
}

#first p{
  font-family: Raleway, sans-serif;
  letter-spacing: 2px;
  text-align: center;
  padding: 10px;
  opacity: 0;
  animation: 2s fadeIn forwards .3s;
}

/*segunda página*/

#about-myself{
  margin-left: 10em;
  margin-right: 5em;
  margin-bottom: 2em;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #0181D4;
  border-right: 1px solid #0181D4;
  background-color: rgba(255,255,255,0.3);
}

/* Style the buttons that are used to open the tab content */
.tab button {
  font-family: Raleway, sans-serif;
  background-color: rgba(255,255,255,0.3);
  float: left;
  border: none;
  /*border-right: 1px solid #0181D4;*/
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #089EFF;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #4BB8FF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  background-color: rgba(255,255,255,0.3);
  font-weight: bolder;
  line-height: 2em;
  padding: 6px 12px;
  border: 1px solid #0181D4;
  border-top: none;
}

.tcc{
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.tcc:hover{
  color: #0181D4;
}

@media only screen and (max-width: 800px) {
  #about-myself{
    width: 100vw;
  }

  .tabcontent{
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

/*terceira página*/

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin-left: 40%;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

/*quarta página*/

.grid{
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-auto-flow: column;
  padding: 5px;
}

.grid-item{
  display: inline-block;
  background-color: rgba(255,255,255,0.5);
  border: 2px solid #235c5a;
  border-radius: 25px;
  width: 6.2em;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  align-content: center;
}

#fourth img{
  width: auto;
  height: 1.6em;
}

.txt{
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6em;
  font-weight: bolder;
  text-align: center;
  line-height: 1.5em;
  padding: 5px;
}

#dsc{
  font-size: 0.7em;
}

.btn{
  display: block;
  font-family: Raleway, sans-serif;
  text-align: center;
  font-size: 0.6em;
  background-image: linear-gradient(to left, #31817f, #00BCD4);
  color: black;
  background-size: 150% 150%;
  height: 40px;
  width: 100%;
  border-radius: 25px;
  z-index: -1;
  transition: all 0.4s ease;
  cursor: pointer;
}

.decor{
  font-family: 'Roboto Mono', monospace;
  font-size: 1.1em;
  visibility: hidden;
}

.btn:hover .decor {
  visibility: visible;
}


@media only screen and (max-width: 1111px){
  
  #four{
    margin-left: 25%;
  }

  #contatoDiv{
    display: block;
    width: 100vw;
  }

  .grid-item{
    padding: 10px;
  }

  #fourth img{
    width: auto;
    height: 1em;
  }

}

/*quinta página*/

#fifth h1{
  padding: 5px;
  opacity: 1;
}

#fifth p{
  padding: 5px;
}

#fifth a{
  color: black;
  text-decoration: none;
}

#fifth a:hover{
  color: grey;
}

td{
  padding: 5px;
}

.img-crd{
  width: 20px;
  height: auto;
}


@media only screen and (max-width: 770px){

  #five{
    width: 100vw;
    margin-left: 20%;
  }

  table{
    overflow: auto;
  }

}