/*BLOG!!!!*/

body {
    font-family: 'rainyhearts', sans-serif;
    font-size:22px;
    max-width: 65rem;
    padding: 15px;
    margin: 0 auto;
    
    /* you can delete the line below if you'd prefer to not use an image */
    color: #fceaff; 
    background-image: var(--body-bg-image);
    background-color: #000000;
    
    
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #08031A;
    
}


:root {
    
    --body-bg-image: url('https://goats-and-dragons.neocities.org/BLOG!/imgs_blog/blog%20bg1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	 
    --stargif-image: url("https://goats-and-dragons.neocities.org/shrines/dragons/imgs_dragon/divider-drako.png");
    --content: #ffcb81;
    }
    
    
/*DA FLEX*/

#flex {
    display: flex;
}

.flex {
    display: flex;
    justify-content: center;
}

.doughael { 
   display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
   left: 0; 

}
#star_gif {
  background-image: var(--stargif-image);
  height: 70px;
  position: center;
}

.images{
 width: 80%;
 height: 80%;
  
}

.line1 {
    font-family: 'rainyhearts';
    background-image: linear-gradient(25deg, rgb(107, 160, 165), rgb(234, 176, 91), rgb(224, 76, 102, 0.80));
    text-align: left;
    padding: 5px;
    color: #ffffff;
    font-size: 30px;
    border: 2px solid #b19570;
}

#header {
    background-color: #2f05ff;
   
    border-color: #a9a9a9;
    border-width: 0 0 4px 0;
    
}

#header ul {
    list-style-type: none;
    padding: 0.5em 0;
    margin: 0;
}

#header li {
    font-size: 1.2em;
    display: inline-block;
    margin-right: 1.5em;
    
}

.box {
    background-color: #000000;
    border: 4px solid #ffffff;
    border-color: #ffffff;
    padding: 15px;
    width:68%;
    max-width: 100%;
    border-radius: 0px;
    position: center;
    overflow: auto;
    margin: 30px;
}

#contents {
    padding: 10px 5% 20px 5%;
}

.box2 {
   border: 2px solid #ED64F5;
    border-color: #ffcb81;
    padding: 15px; 
    background-color: #96abbe;
    position: center;
    border-radius: 10px; 
    overflow: auto;
    white-space: normal;
    margin: 30px
}

.char {
    border-radius: 30px;
    border: none;
    margin-right: 5px;
    width: 150px;
    height: 150px;
}  

/* Glass effect given by Clueless Expert on YT!*/

.glass{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


.glass-effect{
  width: auto;
  height: auto;
  background: radial-gradient(rgba(0,0,0,0), rgba(255,255,255,0.6));
  border-radius: 20px;
  filter: blur(4px);
  box-shadow: 5px 10px 20px rgba(0,0,0,0.6);
  padding: 20px;
  margin: 0 auto;
  
}

/* navigation section!! */
#navbar {
    height: 30px;
    background-color: #080808;
    /* navbar color */
    width: 10%;
    border-radius: 15px;
    outline: 5px;
    outline-color: #ffcb81;
    border: 2px solid #b19570;
    margin:40px;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 6px;
}

/* navigation links*/
#navbar li a {
    color: #ED64F5;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #ffcb81;
           
}

a:link {
    color: #ffffff;
    /* navbar text color */
    text-decoration: none;
    /* this removes the underline */
}

a:hover {
    color: #FFFFFF;
}

a:visited{
 color: #ffffff;
}

#flex {
    display: flex;
}


/*Fonts and stuff */

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}
@font-face {
  font-family: "DigitalDisco";
  src: url("https://goats-and-dragons.neocities.org/ttf/DigitalDisco.ttf");
}

@font-face {
  font-family: "Gothics";
  src: url("https://goats-and-dragons.neocities.org/ttf/Gothic.ttf");
}

@font-face {
  font-family: "Brassia";
  src: url("https://goats-and-dragons.neocities.org/ttf/Brassia-Regular.ttf");
}

@font-face {
  font-family: "Gloria";
  src: url("https://goats-and-dragons.neocities.org/ttf/Gloria[1].ttf");
}

@font-face {
  font-family: "Ruigs";
  src: url("https://goats-and-dragons.neocities.org/ttf/Ruigslay[1].ttf");
}




h1,h2,h4,h5 {
    color: #ffffff;
    text-align: left;
    font-family: DigitalDisco ;
    
}

h1 {
    font-size: 35px;
}
h2 {
   font-size:29px;
}  
h5 {
  font-size: 20px;
}

strong {
    /* this styles bold text */
    color: #ED64F5;
}


    /* width */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      }

    /* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
 
    /* Handle */
   ::-webkit-scrollbar-thumb {
   background: linear-gradient(25deg, rgb(250, 221, 164), rgb(203, 170, 154), rgb(137, 149, 165, 0.80));
   border-radius: 10px;
}

   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
  background: #ffFFFF; 
}


/*da root*/



/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
#container {
    max-width: 900px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
}