/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
body {
  background-image:url("imagens/tinystars.gif"), linear-gradient(to bottom,rgb(73, 98, 166),rgb(157, 183, 255));
  color: black;
  font-family: "Sour Gummy","Sofia","Courier New";
  
}

/* Cabeçalho e navegação */
  .cabeçalho {
    color: gold;

    /* I learned these from swek, it creates a box! It's neat!*/
    border: 6px double;
    background-image: url("imagens/tinystars.gif"), linear-gradient(to bottom,rgb(34, 34, 128),rgb(82, 82, 218));
      
    display: flex; /* This allows things to be on the same line :v */
    gap: 30px; /* As the name indicates it gives a GAB between the words */
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1440px;
    border: 5px groove gold;

    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 2px black;
  }

  /* Navegação do cabeçalho */
  .nav {
    font-size: 20px; 
    font-weight: 700; /* I like thickness */
    margin-top: 20px;
    margin-right: 10px;
    /* animation: mymove 1s infinite; */
  }
  /* @keyframes mymove {
    50% {font-size: 40px;}
  } */

  .nav a{
    color: white;
    opacity: 0.5;
  }

  .nav a:hover {
    color: gold;
    opacity: 1;
    font-size: 115%;
  }
  
  .nav a:active{
    color: goldenrod;
  }

/* Titulos  */
  .siteName{
    color: gold;
    margin-left: 10px;
  }

  .titulo {
    text-align: center;
  }
  .titulo2, .titulo {
    color: gold;
    text-shadow: 2px 2px black;
  }

  .titulo3 {
    color: gold;
    text-shadow: 2px 2px black;
    text-align: center;
  }

/* Caixas de index */
  .shortbio {
    color: aliceblue;
    max-width: 900px;
    width: 90%;
    padding: 7px;
    margin: 25px;
    margin-left: auto;
    margin-right: auto;

    background-color: rgba(34, 34, 128, 0.6);
    border: 6px double;
    display: flex;
    gap: 10px;
    text-shadow: 2px 2px black;
  }

  .eversweet {
    align-items: center;
    background-color: rgba(34, 59, 128, 0.6);
    border: 5px outset rgb(252, 210, 74);
    width: 90%;
    max-width: 1240px;
    color: beige;
    text-align: center;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    text-shadow: 2px 2px rgb(0, 0, 0);
  }

  .aboutme_2 {
    align-items: center;
    background-color: rgba(34, 59, 128, 0.6);
    border: 5px outset rgb(252, 210, 74);
    width: 90%;
    max-width: 1440px;
    color: beige;
    /* text-align: center; */
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    text-shadow: 2px 2px rgb(0, 0, 0);
  }

/* Characters */
  .block {
    display: flex;
    /* margin-top: 25px; */
  }

  .aboutme {
    background-image: url("imagens/yellowstars.gif");
    margin: 50px auto;
    border: 5px ridge;
    padding: 30px;
    width: 90%;
    max-width: 1440px;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    border-radius: 20px;
  }

  .abouttext {
    color:aliceblue;
    border-color:rgba(34, 34, 128, 0.6) ;
    background-image: linear-gradient(rgba(34, 34, 128, 0.95),rgba(126, 161, 255, 0.9));
    border: 5px double;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px 9px rgba(0, 0, 0, 0.7);
  }

  .mediaback {
    background: rgba(34, 34, 128, 0.6);
    padding: 1px;
    border: 10px ridge;
    color: rgb(97, 97, 255, 1);
    margin: 20px;
    box-shadow: 0px 0px 15px 9px rgba(0, 0, 0, 0.7);
  }

  .bonground {
    background-image: url("purpleanimstar.gif");
  }

  .reduce {
    display: inline;
    color: darkgray;
    opacity: 1;
    font-size: 85%;
     text-shadow: 1px 1px darkblue; 
 }

  .highlight {
    color: gold;
    font-size: large;
    display: inline;
  }

 .textbox {
    color: aliceblue;
    text-shadow: 1px 1px rgb(0, 0, 0);
    font-size: larger;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
 }

 .title {
    color: gold;
    text-shadow: 2px 2px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    text-align: center;
 }

 .characterbox {
    background-image: linear-gradient(rgba(62, 34, 88, 0.75),rgba(175, 126, 255, 0.75));
    border: 7px outset;
    max-width: 1440px;
    width: 90%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }
 
 .character_media {
    border-radius: 15px;
    border: 5px outset;
    border-color: gold;
 }

  .characterbox_Cinnamon {
    background-image: linear-gradient(rgba(168, 62, 0, 0.75),rgba(255, 184, 126, 0.75));
    border: 7px outset;
    max-width: 1440px;
    width: 90%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }

  .characterbox_William {
    background-image: linear-gradient(rgba(87, 160, 38, 0.75),rgba(184, 255, 126, 0.75));
    border: 7px outset;
    max-width: 1440px;
    width: 90%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 } 

 .characterbox_Luna {
    background-image: linear-gradient(rgba(255, 246, 165, 0.75),rgba(40, 124, 23, 0.75));
    border: 7px outset;
    max-width: 1440px;
    width: 70%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }

 .characterbox_Anita {
    background-image: linear-gradient(rgba(167, 30, 30, 0.75),rgba(255, 147, 147, 0.75));
    border: 7px outset;
    max-width: 1440px;
    width: 50%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }
 .characterbox_Shai {
    background-image: linear-gradient(rgba(34, 34, 128, 0.95),rgba(126, 161, 255, 0.9));
    border: 7px outset;
    max-width: 1440px;
    width: 50%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }

 .character_Bon {
    /* background-image: linear-gradient(rgba(62, 34, 88, 0.75),rgba(175, 126, 255, 0.75)); */
    background-image: url(imagens/purpleanimstar.gif);
    border: 7px outset;
    max-width: 1440px;
    width: 90%;
    border-color: rgb(255, 233, 108);
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
 }
 /* .characterbox :hover {
  font-size: 115%;
  width: 100%;
  
 } */

 @media (max-width: 600px) {
  .shortbio, .eversweet {
    flex-direction: column;
    align-items: center;
  }
 }

  .eversweet img, .characterbox img ,.characterbox_Cinnamon img, .characterbox_Luna img, .characterbox_William img {
    max-width: 90%;
    height: auto;
}