/* 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-color: steelblue;*/
  color: white;
  font-family: Courier;
  
  background-image: url('https://i.pinimg.com/1200x/bb/76/1e/bb761e5b1b255560a2e5690caa3c4894.jpg');
  /*background-attachment: fixed;*/
  background-repeat: repeat;
  /*overflow: hidden;*/
}

  .bodycontainer{
    /*main container (u may change the border image - link in description of video for more codes)*/
    background:rgba(23, 27, 31, .9);
    overflow-y:scroll;
    border-width:7px;
    border-style:solid;       
    margin: auto;
    width: 845px;
    max-height: 800px;
    position: absolute;
    top:27%;
    right: 3.5%;
    padding: 15px;
    z-index: 1;
  }

  .introtext {
   position: relative;  /* NOT absolute */
  }
  
    .goalscroll {
    /*overflow: scroll;*/
    overflow-x: hidden;
    overflow-y:scroll;
    background:rgba(142, 151, 156, .9);
    top: 150px;
    height: 200px;
    width: 445px;
    padding: 4px;
    position: absolute;
    border-top: 4px double #000;
    border-left: 4px double #000;
    border-right: 6px double #052e45;
    border-bottom: 6px double #052e45;
    z-index: 1;
    }

.circlehold {
width:100%;
height:155px;
position: absolute;
  top: 20px;          /* distance from the top */
  left: 50%;          /* start at the middle */
  transform: translateX(-50%);
}

.circletext {
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  padding:2px;
  position:relative;
  bottom:150px;
  width:300px;
  height:140px;
  margin:0 auto;
  z-index:2;
  text-shadow: rgb(0,0,0) 2px 0px 0px, rgb(192, 216, 255) 1.75517px 0.958851px 0px, rgb(2192, 216, 255) 1.0806px 1.68294px 0px, rgb(192, 216, 255) 0.141474px 1.99499px 0px, rgb(192, 216, 255) -0.832294px 1.81859px 0px, rgb(192, 216, 255) -1.60229px 1.19694px 0px, rgb(192, 216, 255) -1.97999px 0.28224px 0px, rgb(192, 216, 255) -1.87291px -0.701566px 0px, rgb(192, 216, 255) -1.30729px -1.51361px 0px, rgb(192, 216, 255) -0.421592px -1.95506px 0px, rgb(192, 216, 255) 0.567324px -1.91785px 0px, rgb(192, 216, 255) 1.41734px -1.41108px 0px, rgb(192, 216, 255) 1.92034px -0.558831px 0px;
  font-weight:bold;
}

.circle { 
  margin:0 auto;
  background:#c0d1ff;
  opacity:.5; /* feel free to remove this line if needed */
  /*position:relative;*/
  top:2px;
  width:300px;
  height:150px;
  transform: rotate(-10deg);
  border-radius:100%;
}

.navbar{
  background:#ebb326;
  /*opacity:.5; feel free to remove this line if needed */
  position:absolute;
  top: 20px;          /* distance from the top */
  left: 4%;
  width:100px;
  height:90px;
  /*transform: rotate(-10deg);*/
  border-radius:50%;
  
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  padding:4px;
  z-index:10;
  
}
  

a {text-decoration: none; color: pink; }