body {
    font-family: 'Times New Roman', Times, serif;
    margin-left: 0%;
    margin-right: 0%;
    max-width: 1600px;
}

h1 {
    color: #19A7CE;
}
h2 {
    color: #19A7CE;
}
h3{
    
}
a {
    color: black;
    text-decoration: none;
}
.page-wrapper {
    /* margin-left: 5%;
    margin-right: 5%; */
    /* background-color:#394867; */
    background-image: url(https://thumbs.gfycat.com/ComplicatedYawningIndiancow-size_restricted.gif);

}
.nav-logo-title {   
    padding-left: 3rem;
    align-items: center;
    justify-content: center;
    display: flex;
    float: left;
}
.nav-logo-title img {
    content: url(https://pngimg.com/d/lamborghini_PNG10709.png);
    width: 30px;
}
#header {
    margin-left: 5%;
    margin-right: 5%;
}
nav ul{
    margin-left: 5%;
    margin-right: 5%;
}
nav{
    z-index:5;
    margin-top: 0%;
    padding-top: 0%;
    position: fixed;
    width: 100%;
    justify-content: space-between;
    background-color: #394867;
    display: flex;
    box-shadow: 0px 14px 0px -1px rgba(0,0,0,0.74);
    -webkit-box-shadow: 0px 14px 0px -1px rgba(0,0,0,0.74);
    -moz-box-shadow: 0px 14px 0px -1px rgba(0,0,0,0.74);
}

nav ul li{
    display: flex;
    
    color: white;
    opacity: 1;
    transition: opacity 1s ease 0s;  
    padding: 8px 24px;
    margin-left: 10px;
    float: right;
    text-align: center;
}

nav ul li :hover{
    opacity: 0.6;
}

nav ul li a{
    padding: 2%;
    transition: background-color 1s ease 0s;
    background-color: white;
    font-weight: bold;
    border-radius: 10%;

}nav ul li a :hover{
    background-color: red;
}
#header {
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0%;
    display: flex;
    justify-content: center;
    background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg);
    background-repeat: 2;
    justify-content: center;
}
.header-texts {
    text-align: center;
    justify-content: center;
    margin-top: 10%;
    padding-left: 30%;
    padding-right: 30%;
    color: white;
    padding-bottom: 5%;
}

.content-aside {
    position: relative;
    margin-right: 10%;
    margin-left: 5%;
    margin-bottom: 5%;
    color: white;
    
}
aside {
    box-shadow: -11px 1px 0px -1px rgba(97,122,85,0.74);
    -webkit-box-shadow: -11px 1px 0px -1px rgba(97,122,85,0.74);
    -moz-box-shadow: -11px 1px 0px -1px rgba(97,122,85,0.74);
    margin-left: 10%;
    padding-left: 5%;
    float: right;
    color: white;
}
aside li a {
    color: white;
}
.content-first p{
    margin-right: 30%;
    text-align: justify;
    color: white;
}
.content-second p{
    margin-right: 30%;
    text-align: center;
    color: white;
}
.content-aside h4 {
   color: white;
    
}
.content-first h2 {
    background-color: bisque;
    padding-left: 2%;
}
.content-second h2{
     background-color: bisque;
    padding-left: 2%;
}
/* aside h2 {
    color: black;
    background-color: #8294C4;
} */
/* ARTICLE */
.articles {
   color: white;
    margin-left: 5%;
    margin-right: 5%;
    
}
.articles article a{
    color:white ;
}
.articles table .row-first .article img {
    content: url(https://www.pngarts.com/files/3/Logo-PNG-Image.png);
    display: flex;
    width: 110%;
    height: 40%;
}
.articles table .row-first .article:nth-child(2) img {
    content: url(https://www.freepnglogos.com/uploads/pizza-hut-png-logo/pizza-hut-brands-png-logo-8.png);
    display: flex;
    width: 100%;
    height: 40%;
  }

.articles table .row-first .article:nth-child(3) img {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/2339px-McDonald%27s_Golden_Arches.svg.png);
  display: flex;
  width: 100%;
  height: 40%;
} 

.articles table .row-second td:nth-child(2) img {
  border-radius: 10px;
  content: url(https://esportsku.com/tech/wp-content/uploads/2023/03/Meme-Santai-Dulu-Ga-Sih.jpg);
  display: flex;
  width: 100%;
  height: 40%;
}
.article {
    height: 300px;
    border-collapse:separate;
    margin-left: 5%;
    margin-bottom: 5%;
    padding-left: 5px;
    justify-content: space-between;
    border: 2px bold #19A7CE;
    border-radius: 10%;
}
.article img {
    width: 100px;
    height: 100px;
}

.article p a{
    text-align: center;
}

.article-long p a{
    text-align: justify;
}
.row-first a{
    
    text-align: center;
}
.row-first {
    border-collapse:separate;
    display: flex;
    justify-content: space-between;
    
    border-radius: 10%;
    /* background-color: #FFF8D6; */
    
    
}
.row-first  p{
    background-color: bisque;
    border-radius: 10%;
    padding: 10%;
    color: black;
}
.row-second {
    margin-top: 35%;
    align-items: center;
    display: flex;
    margin-left: 2%;
    background-color: #8294C4;
    border: 5px green;
    border-radius: 10px;
    margin-bottom: 5%;
}
aside ul li {
    
}
ul li :hover{
    
} 
/* CREATIVE */
.creativity {
    padding-top: 5%;
    margin-top: 5%;
    background-color: beige;
    height: 550px;
    margin: 0%;
    justify-content: space-between;
    position: absolute;
    margin-bottom: 1%;
}
.creativity-wrapper{
    justify-content: space-between;
    display: flex;
    float: right;
}

.mini-one {
    margin-right: 2%;
    border-collapse: separate;
    border-radius: 10%;
    float: right;
}

.mini-one :hover{ 

}
.mini-content {
    background-color: bisque;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 5%;
    padding: 10%;
    color: black;
    border-radius: 10%;
}
.mini-two {
    
}
.mini-two :hover{

}
.mini-three {
    margin-left: 2%;
}
.mini-three :hover{

}
.mini-four {
    margin-left: 2%;
}
.mini-four :hover{

}
.mini-one img {
    position: relative;
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    margin-left: 30%;
    width: 35%;
    height: 20%;
    border-radius: 50%
}   
.mini-two img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    margin-left: 30%;
    width: 30%;
    height: 20%;
    border-radius: 50%
}
.mini-three img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    margin-left: 30%;
    width: 30%;
    height: 20%;
    border-radius: 50%
}
.mini-four img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    margin-left: 30%;
    width: 30%;
    height: 20%;
    border-radius: 50%
}
.creativity h2{
    color: black;
}
/* FOOTER */
footer {
    margin-top: 80%;
    
    background-color: #F1F6F9;
    padding: 0px;
    display: flex;
}
.footer-logo {
 text-align: left;
 margin-left: 5%;
}
.footer-form {
    padding-left: 5%;
    margin-left: 10%;
    text-align: left;
    box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
    -webkit-box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
    -moz-box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
    box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    -webkit-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    -moz-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    
    
}
.footer-credit {
    /* display: flex; */
    margin-left: 10%;
    padding-left: 5%;
    text-align: left;
    margin-right: 5%;
    box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    -webkit-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    -moz-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
}
button{
    margin-top: 2%;
    color: white;
    background-color: #A4D0A4;
}
/* RESPONSIVE */

@media only screen and (max-width: 800px) {
    
    nav {
    justify-content: space-between;
    background-color: #394867;
    display: flex;
    }
    nav div a {
        padding-left: 5%;
    }
    nav ul li a {
        margin-right: 5%;
        margin-left: 20%;
        padding: auto;
        margin: auto;
        font-size: smaller;
        justify-content: space-between;
    }
    #header {
        padding: 0%;
        margin: 0%;
    }
    .header-texts p {
        text-align: justify;

        margin-top: 20%;
    }
    .content-first {
        text-align: center;
    }
    .content-first p {
        text-align: justify;
        margin: 0;
    }
    
    .content-second {
        text-align: center;
        
    }
    .content-second p {
        text-align: justify;
        margin: 0;
    }
    aside {
      justify-content: center;
      display: flex;  
      box-shadow: 0px 14px 0px -1pxrgba(97,122,85,0.74);
      -webkit-box-shadow: 0px 14px 0px -1px rgba(97,122,85,0.74);
      -moz-box-shadow: 0px 14px 0px -1px rgba(97,122,85,0.74);
  
    }
    aside ul {
        padding-right: 15%;
    }
    aside ul:nth-child(3){
        padding-right: 25%;
    }
    aside h2 {
       margin-left: 5%;
    }
    .row-first {
        margin-left: auto;
    }
    .row-second {
        margin-top: 50%;
        float: right;
    }
    .article {
        margin-top: 5%;
        
    }
    .article-long p{
        text-align: justify;
    }
    .articles table .row-first .article img {
        content: url(https://www.pngarts.com/files/3/Logo-PNG-Image.png);
        display: flex;
        width: 100%;
        height: 35%;
    }
    .articles table .row-first .article:nth-child(2) img {
        content: url(https://www.freepnglogos.com/uploads/pizza-hut-png-logo/pizza-hut-brands-png-logo-8.png);
        display: flex;
        width: 100%;
        height: 35%;
      }
    
    .articles table .row-first .article:nth-child(3) img {
      content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/2339px-McDonald%27s_Golden_Arches.svg.png);
      display: flex;
      width: 100%;
      height: 35%;
    } 
    .articles table .row-second td:nth-child(2) img {
       
        border-radius: 10px;
        content: url(https://esportsku.com/tech/wp-content/uploads/2023/03/Meme-Santai-Dulu-Ga-Sih.jpg);
        display: none;
        width: 100%;
        height: 100%;
      }
      .creativity {
        height: 400px;
        margin-top: 50px;
        width: 100%;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding: 1px;
        gap: 20px;
        margin: 1rem auto;
      }
      .mini-one {
        margin: 1%;
      }
      .mini-two{
        margin: 1%;     
     }
      .mini-three{
        margin: 1%;    
      }
      .mini-four{
        margin: 1%;     
     }
      .mini-one img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 100%;
    height: 20%;
    }
  
    .mini-two img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    content-visibility: 0%;
    display: flex;
    width: 100%;
    height: 20%;
    }
    .mini-three img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 100%;
    height: 20%;
    }
    .mini-four img {
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 100%;
    height: 20%;
    }
    
    footer {
        margin-top: 500px;
    }
    .footer-logo {
        font-size: small;
        margin: auto;
        margin-left: 5px;
        padding: 5px;
    }
    .footer-logo p {
        margin-right: 5px;
    }
    .footer-form {
        font-size: small;
        margin: 0px;
        padding: 10px;
        margin-right: 5px;

        box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
        -webkit-box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
        -moz-box-shadow: 10px 0px 0px -1px rgba(97,122,85,0.74);
        box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
        -webkit-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
        -moz-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
    }
    .footer-credit {
        
        box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
        -webkit-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
        -moz-box-shadow: -33px -1px 0px -19px rgba(97,122,85,0.74);
        font-size: small;
        margin: auto;
        padding: auto;
        padding-left: 5px;


    }
}

@media only screen and (max-width: 700px) {

    .header-texts {
 margin-top: 30%;
    }
.row-second {
    margin-top: 100%;
}
.creativity{
    background-color: beige;
}
.creativity-wrapper{
    width: 100%;
    

}
.mini-content {
    
    width: 300px;
    margin-left: 5%;
    padding: 2%;
}
.mini-two .mini-content{
    margin-left: 20%;
}

.creativity-wrapper .mini-three .mini-content{
    margin-left: 20%;
}

.creativity-wrapper .mini-four .mini-content{
    margin-left: 20%;
    margin-right: 5%;
}
.mini-one img {
    margin-right: 5%;
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 50%;
    height: 20%;
    }
  
    .mini-two img {
        margin-right: 5%;
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    content-visibility: 0%;
    display: flex;
    width: 50%;
    height: 20%;
    }
    .mini-three img {
        margin-right: 5%;
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 50%;
    height: 20%;
    }
    .mini-four img {
        margin-right: 5%;
    content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
    display: flex;
    width: 50%;
    height: 20%;
    }
}
footer {
    margin-top: 700px;
}

@media only screen and (max-width: 520px) {

    body {
        margin: 0%;
        padding: 0%;
    }

    .header-texts {
        margin-top: 50%;
    }
    nav {
        margin: 0%;
    }
    .row-first{
        margin-top: 10%;
        margin-right: 70%;
        margin-bottom: 500px;
    }
    .row-second {
        margin-top: 50%;
    }
    .creativity{
        background-color: beige;
    }
    .creativity-wrapper{
        width: 100%;
        

    }
    .mini-content {
        
        width: 300px;
        margin-left: 5%;
        padding: 2%;
    }
   .mini-two .mini-content{
        margin-left: 20%;
    }

    .creativity-wrapper .mini-three .mini-content{
        margin-left: 20%;
    }
    
    .creativity-wrapper .mini-four .mini-content{
        margin-left: 20%;
        margin-right: 5%;
    }
    footer {
        margin-top: 500px;
    }
    .mini-one img {
        margin-right: 5%;
        content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
        display: flex;
        width: 90px;
        height: 20%;
        }
      
        .mini-two img {
            margin-right: 5%;
        content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
        content-visibility: 0%;
        display: flex;
        width: 90px;
        height: 20%;
        }
        .mini-three img {
            margin-right: 5%;
        content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
        display: flex;
        width: 90px;
        height: 20%;
        }
        .mini-four img {
            margin-right: 5%;
        content: url(https://nova-live.imgix.net//How%20Creative%20Are%20You-8a83c099-4a97-4559-9714-dec6105f333b.jpg?);
        display: flex;
        width: 90px;
        height: 20%;
        }
    }