* { 
  margin: 5;
  padding: 1;
  box-sizing: border-box;

}

body {
      background-image: url("bg5.gif");
      cursor: url("cursor1.gif"), auto;
    
  }

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  background: linear-gradient(180deg,rgba(255, 153, 219, 1) 6%, rgba(255, 77, 142, 1) 92%);
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  width:80%;
  height: 20%;
  display: flex;
  
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background: #c94d9e;
background: linear-gradient(180deg, rgba(201, 77, 158, 1) 6%, rgba(179, 29, 84, 1) 92%);
  color: white;
}

.content-box {
  width: 720px;
  padding: 1%;
  margin-top: 0%;
  margin-left: 5%;
  background-color: white;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  color: black;
  flex: 1;
}

.layout-container {
  display: flex;
  margin-left: 8%;
  margin-top: 1%;
  padding-top: 0px;
}

.sidebar {
  width: 360px;
  min-height: 800px;
  max-width: 360px;
  background-color: white;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  color: black;
  padding: 37px;
  margin-left: 8%;
  margin-top: 1%;
    margin-right: 0%
  
}

.layout {
  display: flex;
}

.flex-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
}