body {
    background-color: #eee;
    margin: 0;
    padding: 0px;
    text-align:center;
}

content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(9px, auto);
    grid-gap: 10px;
    margin: 0px auto;
    text-align:center;
    color: black;
    font-size: 25px;
    align-items: center;


   


    font-family: 'Indie Flower', cursive;




}

content > * {
    padding: 20px;
}

main {
    grid-column: 1/13;
    font-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(https://images.pexels.com/photos/1308624/pexels-photo-1308624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    padding: 10;
    color: #eee;
    font-family: 'Major Mono Display', monospace;
    
}

#mainimg {
    border-radius: 50%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 30%;
    border: 3px solid #13232a;
    font-family: 'simplifica', sans-serif;
}

header {
    grid-column: 1/13;
    padding: 0px;
    background-color: #333;
    padding: 12px 0px;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-image: url(https://images.pexels.com/photos/1308624/pexels-photo-1308624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    display: flex;
    justify-content: center;
    align-items: center;


}


#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    align-items: center;
    display: flex;


}

header a {

    float: left;

    padding: 15px;
    border-radius: 20px;
    border-style: solid;
    border-width: 3px 0;
    border-color: aliceblue;
    margin: 0px auto;
    color: white;
    text-decoration: none;
    font-size: 16px;

}

header a:hover {
    background-color: aliceblue;
    color: black;
}
header a:active {
    background-color: aliceblue;
    color: black;
}
.AboutMe {
    grid-column: 1/13;

}

#aboutimg {
    float: left;
    width: 29%;
    height: 100% border: 3px solid #718d99;
    border-radius: 10%;
}

.line {
    grid-column: 1/13;
    padding: 0;

}

.Writings {
    grid-column: 1/13;
}

#gallery {
    float: right;
    border-radius: 50%;
    width: 15%;
    border: 3px solid grey;
    margin: 15px;

}

#gallery:hover {
    border: 3px solid black;
}

span.gallerry:after {
    float: clear;
    display: block;
    content: "";

}

#yquote {
    display: inline-block;
    padding: 5px;
    border: 2px solid black;
    border-radius: 10%;
    margin-top: 10px;
    text-decoration: none;
    color: black;
    background: #eee;
    font-family: sans-serif;
}

#yquote:hover {
    background-color: black;
    color: white;
}

.container {
    grid-column: 1/13;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;

}

.container h2 {
    margin-left: 50px;

}

.container ol {


    padding: 0 90px;


}

.container2 {
    grid-column: 1/13;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    grid-column: 1/13;
    background-image: url(https://images.pexels.com/photos/1308624/pexels-photo-1308624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    color: aliceblue;
}

hr {
    width: 75%;
    border: 1px solid #746a6af0;
    padding: 1.5px;
    border-radius: 99%;
    background-image: url(https://images.pexels.com/photos/1308624/pexels-photo-1308624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}


.MsgMe {
    position: relative;
    right:100px;
}

.icons ul {
    display: flex;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    border-radius: 20px;
    padding: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    right:-100px;
    top:15px;

}  


.icons li {
    list-style: none;
    padding: 20px;
}

.icons li:after {
    float: clear;
    display: block;
    content: "";
}

.icons ul li a {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 -5px;

}

.icons i {
    color: black;
    size: 15px;
    width: 20px;
}

.icons i:hover {
    color: #eee;
    background: black;

}

input[type=text] {
    width: 40%;
    padding: 5px 10px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 4px;
    background: #eee;
}

input[type="submit"] {
    background-color: white;
    color: black;
    border: 2px solid black;
    border-radius: 10px;
}

input[type="submit"]:hover {
    background-color: black;
    color: #eee;
}

#msgbox {
    background=#eee;
    border: 3px solid black;
    border-radius: 10px;
    margin-top: 10px;
}

/*animation effects*/
h3,#hello{
    position:relative;
    animation-name: side ;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;

}
@keyframes side{
    from{
        left:-1500px;
    }
    to{
       left:0px; 
    }
}

#blink,.fa-gratipay{
    position:relative;
    animation-name: blink;
    animation-duration:2.5s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    
    
}
@keyframes blink{
    
   0%, 100%{
        color:white;
    }
    20%{
        color:chartreuse;
        
    }
      40%{
        color:orange;
        
    }
      60%{
        color:mediumvioletred;
      7
    }
      80%{
        color:greenyellow;
        
    }
    }