html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

html {
    background-size: auto;    
    background-image: url('https://i.pinimg.com/originals/74/7a/40/747a401c0daac6b580fd1ffc4e5c3039.gif');
}

header { 
    background-color: #ffffff;
    border-color: #cccccc;
    border-bottom-width: medium;
    border-bottom-style: solid;
    font-family: Georgia, 'Times New Roman', Times, serif;
    overflow: hidden;
    margin-bottom: 38px;
    line-height: 2.5;
    width:100%;
}
.header p {
    float: left;
    text-align: center;
    padding: 20px;
}
.header-right {
    float: right;
    padding: 20px;
    color: grey;
    text-align: justify;
    text-decoration: none;
    margin-right: 150px;
    font-size: 18px;
    font-weight: 500;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: #cccccc;
}

a:hover {
  background-image: url('https://thumbs.dreamstime.com/z/rainbow-colors-created-soap-bubble-oil-makes-can-use-background-97719453.jpg');
}
a:active {
  color: yellow;
}

p:hover {
  background-image: url('https://thumbs.dreamstime.com/z/rainbow-colors-created-soap-bubble-oil-makes-can-use-background-97719453.jpg');

}

#juan {
    background-color: #4aaaa5;
    color: white;
    width: 251px;
    height: 91px;
    margin-left: 219px;
    font-size: 18px;
}

.active {
    margin-right: 20px;
}

.portfolio {
    margin-right: 20px;
    margin-left: 20px;
}

.contact {
    margin-right: 20px;
    margin-left: 20px;
}


.main-content {
    margin-left: 219px;
    margin-right: 2.5rem;
    margin-bottom: 115px;
    background-size: auto;
    background-color: #ffffff;
    border-color: #dddddd;
    border-style: solid;
    width: 960px;
    height: 500px;
    padding: 124 1131 597 220px;
}   

h1 {
    color: #4aaaa5;
    padding: 20px 20px 20px 0;
    border-color: #cccccc;
    border-bottom-width: thick;
    border-bottom-style: solid;
    margin: 10px 30px 0 30px;
    font-size: 33px
}

/* Try removing float left on one of the image tags not necessary on 2 locations */
img {
    margin-top: 30px;
    margin-right: 20px;
    height: 220px;
    width: 270px;
    padding-right: 20px;
    padding-bottom: 58px;
    float: left;
    /* margin: 30px; */
    position: relative;
    z-index: 0;
}

img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.paragraph {
    text-align: left;
    line-height: 1.5;
}

.bp {
  margin-right: 55px;
  margin-left: 277px;
  font-size: 18px;
  line-height: 1.5;
}



footer {
    position: relative;
    background-color: #666666;
    height: 56px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    border-color: #4aaaa5;
    border-top-width: 10px;
    border-top-style: solid;
    flex-shrink: 0;
    left: 0px;
}
p.copyright {
  position: absolute;
  color: #fff;
  line-height: 40px;
  font-size: 0.7em;
  width: 100%;
  text-align: center;
  bottom: -10px
}

@-ms-viewport{
    width: device-width;
  }

  /* Contact CSS styling */
  .container {
    width: 100%;
    margin-left: 30px;
    height: 100%;
    position: relative;
  }

  input[type=submit]:hover {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmg7wODJQKREXJFn6YryvcQHtKtILXLzKh-SYP9RaB5lCGWXFg);
  }
  
  #name {
    width: 897px;
  }

  #email {
    width: 897px;
  }

  #message {
    width: 897px;
    height: 200px;
    margin-bottom: 20px;
  }
  
  #submit {
    width: 115px;
    height: 40px;
  }
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from { 
    margin-left: 100%;
    width: 300%;
  }
  to { 
    margin-left: 0%;
    width: inherit;
  }

}
  /* portfolio css styling */


 .text-block {
    position: absolute;
    left: 5px;
    top: 130px;
    background-color: #4aaaa5;
    color: white;
    padding: 20px 64px 20px 94px;
  }
.text-block2 {
    position: absolute;
    right: 402px;
    top: 128px;
    background-color: #4aaaa5;
    color: white;
    padding: 20px 89px 20px 88px
}

.text-block3 {
    position: absolute;
    left: 5px;
    top:330px;
    background-color: #4aaaa5;
    color: white;
    padding: 20px 85px 20px 85px
}

.text-block4 {
    position: absolute;
    right: 402px;
    top: 330px;
    background-color: #4aaaa5;
    color: white;
    padding: 20px 60px 20px 59px

}

.text-block5 {
    position: absolute;
    left: 5px;
    bottom:159px;
    background-color: #4aaaa5;
    color: white;
    padding: 20px 60px 20px 60px;
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
  }
  
  /* Clear floats after image containers */
  .row {
      width: 900px;
      height: 200px;
      float: left;
  }
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  #port-cont {
    height: 745px;
  }


 

    @media screen and (max-width: 980px) {
      header {
        position: static;
      }
      
      #juan {
      
        margin-left: 40px;
      }
      .header-right {
       
        margin: 0;
        text-align: center;
      }
      #img-port{
        margin-left: 13px;
      }
      
      #index-container{ 
        width: 60%;
        margin-left: 40px;
      }
      .main-content {
        margin-left: 40px;
          width: 60%;
        }
#index-image {
  padding-bottom: 0;
}
        .bp {
          margin-left: 0;
        }

      .text-block2, .text-block4 {
        margin-right: -369px;
      }
    }
    #name, #email, #message {
      width: 528px;
    }

    @media screen and (max-width: 768px) {
      header {
        position: static;
      }
      #index-container {
        width: 95%;
        margin-left: 20px;
        height: 440px;
      }
      #index-image {
        padding: 0;
      }
      #img-port{
        margin-left: 88px;
        margin-bottom: 0;
      }
      .container {
        margin-bottom: 250px;
      }
      .bp {
        line-height: 1.5;
        margin-left: 0;
      }
      #juan {
        margin-left: 20px;
        width: 32%
      }
      .header-right {
        width: 55%;
        margin-right: -38px;
        text-align: center;
      }
      .main-content {
        margin: 0;
        width: 728px;
        margin-left:20px;
        height: 440px;
      }
  
      .text-block2, .text-block4 {
        margin-right: -229px;
      }

      #name, #email, #message {
        width: 93%;
      }   
     }

    @media screen and (max-width: 640px) {
      /* Remove float left: at 640px to have everything collapse into single row */
      header {
        position: static;
      }
      #juan {
        margin: 0;
        width: 100%;
      }

      #index-image {
        float:none;
        width: 350px;
        height: 300px;
        margin-left: 88px;
      }
      #index-container {
        height: 720px;
      }
      .container { 
        margin-bottom: 150px;
      }
      
      .header-right {
        width: 100%;
        margin: 0;
        text-align: center;
      }
      .main-content {
        margin-left: 25px;
        width: 92%;
      }
      .bp {
        margin-left: 0;
      }
      img {
        /* float: none; */
        margin-left: 130px;
        margin-bottom: 20px;
        padding: 0;
      }
      .text-block {
        margin-left: 126px; 
        padding-right: 102px;
        padding-left: 105px;
        margin-top: 51px;
      }

       .text-block2 {
         right: 418px;
         top: 450px;
         padding-right: 100px;
         padding-left: 97px;
       }

       .text-block3 {
         top: 720px;
         left: 130px;
         padding-left: 105px;
       }
       
       .text-block4 {
         right: 418px;
         top: 990px;
         width: 270px;
       }

       .text-block5 {
         left: 130px;
         bottom: 138px;
         width: 46%;
       }
     
   
     #port-cont {
       height:1455px;
     }
     #img-port {
       margin-left: 35px;
     }
.column {
  float: none;
  width: 0;
  padding: 0;
}

.row {
  width: 900px;
  float: none;
}
}