/* 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-image: url(pngs/plaid6.png);
 margin: 0 auto;
font-size: 12px;
font-family: sans-serif;
align-items: center;
align-content: center;
}

.container {
margin: 0 auto;
width: 900px;
background-color: #FFA1DA;
border-style: solid;
border-color:#ca2c81;
border-width: 2px;
min-height: 100px;

}

.header {
margin: 0 auto;
background-color: #caf2ac;
width: 100%;
height: 170px;
text-align: center;
align-items: center;
}

.wrapper {
    margin: 0 auto;
display: flex;
width: 100%;
height: 800px;

}

.rzad {
margin: 0 auto;
display: flex;
text-align: center;
align-content: center;
width: 100%;
}

.nav {
 height: 100%;
 width: 150px;
 border-style: solid;
 border-color:#ca2c81;
border-width: 1px;
background: linear-gradient(#ffd3e9, #ff44a8 100%);
padding: 2px;
}

.nav a {
color: black;
 text-shadow: -1px -1px 0 #cbffe9, 1px -1px 0 #cbffe9, -1px 1px 0 #cbffe9, 1px 1px 0 #cbffe9;

}

.main {
margin: 0 auto;
 height: 100%;
 width: 600px;
 border-style: solid;
 border-color:#ca2c81;
border-width: 1px;
background-color: white;
padding: 5px;


}

.right {
 height: 100%;
 width: 150px;
 border-style: solid;
 border-color:#ca2c81;
border-width: 1px;
background-color: #ff44a8;
color: white;
padding: 2px;

}

.right a {
color: white;

}


.outlinetext {
color: white;
  background-color: #ff83c5;
  text-shadow: -1px -1px 0 deeppink, 1px -1px 0 deeppink, -1px 1px 0 deeppink, 1px 1px 0 deeppink;

}

.box {
    width:570px;
     border-style: solid;
 border-color:#ffb4dc;
border-width: 3px;
margin: 0 auto;
padding: 2px;
margin-bottom: 6px;
text-align: left;
}

.box h2 {
color: black;
  text-align: center;
text-shadow: -1px -1px 0 #ffb4dc, 1px -1px 0 #ffb4dc, -1px 1px 0 #ffb4dc, 1px 1px 0 #ffb4dc;

}

.box2 {
  font-size: 12px;
border-style: solid;
  background-color: #defac8;
   margin: 0 auto;
   width: 270px;
   color: black;
    padding: 5px;
    border-radius: 4px;
border-color: #caf2ac;
border-width: 2px;
text-align:left;
height:200px; 
overflow-y:scroll;

}

.box3 {
    width: 270px;
     border-style: solid;
 border-color:#ffb4dc;
border-width: 3px;
margin: 0 auto;
padding: 2px;
margin-bottom: 6px;
height:155px; 
overflow-y:scroll;
text-align: left;
}


.insideh{
    margin: 0 auto;
    align-content: center;
    width: 570px;
    height:40px; 
    border-style: solid;
 border-color:#ffb4dc;
 background-color: #ffd3e9;
border-width: 3px;
color: black;
  text-align: center;
text-shadow: -1px -1px 0 #ffb4dc, 1px -1px 0 #ffb4dc, -1px 1px 0 #ffb4dc, 1px 1px 0 #ffb4dc;
padding: 2px;
}


.insideh3{
    margin: 0 auto;
    align-content: center;
    width: 270px;
    height:40px; 
    border-style: solid;
 border-color:#ffb4dc;
 background-color: #ffd3e9;
border-width: 3px;
color: black;
  text-align: center;
text-shadow: -1px -1px 0 #ffb4dc, 1px -1px 0 #ffb4dc, -1px 1px 0 #ffb4dc, 1px 1px 0 #ffb4dc;
padding: 2px;
}


.column {
display: inline-block;
margin: 0 auto;
}