html {
        scroll-behavior: smooth;
}

* {
        font-size: 100%;
        font-family: monospace, Papyrus;
        box-sizing: border-box;
      --  border: 1px red solid;

}


body{
        padding: 0px 15px 30px 15px;
        margin: 0 15%;
        background-color: ghostwhite;
        
}

header{
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        margin: 0;  
        padding: 0px 5px 5px 5px;
        display: flex;
        background-color: floralwhite;
        box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    
}

#content{
        padding: 5px 5px 30px 10px;
        box-shadow: 0 3px 5px rgba(0,0,0,0.5);
        background-color: floralwhite;
}

#intro{
        display: flex;
        padding: 10px 15px 10px 15px;
}

#items{ 
        padding: 5px 5px 5px 35px;
        display: inline-block;
        justify-content: space-between;
}

#cert  {
          border-radius: 0 0 10px 10px;
          background-color: #ffffd4;
          padding: 10px 15px 10px 15px;
          margin: 0;
          box-shadow: 3px 3px 4px black;
}


#ed  {
          border-radius: 0 0 10px 10px;
          background-color: #b0e0e6;
          padding: 10px 15px 10px 15px;
          margin: 0;
          box-shadow: 3px 3px 4px black;
}

#project  {
          border-radius: 0 0 10px 10px;
          background-color: #ffa500;
          padding: 10px 15px 10px 15px;
          margin: 0;
          box-shadow: 3px 3px 4px black;
}

footer{
        background-color: floralwhite;
        box-shadow: 0 3px 5px rgba(0,0,0,0.3);
        padding: 10px 15px 10px 15px;
        align-items: center;
        justify-content: center;
        display: flex;
}

th, td {
        padding: 10px;
        text-align:left;
        border: 4px solid ghostwhite;
}
     
th{
        background-color: #9acd32;
}

.tbHead{
        border-bottom-style: inset;
        border-bottom-color: darkorange ;
        border-bottom-width: 7px;
}

.contactData {
        background-color: floralwhite;
        border: floralwhite;
}


.contactData:hover{
      transform: scale(1.2);
}

.square {
      background-image: linear-gradient(to left,floralwhite,LavenderBlush,lightgreen,LavenderBlush,floralwhite);
      width: 40px;
      height:50px;
      border-radius: 40px 40px 40px 40px;
      position: relative;
      animation: mymove 40s infinite;
}

.square:hover{
      background-image: linear-gradient(to left,floralwhite,LavenderBlush, green,LavenderBlush,floralwhite);
      animation: none;
}

@keyframes mymove {
    0%   {top: 0vh;}
    45%  {top: 500px;}
    65%  {top: 250px;}
    80%  {top: 500px;}
    100% {top: 0px;}
}

@media screen and (max-width: 480px){
    
    body { 
        margin: 0;
        padding: 0px 5px 5px 5px;
        align-items: center;
        font-size: 80%;
    }
    nav { 
        margin: 0;
        font-size: 1em;
    }
    #tech{
        margin: 0 ;
    }
    footer{ 
        margin: 0;
        font-size: 0.75em;
    }
    .square{
        display: none;
    }
}