*{
    margin : 0;
    padding : 0;
}

body {
    background-color: rgb(66, 83, 66);
    color : wheat;
    margin : 0px;
    font-family: Courier;
    width: 100%;
}

nav{
    position: fixed;
    width: 1550px;
    z-index: 10;
    padding-top: 0px;
}

.nav-logo-title img {
    content: url(https://www.jetpunk.com/img/user-photo-library/7e/7e8da41703-450.jpg);
    display: block;
    position: absolute;
    width: 60px;
    height: 50px;
    z-index: 5;
    padding-bottom: 15px ;
    padding-left: 20px ;
    padding-top: 5px;
    border-radius: 100%;
} 

.nav-logo-title {
    position: relative;
    display: flex;
    background: yellowgreen;
    overflow: hidden;
    height: 60px;
}

.nav-logo-title ::before{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: 100px;
    background: linear-gradient(to bottom, white);
    z-index: 4;
}

.nav-logo-title::after{
    content: "";
    position: absolute;
    background: yellowgreen;
    inset: 4px;
    z-index: 4;
}

.nav-logo-title a {
    color: black;
    text-decoration: none;
    position: relative;
    left : 100px;
    top:20px;
    font-size: 150%;
    font-weight: bolder;
    z-index: 5;
}

div nav ul {
    list-style-type: none;
    position: absolute;
    padding-left: 10px;
    margin-top: 5px;
    margin-left: 0px;
    right: 30px;
    top: -10px;
    z-index: 5;
}

div nav ul li {
    float : left;
}

div nav ul li a{
    text-decoration: none;
    padding: 30px;
    display: block;
    color: black;
    font-weight: bolder;
}

@keyframes navbar {
    1%{
        background-color: rgb(101, 136, 26);
        color: rgb(69, 255, 27);
        padding: 10px;
        border-radius: 15px;
    }
}

div nav ul li :hover{
    animation-name: navbar;
    animation-duration: 100s;
    animation-iteration-count: 1;
    box-shadow: 0 0 10px,
                0 0 30px,
                0 0 60px,
                0 0 100px;
}

section{
    background-image: url(https://1.bp.blogspot.com/-PvYNFV-vamA/V7qVaoMKmpI/AAAAAAAA4eU/hbCZaN_k8QM3cYPytfIOZgNVLQhsT5pzwCLcB/w1200-h630-p-k-no-nu/303ee8600dc3e0d07893a714de3e2743.jpg);
   background-position-x: center;
   background-position-y: 600px;
   background-size: 1400px;
   width: 1550px;
   height: 250px;
   position: relative;
   top : 60px;
}

.header-texts h1{
    position: relative;
    padding : 10px;
    padding-left:30px;
    font-family: segoe UI;
    font-size: 30px;
    color:yellowgreen;
}

.header-texts h3{
    position: relative;
    padding-left: 30px;
    font-family: verdana;
    font-size: 20px;
    position: relative;
    padding-right: 400px;
    color:yellowgreen;
}

.header-texts p {
    position: relative;
    padding-left: 30px;
    padding-top: 10px;
    position: relative;
    padding-right: 400px;
    font-size:15px;
}

.content-aside{
    position: relative;
    background-image: url(https://images2.alphacoders.com/777/thumb-1920-777595.png);
    width: 1530px;
    height: 500px;
    top : 60px;
    padding : 10px;
    background-position-x: center;
    background-position-y: center;
}

.content-first{
    background-color: yellowgreen;
    padding: 30px;
    border-radius: 15px;
    position: relative;
}

.content-second{
    background-color: yellowgreen;
    padding:30px;
    border-radius: 15px;
    position: relative;
    top: 5px;
}

.content-first h2 {
    color:black;
    font-size: 25px;
}

.content-first p {
    color:black;
    font-size: 15px;
    font-family: system-ui;
    display: block;
    width: 1300px;
}

.content-second h2 {
    color:black;
    font-size: 25px;
}
.content-second h4 {
    color:black;
    font-size: 10px;
}

.content-second p {
    color:black;
    font-size: 15px;
    font-family: system-ui;
    display: block;
    width: 1300px;
}

aside {
    position: relative;
    width: 150px;
    height: 200px;
    bottom : 730px;
    left:1200px;
    background-color: yellowgreen;
    padding : 10px;
    border-radius: 10px;
}

aside h2 {
    color : black;
    font-size: 20px;
    font-weight: bolder;
}

aside ul {
    background-color: skyblue;
    width :120px;
    height: 75px;
    border-radius: 5px;
}

aside ul li a{
    color: black;
    text-decoration: none;
    position: relative;
    left: 10px;
    font-family: tahoma;
    font-size: 12px;
}
aside ul li a::before{
    content: "~ ";
    font-weight: bold;
}

.articles{
    position: relative;
    width: 1500px;
    height: 650px;
    top : 60px;
    right:10px;
    background-color: yellowgreen;
    padding : 30px;
    color:black
}

.articles table {
    border : 5px;
    border-color: black;
    position: relative;
    left: 40px;
    margin-top:20px;
    border-spacing: 50px;
}

.article {
    background-image: url(https://th.bing.com/th/id/OIP.-TzNCkEYqVRYKDvwRz22rwAAAA?rs=1&pid=ImgDetMain);
    width: 300px;
    height: 280px;
    border-radius: 10px;
    padding: 10px;
    padding-top:50px;
    border-style: solid;
}

.article img {
    content: url(https://lastfm.freetls.fastly.net/i/u/ar0/5c2bcd9c63dbb6c48889f3a6b4fdb11c.jpg);
    display: block;
    position: absolute;
    bottom: 570px;
    width : 100px;
    height: 100px;
    border-radius: 50px;
    border-style:solid;
}

.article h3 {
    font-family: Arial;
    font-size: 20px;

}

.article p {
 font-family: arial;
}

.article a {
    font-family: lucida sans regular;
    text-decoration: none;
    display: block;
    background-color: yellowgreen;
    position: absolute;
    border-radius: 5px;
    border-style: solid;
    width: 100px;
    height: 20px;
    text-align: center;
    bottom:310px;
}

.article-long h3{
    font-family: cambria;
    font-size:23px;
    padding-left:20px;
}

.article-long p{
    font-family: arial;
    font-size: 16px;
    padding-left:20px;
}

.row-second img {
    position: relative;
    display: block;
    content: url(https://i.pinimg.com/originals/9b/0b/85/9b0b8561fa760fa5fa1e7e8a731647a9.jpg);
    width: 300px;
    height: 200px;
    border-radius: 10px;
    border-style: solid, black;
}
.creativity{
    position: relative;
    width: 1540px;
    height: 700px;
    top : 60px;
    right:10px;
    background-color: yellowgreen;
    padding : 10px;
    color : black;
}

.mini-one img{
    display: block;
    width: 100px; 
    content: url(https://lh3.googleusercontent.com/EvZ2h89hHjXSwCNxI6sF4UpOX8UwAF3Ssu1wYP9GSbLxS3MEjZ4nsH77r7c3Zzd4T0CUfITvXp-23RV0wxPTOJWaHoscvVewsw=w960-rj-nu-e365);
    float:left;
    padding: 20px;
    border-radius: 40px;
}
.mini-one div{
position: relative;
display: block;
top:30px;
}

.mini-two img{
    position: relative;
    display: block;
    width: 100px; 
    content: url(https://th.bing.com/th/id/OIP.Rqvu9S0ozeG0gX6fKqBi5gHaLH?rs=1&pid=ImgDetMain);
    float:left;
    padding: 20px;
    border-radius: 40px;
    top:80px;
    right: 140px;
}

.mini-two div{
 position: relative;
 top:110px;
 right: 140px;
}

.mini-three img{
    position: relative;
    display: block;
    width: 100px; 
    content: url(https://th.bing.com/th/id/OIP.Pnq82dMcN6I_loTrfA8VhAHaLH?rs=1&pid=ImgDetMain);
    float:left;
    padding: 20px;
    border-radius: 40px;
    right: 280px;
    top:140px;
}
.mini-three div{
position: relative;
display: block;
top:170px;
right: 280px;
}

.mini-four img{
    display: block;
    position: relative;
    top:200px;
    right: 420px;
    width: 100px; 
    content: url(https://i.pinimg.com/originals/4b/4e/1f/4b4e1ff82928611c5bf145f62f6e6618.jpg);
    float:left;
    padding: 20px;
    border-radius: 40px;
}
.mini-four div{
position: relative;
display: block;
top:30px;
right: 420px;
top:230px;
}

footer{
    position: relative;
    width: 1520px;
    height: 350px;
    top : 60px;
    right:10px;
    background-color: black;
    padding : 10px;
    z-index: 10;
    padding-left : 30px;
}

.footer-form {
    display: block;
    background-color: yellowgreen;
    width: 250px;
    height: 220px;
    border-radius: 10px;
    border-style: groove;
    color:black;
    margin: 15px;
}

.footer-form p{
    position: relative;
    left: 10px;
    padding-top:5px;
    font-weight: bold;
}

.footer-form form{
    position: relative;
    left: 15px;
}