html {
  height: 100%;
  width: 100%;
}
body {
    font-size:20px; 
    color: #fff;
    background-image: url("https://images.unsplash.com/photo-1494981314336-e559e6fad2cd?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: 500px;
    background-attachment: fixed;
    background-color:black;
    font-family: 'Dosis', sans-serif;"
    }

h1 
{color:pink;
font-size:80px;
font-family: 'Charm', cursive;
}

h2
{font-family: 'Charm', cursive;
  }
    
.purple-heart {
    color:purple;
    font-size:80px;
    font-family: 'Charm', cursive;
    }



.nature {
    color:green;
    font-size:40px;
    font-family: 'Dosis', sans-serif;
    }

a {
    color:lightgreen;
    font-size:40px;
    font-family: 'Charm', cursive;
    }

a:hover{color:#ff038d;}


ol{
color:#ff038d;
font-size:40px;
font-family: 'Charm', cursive;
}

.ugly-pic {
    width:200px;
    height:200px;
    object-fit:cover;
    border-radius:50%;
    margin: 0 auto;
    display:block;
    }
.new-pic {
    width:200px;
    height:200px;
    object-fit:cover;
    border-radius:50%;
    margin: 0 auto;
    display:block;
    }


.ugly-pic:hover {
  width: 500px;
  height: 500px;
  transition: width 2s;
}

.new-pic:hover {
  width: 500px;
  height: 500px;
  transition: width 2s;
}

.my-border {
    border-style: solid;
    border-width: 2px;
    border-top-style: dotted;
      border-right-style: solid;
      border-bottom-style: dotted;
      border-left-style: groove;
    padding: 10px;
}
hr {
    border-width:5px;
    border-color: #ff038d;
    border-style: dotted;
}

.anotherBorder {
    border-bottom-style: solid;
    border-bottom-color: green;
    border-bottom-width: 2px;
}
table {
    margin:40px;}