*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: Times new Roman;
    background-color: whitesmoke;
}

.container{
  display: flex;
  flex-direction: column;  
  margin: 2em;
  border: 1px solid black;
  height:85vh;
  border-radius: 25px;
  background:linear-gradient(to bottom right,#138085,#534666);
  border: 1px solid #138085;
  box-shadow: 0px 5px 10px #534666;
  overflow: hidden;
  color: white;
  @media(min-width:900px){ 
      height: 750px;
      width: 800px;
     
  }
}
.navbar{
    padding-left: 0em;
    @media(min-width:900px){
      width: 500px;
      padding-left: 3em;
  }
}
.navbar li{
    list-style-type:none;
    margin: 1em;
    padding-left: 0em;
    @media(min-width:900px){
      font-size: 20px;
  }
 
}
.image-card{
    padding-left: 1em;
    margin-bottom: 1em;
    height: 100px;
    
}
.image-card img
{    margin-top: 1em;
     width: 70px;
     height: 70px;
     border-radius: 15px;
     @media(min-width:900px){
      width: 150px;
      height: 150px;
  }
  
    
}
.image-card h1{
    position: absolute;
    top: 60px;
    left: 130px;
    font-size: 20px;
    @media(min-width:900px){
      left: 250px;
      font-size: 35px;
  }
    }
.image-card p{
    position: absolute;
    top: 90px;
    left: 130px;
    font-size: 15px;
    @media(min-width:900px){
      left:300px;
      font-size: 25px;
  }
}
.span{
   float: right;
}
hr{
   color: white;
   opacity: .5;
   margin-left: 1em;
   @media(min-width:900px){
      margin-top: 4em;
  }
}
.icon
{    
    width: 20px;
    height: 20px;
    overflow: hidden;
    
}
.navbar li:hover{
    background-color: #8098ff91;
    border-radius: 2em 2em;
    padding: 1em 1em;
    color: white;
    transition: 2s;
}
.footer{
    margin: 1.5em;
    width: 40px;
    height: 40px;
    @media(min-width:900px){
      margin: 3em;
  }
    }
.footer:hover{
    border: 4px solid white;
    border-radius: 200px;
    transition-duration: 1s;
}