@import url("https://fonts.googleapis.com/css2?family=Irish+Grover&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

.wrapper{
display:flex;
flex-flow: row wrap;
text-align:center;
align-items:center;
font-family: "Roboto Mono";
font-weight: 500;
color:white;
text-shadow: 3px 3px 4px black;
}

h1{
 font-size:30px; 
}

.header > img{
    max-width: 100%;
    height:auto;
}

.wrapper>*{
padding: 2px 8px;
margin: 20px;
flex: 1 100%;
}

.header{
height:14%;
}

table, th, tr{
  border:3px solid white;
  border-collapse:collapse;
}

.footer{
  background-size:70%;
  height:10%;
}

.imgcontainer{
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
padding: 0px;
margin: 0px;
align-items: center;
font-size:16px;
}
    .cover{
      max-width:40%;
    }
    
    .cover > img{
      max-width:100%;
      height:auto;
      border: white solid 3px;
    }
    
    .summary{
      font-size:100%;
       max-width:50%;
    }
    
    .summary > p{
      background-image: url("indexassets/atoms.jpg");
      padding: 4%;
    }

h1{
font-family:"Irish Grover";
font-size:40px;
color:white;
}

.author{
  font-family:merriweather;
  color:white;
  outline:black 3px;
  max-width:100%;
}

.aside1{
background: #8ae4eb;
color: white;
height:60vh;
background-image: url("indexassets/dna.jpg");
border-image:url("dna-border.png") 30 round;
overflow: auto;
}

.aside2{
   background-color:cyan;
   height:60vh;
   background-image: url("indexassets/steelbackground.jpg");
   overflow: auto;  
}

.aside1, .aside2{
  font-size: 15px;
  border: black solid;
}

#ornament1{
  float:left;
}

#ornament2{
  float:right;
}

.ornament3{
  max-width:30%;
  height:auto;
}


@media all and (min-width: 800px){
.main{
flex: 3;
}
.aside1{
order:1;
}
.aside2{
order:2;
}
.main{order:2;
}
.footer{
order:4;
}
}

@media all and (min-width: 600px){
.aside{
flex:1;
}
}

@media only screen and (min-width: 769px){
  .imgcontainer{ flex-basis: 50%; }
}