/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 12, 2023 */

body {
  overflow-x: hidden;
  cursor: crosshair;
}

@font-face {
  font-family: 'canaroblack';
  src: url('./fonts/canaro-black-webfont.woff2') format('woff2'),
    url('./fonts/canaro-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canaro_bookbold';
  src: url('./fonts/canaro-bold-webfont.woff2') format('woff2'),
    url('./fonts/canaro-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canarobook';
  src: url('./fonts/canaro-book-webfont.woff2') format('woff2'),
    url('./fonts/canaro-book-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canarolight';
  src: url('canaro-light-webfont.woff2') format('woff2'),
    url('canaro-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canaromedium';
  src: url('./fonts/canaro-medium-webfont.woff2') format('woff2'),
    url('./fonts/canaro-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canarosemibold';
  src: url('canaro-semibold-webfont.woff2') format('woff2'),
    url('canaro-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'canarothin';
  src: url('./fonts/canaro-thin-webfont.woff2') format('woff2'),
    url('./fonts/canaro-thin-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

.canaro-book {
  font-family: canarobook !important;
}

.canaro-medium {
  font-family: canaromedium;
}

.canaro-bold {
  font-family: 'canaro_bookbold';
}

.canaro-black {
  font-family: 'canaroblack';
}

.bg-color {


  background-image: linear-gradient(to right, #7FFF94, #b6ff50, #00ddff);
  background-size: 500%;
  background-position: -100%;
  animation: animatedText 2s infinite alternate-reverse;
}

.bg-color:hover {
  background: rgb(0, 255, 208);
}

.logo {
  font-family: canaro_bookbold;
  font-size: 50px;


}

.animated {

  background-image: linear-gradient(to right, #7FFF94, #b6ff50, #00ddff);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  background-size: 500%;
  background-position: -100%;
  animation: animatedText 2s infinite alternate-reverse;
}

.preto {
  color: black !important;
}


.bg-gray {
  background-color: #2d2d2d !important;
}

.bg-gray:hover {
  background-color: #202020 !important;
}

.whats {
  border-radius: 1rem;
  border: 1px solid black;
  padding: 30px 60px 30px 60px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, #7FFF94, #b6ff50, #00ddff);
  color: black !important;
  text-decoration: none;
  width: 300px;

  background-size: 500%;
  background-position: -100%;
  animation: animatedText 2s infinite alternate-reverse;
}

.whats:hover {
  color: white !important;
  background-image: linear-gradient(to right, #7fffee, #50cbff, #8800ff);
}




@keyframes animatedText {
  from {
    background-position: 0%;
  }

  to {
    background-position: 100%;
  }

}


.line {
  display: block;
  width: 25px;
  height: 5px;
  background-color: rgb(0, 0, 0);
  margin: 8px auto;
  transition: .5s;
  border-radius: 2px;

}

.lineh {
  display: block;
  width: 40px;
  height: 5px;
  background-color: rgb(255, 255, 255);
  margin: 8px auto;
  transition: .5s;

}

.mouse {
  cursor: crosshair !important;
}

.augusto {
  background-image: url("./imagens/augusto.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 600px;

}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;

  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }

  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}