@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

body {
    background-color: black;
    color: white;
    font-family: spectral;

}

hr {
    margin-top: 70px;
    max-width: 100%;
    width: 750px;




}

details {
    font-size: 14px;
    padding: 20px;
    color: darkgrey;
}

#title {
    font-size: 25px;
    text-align: center;
    margin-bottom: 100px;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: auto;
    margin-bottom: 100px;
    /* Gives that scrolling effect as the typing happens */

    animation:
        typing 4.5s steps(80, end),
        blink-caret .75s step-end infinite;

}

#bottom {
    font-size: 25px;
    text-align: center;
    margin-bottom: 100px;

}



/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}




#nav {

    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    font-family: spectral;
    font-weight: bold;
    font-size: 100%;


    left: 0;
    right: 0;
    padding: 10px;
    max-width: 100%;

    background-color: black;

    position: fixed;
    top: 0;
    overflow-y: auto;
    /* Allow scrolling within element if needed */



}

#nav a {
    color: white;
}



#container {
    max-width: 100%;
    width: 750px;
    height:  0 auto;

    margin: 0 auto;


}



.textboxes {

    font-size: 100%;
    padding: 20px;
    border: 1px solid #404241;
    background-color: #181818;
    line-height: 170%;
    margin: 0 auto;
    display: block;
    max-width: 82%;
    width: 650px;
    justify-content: left;


}

.textbox2 {

    font-size: 100%;
    padding: 20px;

    background-color: #2c2c2c;
    line-height: 170%;
    margin: 0 auto;

    max-width: 82%;
    width: 650px;
    justify-content: left;


}

.Juraci {
    color: #aaf6f6;
    text-align: left;


}

.Juraci_thoughts{
    color:#689595;
    text-align: left;


}

.Deglantine {
    color: #ead1dc;

    text-align: left;
}


.pinkinvestor {

    color: #e19f9f;

    text-align: left;
}

.greeninvestor {
    color: #bcc4a1;

    text-align: left;
}

.blueinvestor {
    color: #cfe2f3;

    text-align: left;
}

.yellowinvestor {
    color: #fff2cc;

    text-align: left;
}

.vert1 {


    font-family:"Raleway";
    font-size: 16px;
    letter-spacing:1px;


   
 
font-weight: normal;
    color: white;
    text-shadow: 0 0 10px hotpink, 0 0 10px;
    -moz-text-shadow: 0 0 60px hotpink, 0 0 7px;
    -webkit-text-shadow: 0 0 60px hotpink, 0 0 7px;
    -o-text-shadow: 0 0 60px hotpink, 0 0 7px;




}


.vert2 {

 font-family:"Oswald";

    font-size: 19px;

    color: lightblue;
    text-shadow: 0px 0px 10px blue, 0px 0px 10px;
    -moz-text-shadow: 0px 0px 60px blue, 0px 0px 7px;
    -webkit-text-shadow: 0px 0px 60px blue, 0px 0px 7px;
    -o-text-shadow: 0px 0px 60px blue, 0px 0px 7px;

}

.vert3 {


    font-style: italic;
    font-size: 19px;

    color: indianred;
    text-shadow: 0px 0px 60px red, 0px 0px 50px;
    -moz-text-shadow: 0px 0px 60px red, 0px 0px 7px;
    -webkit-text-shadow: 0px 0px 60px red, 0px 0px 7px;
    -o-text-shadow: 0px 0px 60px red, 0px 0px 7px;

}

.vert0 {
     font-family:"oswald";
    font-size: 19px;

    color: white;
    
}


.courier-prime-regular {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: normal;
}

.courier-prime-bold {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-style: normal;
}

.courier-prime-regular-italic {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: italic;
}

.courier-prime-bold-italic {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-style: italic;
}



#textcontainer {
    margin: 0 auto;
    width: 650px;

    max-width: 90%;
    padding: 20px;



}

.red {
    color: #ff5454;

    margin: 0 auto;
}

.white {
    color: white;
    width: 100%;
    display: inline;


}

.grey {
    color: darkgrey;
    float: right;

    display: inline;
    text-align: right;
    width: 100%;


}

img {

    display: flex;
    max-width: 100%;


    justify-content: center;
    align-items: center;

    margin: 0 auto;

    vertical-align: middle;
    border-style: none;




}