@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Abel&family=Fugaz+One&display=swap');
@import url('https://fonts.googleapis.com/css2? família= Charmonman:wght@400;700 & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');





:root{
  --font1:verdana, geneva, tahoma,sans-serif;
  --font2:'Abel', sans-serif;
  --font3:'Fugaz One',cursive;
  --font4:'Charmonman', cursiva;
  /* declarando as fontes como variaveis  */
}
*{
  margin: 0px;
  padding: 0px;
}

html,body{
  min-height: 100vh;
  background-color: darkgray;
  font-family: var(--font3);
}

header{
  font-family: var(--font2);
  background-color: black;
  color: whitesmoke;
  text-align: center;
}
header>h1{
  font-size: 10vw;
  /* 10vw vai atualizar a fonte pra 10% da largura  no caso vai se adaptar a celulares dentre outros aparelhos com tela menor  */
  padding: 50px;
  /* o espaço entre o titulo e o top da pag */
  /* text-transform: uppercase; */
  /* joga tudo em letra maiuscula */
  font-variant: small-caps;
  /* todas as letras ficam  maiusculas mas as primeira ficam maiores  */
}
header>p{
  padding-bottom: 50px;
  /* fica 50px pra cima e 50px pra baixo fica simetrico */
}
header a,footer a{
  /* os  links afetados  por essa configuração seram apenas os localizados dentro do header  e do footer */
  color: whitesmoke;
  text-decoration: none;
  /* text-decoration: none;foi usado para tirar o sublinhado do link */
  font-weight: bold;
  /* font-weight: bolder;foi usado pra deixar a fonte em negrito */
}
a:hover{
  text-decoration: underline;
  color: goldenrod;
  /* text-decoration: underline pra quando passar o mouse encima aparecer o sublinhado; */
}
section{
  /* todas as sections receberam essas configurações primeiro , mas caso tenha instrução da  section abaixo a ultima prevalecera */
  
  padding: 30px 30px 30px 30px;
  /* vai ganhar 10% da padding encima e enbaixo de cada paragrafo */
  line-height: 1.5em;
  /* line-height:; e o espacamento entre as linhas ! */
  /* afastar o texto da borda  */
  font-size: 1.5em;
  font-family: 'Ubuntu Mono', monospace;
}
section.normal {
  /* todas sections da classe normal vão obter essa configuração */
  background-color: white;
  color: black;
}
section.imagem{
  /* toda as sections da clase image vão obter essa configurações */
  background-color: rgba(0, 0, 0, 0) ;
  color: aliceblue;
  box-shadow: inset 6px 6px 13px 0px rgba(0, 0, 0, 0.288);
  background-attachment: fixed;
}
section.imagem > p{
  padding: 12px;
  background-color: rgba(15, 15, 15, 0.432);
  display: inline-block;
 /* com display:inline-block o background-color:  se ajusta ate onde tem palavras muito util ! */
 text-shadow:1px 1px 1px rgba(0, 0, 0, 0.315) ;
}
section.normal>p{
  padding-bottom: 1em;
  /* espacamento entre os paragrafos */
}
section#img01{
  background-image: url(imagens/ocean.jpg);
  background-position: left center;
  background-size: cover;
}
section#img02{
 background-image: url(imagens/sea.jpg);
 background-position: left center;
 background-size: cover;
}
footer{
  background-color: black;
  color: white;
  font-weight: normal;
  text-align: center;
  padding: 12px;
  font-family: var(--font1);
}