body {
    font-family: helvetica, arial, sans-serif;
    margin: 2em;
    background-color: powderblue;
  }
  
  h1 {
    display: block;
    padding-top: 55px;
    text-align: center;
    font-style: italic;
    color: #373fff;
  }

  .aboutme > p 
  {
    padding: 10px;
    border: black 1px;
  }

  #cat1 
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
    
  }
  
  p, ul {
    display: block;
    line-height: 1.6;
    font-family: 'Newsreader', serif;
    color: black;
    text-align: center;
  }

  
  .animate__animated.animate__bounce {
    --animate-duration: 2s;
  }
  
  table, td, tr, th
  {
    border: black 5px solid;
    word-spacing: 20px;
  }

  form {
    border: black 1px solid;
    text-align: right;
  }

  #port {
    background: #000;
    overflow: hidden;
  }
  
  canvas {
    display: block;	
    left: 50%;
    margin: -200px 0 0 -200px;
    position: absolute;
    top: 50%;
  }

  .resize-google-image
  {
    width: 50px;
    height: 50px;
  }

  .blogname
  {
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color: aliceblue;
  }

  .row
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: aliceblue;
  }

  .card
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  ul{
    display: inline-block;

}

li {
  
  text-align: left;
  
}

#register > p
{
  display: block;
  text-align: center;
}

#flex-container {
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
  background-color: rgb(233, 229, 229, 0.5);
}

#flex-container > div 
{
  background-color: #f1f1f1;
  width: 100px;
  line-height: 75px;
  margin: 10px;
  text-align: center;
  font-size: 30px;
}

.cute
{
    	width: 100%;
      height: 100%;
      display: block;
      transition: transform .2s;
      object-fit: cover;
    
}

.cute:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

#row
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.small-about-me
{
  margin-top: 10px;
  background-color: rgb(233, 229, 229, 0.8);
  background: url("https://images.unsplash.com/photo-1614348531934-c338408a46bb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80") no-repeat right;
    
}
  
.title-page
{
  
  margin-top: 10px;
  margin-left: 10px;
  padding: 30px;
  overflow: scroll;
  height: 500px;
  background-color: rgb(233, 229, 229, 0.5);
  overflow-x: hidden;
 
}

.title-page::-webkit-scrollbar {
  display: none;
}

.update-about-me
{
  margin-top: 10px;
  background-color: rgb(233, 229, 229, 0.8);
  background: url('https://images.unsplash.com/photo-1595405895473-1adb3f68501a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80');
}

.update-about-me > h3
{
  color:whitesmoke;
  font-size: xx-large;
  padding: 150px;
  font-family: 'Shadows Into Light', cursive;
}

.update-title > p
{
  text-align: left;
  padding-left: 50px;
}

.update-title > h5
{
  text-align: left;
  padding-left: 20px;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: whitesmoke;
  
}

.title-page:hover .overlay {
  background-color: whitesmoke;
  opacity: 0.9;
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.nature
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #ddd;
    border-radius: 50px;
    width: 100px;
  }
  
  h2{
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }

  .butterfly
  {
    display: block;
    width: 50%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px

  }

  #flexbox-nav-bar > ul >li
{
   display: inline-flex;
   padding: 10px;
  
}

.headline > h1 
{
  font-style: italic;
  color: #373fff;
}

.headline-content
{
  text-align: center;
  font-style: italic;
}

#exTwo
{
  background: url('https://images.unsplash.com/photo-1614347415938-45db946f49a6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80') no-repeat;
}

#social-media
{
  display: flex;
  justify-content: center;
}

.fa {
  padding: 20px;
  font-size: 15px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: transparent;
  color: rgb(154, 189, 230);
}

.fa:hover
{
  background: transparent;
  color: rgb(20, 18, 18);
}

.flexpara
{
  display: flex;
  justify-content: space-around;
}

label
{
  text-decoration: underline;
}

.flexpara > div
{
  width: 25%;
  height: auto;
  
}

.flex-con{
  display: flex;
  flex-direction: row;
}