/* Myers Reset */
/* reset css */
 span, applet, object, iframe,  
h3, h4, h5, h6, blockquote, pre,  
 abbr, acronym, address, big, cite, code,  
del, dfn, em,  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 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
/* every element is a border-box */
* {
    box-sizing: border-box;
}




/* Global */
a {
    color:black;
    text-decoration: none;
  }
  a:visited{
    color:black;
  text-decoration: none;
  }
  body > #title{
      display:block;
    box-sizing: border-box;
    position: relative;
    width:100%;
    height:4rem;
  
   
     
  }
  
  div > a > h1{
      
      display:inline-flex;
      align-content: space-evenly;
      justify-content:space-between;
      position:relative;
      box-sizing: border-box;
      animation: blinker 1s linear infinite;
      width:100%;
      height:100%;
      /* text-align:left; */
      /* margin-top: 3.3rem; */
      
  /*     background: -webkit-linear-gradient(rgb(145, 26, 168), rgb(32, 20, 206));
  -webkit-background-clip: text;
  background-clip: border-box;
  -webkit-text-fill-color:forestgreen;
      text-align: left;
      */
       
      }
      @keyframes blinker {
        50% {
          opacity: 0;
        }
      }
  
  
  
    
  
      h2{
        text-align: center;
      }
      p{
        text-align: center;
        margin: 40px;
      }
    div  img{
        height:auto;
        width:100%;
      margin:2rem 0rem 2rem 0rem;
     
  
    }
  
  
  
  
  /*Top part of the page */
  marquee{
      width:100%;
      font-size:3rem;
      background-color: blue;
  }
  
  
  .container {
    border: 1px solid black;
    margin: 30px ;
    margin-top: 0px;
    height: 200px;
    background: linear-gradient(
      to bottom, 
      #11e1f0d2 5%, 
      #cf4523 50%, 
      #dd1922 50%, 
      #ad0d1a 100%
    );
    
  
  }
  
  .container div {
    height: 55px;
    width: 150px;
  }
  .container .item-2 {
    border: 2px solid black;
    height: 255px;
    width: 150px;
  }
  
  .container .item-3 {
    border: 2px solid black;
    height: 150px;
    width: 180px;
    
  }
  
  /*End container */
  
  
        
  .container-1 {
    display:flex;
    justify-content: center;
    align-items:center;
  }
  
  
  .item-1 {
      /* Font-size makes the extra bow behind the buttons*/
    font-size: 4rem;
      text-align: center;
      background: linear-gradient(
        to bottom, 
        #3abfe7 0%, 
        #c5240f 50%, 
        #d1103a 50%, 
        #b6701e 100%
      );
  }
  
  html > body> div.container.container-1 > div.item-1 button:hover{
    height:50px;
    width:100px;
    background: linear-gradient(
          to bottom, 
          #87f10cd2 5%, 
        #05f805 50%, 
        #0ddb0d 50%, 
        #0aec83 100%
        );
      color:white;
        
    font-size: medium;
  }
  
  
  
  
  div.item-1 button{
      height:50px;
      width:100px;
      background: linear-gradient(
            to bottom, 
            #d3d33e 0%, 
            #af671f 50%, 
            #b6701e 50%, 
            #b6701e 100%
          );
      font-size: x-large;
      
    }
  
  
  
    .container1 {
        
      margin: 30px 0;
      height: 200px;
      background: linear-gradient(
        to bottom, 
        #dfd0dad2 5%, 
        #af9e9a 50%, 
        #a79394 50%, 
        #524748 100%
      );
      
    
    }
    
  /* End Container 1 top section of page */
    
  /* After h2*/
  
  
        .container1 div {
            /* border: 1px solid rgba(255, 255, 0, 0.432); */
          height: 100%;
          width: 100%;
          
        }
    
        
  
        .container1 .item-2 {
            border: 2px solid rgba(0, 0, 0, 0.925);
          height: 100%;
          width: 100%;
        }
        
        .container1 .item-3 {
          border: 2px solid black;
          height: 150px;
          width: 180px;
          
        }
        
        
        
        .item-2 {

            
          font-size: 2rem;
            text-align: center;
          background-color: slategray;
        
        }
  
  
  
        /*The bottom div with contactme */
        
        #cD{
          color:blue;
        }
  
  
  
        .item-3 {
          font-size: 1rem;
            text-align: center;
          background-color: lavender;
          /* position: relative; */
        }
        
       
        
      
  
      
        
        .container-2 {
          display:flex;
          justify-content: space-evenly;
          justify-content: center;
          align-items:center;
        }
        
        
    
  @media(max-width:650px){
    .container-2 {
        display:flex;
        flex-direction: column;
        justify-content: space-evenly;
        justify-content: center;
        align-items:center;
      }
  }
  @media (max-width:730px){
    div > a > h1{
      
        display:inline-flex;
        align-content: space-evenly;
        justify-content:center;
        position: absolute;
        /* box-sizing: border-box; */
        width:100%;
        height:auto;
        /* text-align:left; */
        margin-top: 3.3rem;
         
        }
  }




    
  
  
        /* unused */
  
        .containerA{
          background: linear-gradient(
            to right, 
            #f8f8f7 0%, 
            #f8f7f6 50%, 
            #b6701e 50%, 
            #b6701e 100%
          );
          border: 1px solid black;
          margin: 30px 0;
          height: 200px;
    
        }
  
  
  
        .item-4 {
          font-size: 4rem;
            text-align: center;
          background-color: darkgray;
        }
        
        
        .container-3 {
          display:flex;
        
          flex-direction: column;
          justify-content: space-evenly;
          display:flex;
          flex-direction:column;
          align-items:flex-end;
          
        }
        
        
        .container-4 {
          display:flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
    
        
        .container-5 {
          display:flex;
          flex-direction:row;
          align-items:flex-end;
        }
    
  
  
  
  
        .container .foot{
          display: flex;
          text-align: center;
          align-content: center;
          justify-content: space-evenly;
        }
  
  
    
        .container1 .foot{
          display: flex;
          text-align: center;
          align-content: center;
          justify-content: space-evenly;
        }
        
          .foot{
            background-color: bisque;
            width: 80px;
            height: 50px;
          }