/*FONTS*/
.libre-barcode-39-text-regular {
  font-family: "Libre Barcode 39 Text", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-regular {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-bold {
  font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}

.cherry-bomb-one-regular {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.coiny-regular {
  font-family: "Coiny", system-ui;
  font-weight: 400;
  font-style: normal;
}

a{
  text-decoration: none;
  color: inherit;
  font-style: inherit;
}

::selection{
  background-color: lightgray;
  color: #71ab23;
}

body{
  background-image: url('https://miro.medium.com/v2/resize:fit:1400/1*_zqJUXJaDneHRrXeXtR5vQ.webp');
  background-repeat: repeat;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-family: "Comic Relief", system-ui;
  color: white;
}

header{
  width: calc(100vw - 20px);
  padding-left: 20px;
  height: 10vh;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: 40px 40px 0 0;
  box-shadow: inset 5px 5px 15px 10px white;
  background: rgba(6,137,228,0.7);
}

header > .float{
  font-family: "Cherry Bomb One", system-ui;
  color: transparent;
  -webkit-text-stroke: 2px white;
  font-size: clamp(3rem, 4rem, 8rem);

  background: linear-gradient(
    150deg, 
    rgba(255, 0, 128, 0.7), 
    rgba(255, 140, 0, 0.5), 
    rgba(255, 255, 0, 0.7), 
    rgba(0, 255, 128, 0.5),
    rgba(0, 255, 255, 0.7), 
    rgba(128, 0, 255, 0.5)
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.wrapper{
  width: calc(100vw - 20px);
  height: fit-content;
  min-height: 50vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: space-around;
}

nav{
  width: 20%;
  height: fit-content;
  min-height: 50vh;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 10px;
  margin: 0;
  gap: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  border-radius: 0 0 0 40px;
  box-shadow: inset 5px -5px 15px 10px white;
  background: linear-gradient(
    180deg,
    rgba(6,137,228,0.7),
    rgba(6,137,228,0.7),
    rgba(113,171,35,0.5)
  );

}

button{
  width: 100%;
  min-height: 3vh;
  height: fit-content;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
  flex-wrap: wrap;
  
  border: 2px outset #0032db;
  background-image: linear-gradient(
    0deg,
    #0689e4,
    #0689e4,
    white
  );
  border-radius: 10px;
  box-shadow: inset 3px 3px 7px #0032db;
  
  color: white;
  text-shadow: 0px 0px 5px black;
  font-size: clamp(1rem, 1.5rem, 2rem);
  font-family: "Comic Relief", system-ui;
  }

button:hover{
  color: white;
  text-shadow: 5px 5px 10px black;
}

button.active{
  border: 2px outset #0689e4;
  background-image: linear-gradient(
    0deg,
    rgba(6,137,228),
    rgba(255,255,255)
  );
  border-radius: 10px;
  box-shadow: inset 3px 3px 7px #0689e4;
  text-shadow: 0px 0px 5px black;
}

section{
  width: 80%;
  height: fit-content;
  min-height: 50vh;
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 10px;
  margin: 0;
  gap: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  border-radius: 0 0 40px 0px;
  box-shadow: inset 5px -5px 15px 10px white;
  background: linear-gradient(
    180deg,
    rgba(6,137,228,0.7),
    rgba(6,137,228,0.7),
    rgba(113,171,35,0.5)
  );
  text-shadow: 1px 1px 5px darkslategrey;
}

.tab1{
  display: none;
}

.tab1.active{
  display: flex;
}

h2{
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  border: 2px offset #d55e0f;
  box-shadow: inset 0 0 5px 5px #d55e0f;
  background: linear-gradient(180deg,#d55e0f, white, #fbb905,#d55e0f);
}

footer{
  width: calc(100vw - 40px);
  height: 10vh;
  box-sizing: border-box;
  display: flex;
  margin: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  border-radius: 20px;
  box-shadow: inset -5px -5px 10px 10px black;
  background: #000000BB;
}

/*INDICATORS ID*/
#htmlncss{
  content:"";
}
#js{
  content:"";
}
#sql{
  content:"";
}
#db{
  content:"";
}
#other{
  content:"";
}

/*SPECIAL EFFECTS*/
.float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}