*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}

html{
    background-color: white;
    font-family: Times new Roman;
}
.container{
    display: flex;
    flex-direction: row;
    width: 100%;
    @media(max-width:900px)
    {
        flex-direction: column;
    }
}
figure {
    
    width: 50%;
    height: 700px;
    margin-right: 1em;
    overflow: hidden;
      @media(max-width:900px){
          width: 300px;
          height: 400px;
          
          margin: 2em;
          
          border-radius: 20px;
          
      }
}
aside{
   width: 50%;
    height: 650px;
    padding: 2em;
      @media(max-width:900px){
          width: 400px;
          height: 400px;
          padding: 3em;
      }
    
}
img{
    width: 500px;
   height: 700px;
     @media(max-width:900px){
         width: 300px;
         height: 400px;
         
     }
}
h1{
    background-color: white;
    padding: 1em 1em;
    border: 1px solid white;
    border-radius: 15px;
    box-shadow: 0px 10px 20px whitesmoke;
    position: relative;
    right:200px ;
    font-size: 30px;
    margin: 1em;
      @media(max-width:900px){
        
          right: 40px;
          padding: .5em .5em;
          width: 300px;
          box-shadow: 0px 30px 50px gainsboro;
          border: 1px solid #8098ff;
          margin-bottom: 2em;
          font-size: 25px;
      }
}
span {
    margin: 1em;
     @media(max-width:900px){
         margin: 5px;
         
         font-size: 10px;
     }
}
h3{
    margin-top: 1em;
    margin-bottom: .5em ;
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
}

h4{
    margin: 1em;
}
ul li{
    list-style: outside;
}
li{
    font-size: 15px;
    margin: .2em;
      
}