* {
  box-sizing:border-box;
}

*:link{
  color:orange;
}

*:visited{
  color:darkorange;
}
body {
background-image: url('https://textures.neocities.org/textures/abstract-pink-and-blue/278.GIF');
}

button {
  border-radius: 30px;
}

button:hover{
  color:lightblue;
  background-color:purple;
}

summary {
    border: 2px solid white;
    text-decoration: underline dotted;
    padding: 10px;
    margin-bottom:10px;
    background-color:grey;
    margin-right:10px;
}

summary:hover{
    margin-left:10px;
    color:yellow;
    padding-left:15px;
    margin-right:0px
}


.main {
position: center;
display: flex;
flex-direction:row;
align-content: stretch;
justify-content: space-between;
}

.header {
display:flex;
justify-content: flex-start;
}

nav {
display: flex;
padding-left: 10px;
align-self:flex-start;
width:15vh;
height:70vh;
flex-direction: column;
justify-content:space-around;
}

.template_button {
  border: 2px dotted black;
  text-align:center;
  width:13vh;
  height:5vh;
  margin-bottom:10px;
}

.rib_widget {
border: 3px solid black;
background:white;
width:25vh;
height:70vh;
padding-left:10px;
padding-right:10px;
background-image: url(https://textures.neocities.org/textures/abstract-brown-and-grey/878.GIF);
color:white;
}

/*.container {
align-self:center;
margin-left:2%;
margin-right:2%;
} */

.sub_container {
background-image: url('https://textures.neocities.org/textures/fabric/CANVAS19.JPG');
width:110vh;
height:70vh;
border: 3px solid #3b0b1e;
overflow:auto;
justify-content: flex-start;
padding-left:20px;
color:white;
align-self:center;
}