body {
    background-color:#060013;
    margin: 0;
    font-family: 'Times New Roman', Times, serif, sans-serif;
    
    
}

html{
    scroll-behavior: smooth;
}

.page-wrapper {
    max-width: 2000px;
    margin: 0 ;
    padding: 0;
}


nav {
    background: linear-gradient(to right, #8e2de2, #060013);
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: row;
    
}

.nav-logo-title {
    display: flex;
    flex-basis: 30%;
    align-items: center;
}

.nav-logo-title a {
    text-decoration: none;
    color: aliceblue;
    font-size: 1.8em;
    margin-left: 20px;
    
}
.nav-logo-title a:hover {
    color: rgb(119, 118, 118);
    text-decoration: underline;
}

.nav-logo-title img {
    width: 50px; 
    height: auto;
    margin-left: 0px;
    content: url('https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=031');
}

nav ul {

    flex-basis: 90%;
    list-style-type: none;
    padding: 0; 
    display: flex;
    justify-content: end;
    font-size: larger;
    margin-right: 30px;
}

nav ul a{
    transition: 0.1s linear;
}

nav ul a:hover{
    color: rgb(0, 0, 0);
    text-decoration: underline;
    flex-basis: 90%;
    list-style-type: none;
   background-color: white;
   border-radius: 10%;
   padding:5px;
    font-size:110%;
}
ul li {
    margin-right: 30px;
    
}

ul li a {
    color: white;
    text-decoration: none;
}


#header {
    text-align: center;
    padding: 50px ;
}

.header-texts {
    color: aliceblue;
    max-width: 600px;
    margin: 0 auto;
    ;
}

/* Content section styles */
.content-aside {
    color: aliceblue;
    display: flex;
}

.content {
    color: aliceblue;
    padding-right: 20px;
    margin-bottom: 20px;
}

aside {
    flex: 300px;
    padding-left: 20px;
    border: 2px solid rgb(255, 0, 255);
    box-shadow: 0px 0px 50px rgb(160, 3, 160);
}

aside ul{
    margin-bottom: 80%;
}

/* Articles section styles */
.articles {
    margin-top:15%;
    background-color: rgba(150, 28, 150, 0.623);
    padding: 10px;
    color: aliceblue;
    border-spacing: 10%;
    box-shadow:  0px 0px 50px rgb(160, 3, 160);
}

tr{
    border-spacing: 5%;
}

td{
    border-spacing:10%;
    margin:5%;
    background-color: rgb(86, 18, 86);
    padding:2%;
}

td img{
    content: url('https://seeklogo.com/images/M/manta-network-manta-logo-D595CAF1F9-seeklogo.com.png');
    max-width:30%;
}

table {
    width: 100%;
    gap: 25%;
    border-spacing: 8px;
}

.row-second .article-long {
    padding-right: 20px;
}

/* Creativity section styles */
.creativity {
    background-color: black
    padding: 50px 0;
    
}

.creativity-wrapper {
    display: flex;
    flex-wrap: wrap;
    color: aliceblue;
    box-shadow: 0px 0px 50px rgb(160, 3, 160);
}

.mini-one,
.mini-two,
.mini-three,
.mini-four {
    flex: 1;
    margin-bottom: 20px;
    padding: 20px;
}

.mini-one img,
.mini-two img,
.mini-three img,
.mini-four img{
    content: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Ethereum-icon-purple.svg/768px-Ethereum-icon-purple.svg.png');
    max-width: 100%;
}

.mini-content {
    margin-top: 20px;
}


footer {
    background-color: #1d0f4e;
    color: white;
    padding: 20px 0;
    text-align: center;
    display: flex;
    margin:auto;
    justify-content: center;
}

.footer-logo{
    border-right: 3px solid aliceblue;
    padding-right: 2%;
}

.footer-form{
    padding:1%;
 
    
}

.footer-credit{
    border-left: 3px solid aliceblue;
    padding-left: 2%;
    
    
}

footer p {
    margin: 10px;
}

@media(max-width:700px){
    nav{
        flex-direction: column;
    }

    .nav-logo-title{
        justify-content: center;
    }

    nav  ul{
        justify-content: center;
        margin-left: 15%;
    }
}

@media (max-width:550px){
    nav{
        font-size: 80%;
    }

    table{
        font-size: 70%;
    }

    footer{
        font-size: 70%;
    }
}

@media(max-width:480px){

    body{
        font-size:70%;
    }


    nav ul{
        width:30%;
        align-self: center;
    }

    nav{
        width: 80%;
        font-size: 60%;
        margin: 0%;
        justify-content: center;
    }

    nav li{
        margin:10%;
    }

    footer{
        font-size: 50%;
    }

    .content-aside{
        flex-basis: 80%;
    }

    aside{
        width: 50%;
        flex-basis: 20%;
        padding-left: 10px; 
    }
    .footer-form input{
        width: 50%;
    }

    .footer-form select{
        width: 70%;
    }

}