/* Style the top navigation bar */
.topnav {
    margin-top: 0px;
    overflow: hidden;
    background-color:black;
    background-image: 
    radial-gradient(ellipse 40% 1000%, rgba(205, 154, 221, 0.5), transparent), 
    linear-gradient(rgba(159, 254, 129, 0.73), rgba(4, 81, 51, 0.73)),
    url('/images/Checker.png');
    background-size: auto, auto, 23px;
    border-top: 3px solid rgba(84, 50, 85, 1);
    border-bottom: 3px solid rgba(84, 50, 85, 1);
    text-align: center;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:4%;
  }
  
  /* Style the topnav links */
  .topnav a {
    width:auto;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    border:3px solid rgba(67, 46, 88, 1);
    border-radius:10px;
    background-image:
    linear-gradient(rgba(191, 86, 111, 1), rgba(155, 44, 101, 1));
    background-size:auto;
    padding-bottom:10px;
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    margin-top:0px;
    margin-bottom:0px;
    text-decoration: none;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size:20px;
  }
  
  /* Change color on hover */
  .topnav a:hover {
    background-image: 
    linear-gradient(rgba(119, 179, 205, 1), rgba(81, 125, 185, 1));
    text-decoration: none;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size:20px;
    color: white;
    border-radius:10px;
  }
  
  /* List style */
  .nav_button {
    list-style: none;
    display: inline-block;
    margin-bottom:0px;
    margin-top:4px;
    overflow:hidden;
  }
  .nav_button li {
    float: left;
    margin: 0 10px 0;
    vertical-align:center;
  }
  .nav_button li a {
    color: white;
  }


  /* BACKGROUND */

  body {
    background-color: rgb(169, 214, 255);
    background-image:linear-gradient(to bottom, rgb(169, 214, 255) , rgb(68, 116, 189));
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding:0px;
    margin:0px;
    overflow:auto;
  }

  /* MAIN BODY */

  .choco-mainbody {
    border-left:4px solid rgb(243, 182, 49);
    border-right:4px solid rgb(243, 182, 49);
    border-bottom:4px solid rgb(243, 182, 49);
    border-top:4px solid rgb(243, 182, 49);
    outline:2px solid rgb(71, 32, 17);
    background-color:rgb(87, 37, 21);
    background-image: 
    radial-gradient(ellipse 60% 1000%, rgba(184, 112, 79, 0.5), transparent),
    linear-gradient(to top, rgb(54, 12, 5, 0.7), rgb(87, 37, 21, 0.7)), 
    url('/images/DiamondBG.png');
    background-size:auto, auto, 15px 23px;
    margin:auto;
    margin-bottom:40px;
    width:1100px;
    text-align:center;
  }

  .choco-flexbox {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  .choco-mainbody-title {
    text-align: center;
    margin:10px;
    color:rgb(255, 241, 212);
    text-shadow:-4px 3px black;
    font-size: 37px;
    font-weight: 900;
    font-family: "Playfair Display", "Trebuchet MS", serif;
    text-shadow: rgb(54, 12, 5);
  }

  .choco-headerwrapper {
    
    background-color:rgb(87, 37, 21);
    background-image: 
    radial-gradient(ellipse 60% 1000%, rgba(184, 112, 79, 0.5), transparent),
    linear-gradient(to top, rgb(54, 12, 5, 0.7), rgb(87, 37, 21, 0.7)), 
    url('/images/DiamondBG.png');
    background-size:auto, auto, 15px 23px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    margin-bottom:2px;
    width:1100px;
    padding-top:20px;
    padding-bottom:20px;
    clip-path: polygon(
    0 20%,
    10% 0,
    90% 0,
    100% 20%,
    100% 100%,
    100% 100%,
    0 100%,
    0% 0,
    0% 0
    )
  }

  /* BOX */

  .choco-box {
    
    margin-right:25px;
    margin-bottom:25px;
    margin-top:15px;
	  background-image:linear-gradient(rgba(243, 237, 239, 1), rgb(231, 215, 206));
	  border:3px solid rgb(71, 32, 17) !important;
	  border-radius:10px;
  }

  .choco-boxtext {
    text-align: center;
    margin:15px;
    font-size: 18px;
    font-weight: 400;
    font-family: "Rubik", "Trebuchet MS", sans-serif;
  }

  /* BAR */

.choco-bar {
    height:2px; 
    width:90%;
    border-width:0;
    color:rgb(243, 182, 49);
    background-color:rgb(243, 182, 49);
  }


  /* BUTTON */
  .choco-button {
    width:150px;
    background-image: linear-gradient(rgb(138, 59, 59), rgb(73, 11, 37));
    border:4px solid rgb(70, 33, 42);
    border-radius:5px;
    font-family: "Raleway", sans-serif;
    font-weight:900;
    font-size:28px;
    color:white;
    padding-top:17px;
    padding-bottom:17px;
    margin:5px;
    text-decoration: none;
  }
  
  .choco-button:hover {
    width:150px;
    background-image: linear-gradient(rgb(238, 186, 42), rgb(163, 89, 28));
    border:4px solid rgb(70, 33, 42);
    border-radius:5px;
    font-family: "Raleway", sans-serif;
    font-weight:900;
    font-size:28px;
    color:white;
    padding-top:17px;
    padding-bottom:17px;
    margin:5px;
    text-decoration: none;
  }

  /* CHARACTERS */

  .choco-chars-top {
    width:80%;
    color: rgb(143, 55, 14);
    background-image:linear-gradient(rgb(243, 196, 42), rgb(216, 155, 42));
    border:0px;
    font-size: 37px;
    font-weight: 900;
    font-family: "Playfair Display", "Trebuchet MS", serif;
    text-align: center;
    padding:5px;
    box-sizing: border-box;
    margin-top:30px;
    margin-left: auto;
    margin-right:auto;
    clip-path: polygon(
    0 50%,
    5% 0,
    95% 0,
    100% 50%,
    100% 100%,
    100% 100%,
    0 100%,
    0 0,
    0 0
    )
  }

  .choco-chars-body {
    width:80%;
    border-left:3px solid rgb(216, 155, 42);
    border-right:3px solid rgb(216, 155, 42);
    border-bottom:3px solid rgb(216, 155, 42);
    background-image:radial-gradient(ellipse 60% 1000%, rgb(65, 31, 33), rgb(82, 44, 29));
    background-color: rgb(83, 68, 56);
    margin-bottom:40px;
    margin-left:auto;
    margin-right:auto;
    padding:5px;
    box-sizing: border-box;
  }

  .choco-chars-tab {
    height:150px;
    background-color: rgb(231, 215, 206);
    background-image:linear-gradient(rgba(243, 237, 239, 1), rgb(231, 215, 206));
    border:3px solid rgb(216, 155, 42);
    padding:10px;
    box-sizing: border-box;
    font-size: 18.5px;
    font-weight: 400;
    font-family: "Rubik", "Trebuchet MS", sans-serif;
  }


  /* LINKS */
  
  a{
    color:rgb(190, 150, 18);
    font-weight:500;
    text-decoration: none;
  }

  a:hover {
    color:rgb(182, 85, 20);
    font-weight:500;
    text-decoration: underline;
  }