/* 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." */

/*This is my General formating code*/
body {
  background-color: pink;
  color: white;
  font-family: Verdana;
  Margin-left: 0px;
  margin-top: 0px;
  margin-right: 50px;
}

h1 {
  color: Purple;
  margin-left: 0px;
}

a:link {
  Color:White;
}

ul {
  list-style: disc; /*I can upgrade this to a marker for better looking bullet points*/
  padding: 0;
}
/*End General formating code*/



/*This is my sidebar code*/
.sidebar {
  margin: 200;
  padding: 0px;
  width: 200px;
  background-color: Pink;
  position: fixed;
  height: 100vh;
  overflow: auto;
  z-index: 1000;
  Left: 0;
  margin-top: 0px;
  border: 5px white;
}

.sidebar a {
  display: block;
  color: Purple;
  padding: 16px;
  text-decoration: none;
  
}

.sidebar a.active {
  background-color: Purple;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: white;
  color: purple;
}

div.content {
  margin-left: 230px;
  padding: 1px 16px;
  height: 1000vh;
  margin-top: 100px;
}



@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: Fixed;
  }
  .sidebar a {float: Left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
/*End sidebar code*/



/*This is my Columns code*/
*{
  Box-sizing: border-box;
}

.column {
  float: left;
  width:50%;
  padding: 50px;
  
  
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
/*End Columns code*/


/*This is my Lists code*/
div.cenlist {
  text-align: center;
}

ul.leftbullets {
  display: inline-block;
  text-align: left;
}
/*End Lists code*/


/*This is my Guestbook code*/
body
        {
            height: 100vh;
            text-align: center;
            align-items: center;
            flex-direction: column;
            display: flex;
        }
        textarea
        {
            scroll-behavior: auto;
        }
        .option
        {
            background-color: rgb(255, 255, 255);
            font-size: large;
        }
        #button input
        {
            background-color: purple;
            color: white;
            border:2px solid white;
            font-size: large;
        }
        #container
        {
            background-image:lineargradient(to bottom, white, rgb(176, 176, 240));
            width: 40%;
            border: 2px solid rgb(186, 186, 253);
            height: 500px;
        }
/*End Guestbook code*/