@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Antic+Didone&family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Antic+Didone&family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Major+Mono+Display&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    justify-items: center;
    

    padding: 20px;
    scroll-behavior: smooth;
}

body{
  box-sizing: border-box;
  justify-content: center;
}

nav{
    display: flex;
    justify-content: center;
    gap: 10px; 
}


.studio{
    /* border-radius: 8px;
    background-color: #fff7f4;
    padding: 20px;
    text-align: center;
    color: #ea1833;
    font-family:"Pacifico", cursive;
    font-weight: 400;
    font-style: normal; 
    font-size: 50px;
     font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal; */

    box-shadow: black 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(234,24,51) 10px -10px, rgb(238,70,92) 20px -20px 0px -3px, rgb(242,116,133) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(247,163,173) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
    
    padding: 20px;
    text-align: center;
    color: #ea1833;
    font-family:"Pacifico", cursive;
    font-weight: 400;
    font-style: normal; 
    font-size: 50px;
     font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal
    
  }

  .sobre{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    border-radius: 8px;
  }

  .h1{
    text-align: center;
    font-family: "Amatic SC", sans-serif;
    font-size: 35px;
    
  }

  .vc{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    text-align: center;
    font-family: "Amatic SC", sans-serif;
    font-size: 35px;
    border-radius: 8px;
  }

  p{
    font-family: "Kodchasan", sans-serif;
    font-weight: 500;
    font-style: bold;
  }

.botao {
  background-color: transparent;
  border: 1px solid #d9335c;
  box-sizing: border-box;
  color: #644634;
  font-family: "Avenir Next LT W01 Bold",sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding: 16px 23px;
  position: relative;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 13px;
}

.botao:hover,
.botao:active {
  outline: 0;
}

.botao:hover {
  background-color: transparent;
  cursor: pointer;
}

.botao:before {
  background-color: #f5ccd6;
  content: "";
  height: calc(100% + 3px);
  position: absolute;
  right: -7px;
  top: -9px;
  transition: background-color 300ms ease-in;
  width: 100%;
  z-index: -1;
}

.botao:hover:before {
  background-color: #e26685;
  border-radius: 13px;
}

.gri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto); 
 
  
  justify-items: center;
  gap: 10px; 
}

.container {
  
  background-color: #fee6e3;
  border: 2px solid #e26685;
  border-radius: 8px;
  color: #111;
  padding: 20px;
  text-align: center;
  font-family: "Kodchasan", sans-serif;
  font-size: 16px;

  width: 100%;
    height: auto;
    object-fit: cover; 
    ;
    
    border-radius: 8px;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1px 0;
  position:fixed;
  bottom: 0;
  width: 100%;
    
}

.redes{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  border-radius: 8px;
}

.social{
  text-align: center;
  font-family: "Amatic SC", sans-serif;
  font-size: 35px;
  
}

.contato{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  border-radius: 8px;
}

.fale{
  text-align: center;
  font-family: "Amatic SC", sans-serif;
  font-size: 35px;
  
}
.um{
  border-radius:8px;
}


.um:hover{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.lo{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, auto); 
  justify-items: center;
  gap: 4px; 
  background-color: #f5ccd6;
    
}

form{
  text-align: center;
  font-family: "Kodchasan", sans-serif;
  font-size: 15px;
  box-sizing: border-box;
  align-items: center;
}

.enviar{
  border-radius: 20px;
  border-color: #e26685;
  color: #111;
 font-family:  "Amatic SC", sans-serif;
 font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding: 16px 23px;
  position: relative;
  padding: 16px 23px;
}


@media (min-width: 768px) {
  .botao {
    padding: 16px 32px;
  }
}