/* Resetting default browser styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styles */
body {
  font-family: "Roboto", sans-serif;
  
  background-color: papayawhip;
}

/* Page wrapper styles */
.page-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

/* Navigation styles */
nav {
  background-color: #21295c;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
    animation-name: slidedown;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}




nav .nav-logo-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: white;

}

.nav-logo-title a{
    text-decoration: none;
    color: white ;
    font-family:Arial, Helvetica, sans-serif
}

nav .nav-logo-title img {
  width: 70px; 
  height: auto;
  margin-right: 10px;
  
}
.nav-logo-title img{
    content: url(https://1.bp.blogspot.com/-emQ1ckCOpio/YLZG9eE_XII/AAAAAAAAFNI/hPk8UF707xo7PgDTeKXc7dkA5g6hhGBtACLcBGAsYHQ/w1200-h630-p-k-no-nu/Logo%2BUniversitas%2BCiputra.png);
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  margin-right: 30px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

nav ul li:hover {
  padding: 38px;
  background-color: #324b6d;
  transition: all 0.3s ease;
}

/* Header section styles */
.header-texts h1 {
  margin: 10px;
  color: #21295c;
  font-size: 2.5rem;
}

.header-texts h3 {
  margin: 10px;
  color: #666;
}

.header-texts p {
  margin: 10px;
  color: #666;
 
}
.header-texts{
    animation-name: slideR;
    animation-duration: 1.5s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}

/* Content section styles */
.content-aside {
  display: flex;
  margin-top: 20px;
}

.content-first {
  flex: 2;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation-name: slide;
    animation-duration: 2s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}
.content-first:hover{
    background-color: lightblue;
    transition: all ease 0.3s;
    transform: scale(1.1);

}
.content-second:hover{
    background-color: lightblue;
    transition: all ease 0.3s;
    transform: scale(1.1);

}

.content-second{
    flex: 2;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation-name: slide;
    animation-duration: 2.5s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}


.content h2 {
  margin-bottom: 10px;
  color: #21295c;
}

.content p {
  margin-bottom: 20px;
  color: #666;
}

aside {
  flex: 0.5;
  border-left: #21295c 2px solid;
  padding: 20px;
  margin-left: 20px;
}

aside h2 {
  margin-bottom: 10px;
  color: #21295c;
}

aside ul {
  list-style-type: none;
  padding: 0;
}

aside ul li {
  margin-bottom: 10px;
}

aside ul li a {
  text-decoration: none;
  color: #666;
}

/* Articles section styles */
.articles {
  margin-top: 20px;
  margin-bottom: 20px;
}

.articles table {
  width: 100%;
}
.article.article:hover{
    background-color: greenyellow;
    transition: all ease 0.3s;
    transform: scale(1.1);
}

.articles .article {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 
}

.row-first .article:nth-child(1) img{
    display: flex;
    content: url(https://www.thebluediamondgallery.com/wooden-tile/images/trend.jpg);
    margin: 0 auto;
    max-width: 200px;
}
.row-first .article:nth-child(1) {
    animation-name: slideup;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}

.row-first .article:nth-child(2) img{
    display: flex;
    content: url(https://images.narasi.tv/preset:sharp/resize:fill:877:489:1/gravity:ce/plain/https://storage.googleapis.com/narasi-production.appspot.com/production/medium/1709204453836/apa-itu-web-developer-pengertian-tugas-hingga-besaran-gaji-medium.jpeg@webp);
    margin: 0 auto;
    max-width: 200px;
    
}
.row-first .article:nth-child(2) {
    animation-name: slideup;
    animation-duration: 1.5s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}
.row-first .article:nth-child(3) img{

    display: flex;
    content: url(https://wallpaperaccess.com/full/210938.jpg);
    margin: 0 auto;
    max-width: 200px;
    
}

.row-first .article:nth-child(3) {
    animation-name: slideup;
    animation-duration: 2s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
}

.row-second img{
    display: flex;
    content: url(https://i0.wp.com/www.techomoro.com/wp-content/uploads/2019/11/javascript-736400-1.png?fit=1854%2C941&ssl=1.);
    margin: 0 auto;
    max-width: 200px;
    
}

.articles .row-second {
  background-color: #fff;
  animation-name: slideup;
  animation-duration: 2.5s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-timing-function: ease;
  animation-play-state: running;
  margin-bottom: 20px;
}
.row-second .article-long:hover{
background-color: greenyellow;
    transition: all ease 0.3s;
    transform: scale(1.1);

}

.articles .article-long {
  padding: 20px;

}

/* Creativity section styles */
.creativity {
  background-color: #f0f2f5;
}

.creativity-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.mini-one,
.mini-two,
.mini-three,
.mini-four {
  flex: 1;
  margin: 10px;
  background-color: #fff;
  color: #21295c;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.mini-one img{
    display: flex;
    content: url(https://cdn.dribbble.com/users/19867/screenshots/1725107/media/d60f290aafd37a31ef2d606b5370131b.gif);
    margin: 0 auto;
    max-width: 200px;
}
.mini-two img{
    display: flex;
    content: url(https://cdn.dribbble.com/users/756147/screenshots/2494603/media/73a74b3284b9d950a7ce2958dbdddcf6.gif);
    margin: 0 auto;
    max-width: 200px;
}
.mini-three img{
    display: flex;
    content: url(https://c.tenor.com/iKq0McbAqCMAAAAC/tenor.gif);
    margin: 0 auto;
    max-width: 200px;
}
.mini-four img{
    display: flex;
    content: url(https://img1.picmix.com/output/stamp/normal/0/9/5/2/1672590_5e64e.gif);
    margin: 0 auto;
    max-width: 200px;
}

.mini-one{
    animation-name: slideR;
    animation-duration: 1.5s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
    margin-bottom: 20px;
}
.mini-one:hover{
    background-color: orange;
    transition: all ease 0.3s;
    transform: scale(1.1);

}
.mini-two:hover{
    background-color: orange;
    transition: all ease 0.3s;
    transform: scale(1.1);

}
.mini-three:hover{
    background-color: orange;
    transition: all ease 0.3s;
    transform: scale(1.1);

}
.mini-four:hover{
    background-color: orange;
    transition: all ease 0.3s;
    transform: scale(1.1);

}
.mini-two{
    animation-name: slideR;
    animation-duration: 2s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
    margin-bottom: 20px;
}
.mini-three{
    animation-name: slideR;
    animation-duration: 2.5s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
    margin-bottom: 20px;
}
.mini-four{
    animation-name: slideR;
    animation-duration: 3s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
    margin-bottom: 20px;
}

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

/* Footer styles */
footer {
  margin-top: 20px;
  background-color: #21295c;
  color: #fff;
  padding: 20px;
  animation-name: slideup;
    animation-duration: 3s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-play-state: running;
    margin-bottom: 20px;
}

footer p {
  margin-bottom: 10px;
  color: #ccc;
}

footer form {
  margin-bottom: 10px;
}

footer form label {
  display: block;
  margin-bottom: 5px;
  color: #ccc;
}

footer form select,
footer form input[type="text"] {
  margin-bottom: 10px;
}

footer form input[type="radio"] {
  margin-right: 5px;
}

footer button {
  padding: 5px 10px;
  background-color: #666;
  border: none;
  cursor: pointer;
  color: #fff;
}

footer button:hover {
  background-color: #555;
}
/* Responsive styles */
@media (max-width: 768px) {
  .content-aside {
    flex-direction: column;
  }
  .content,
  aside {
    width: 100%;
  }
  .mini-one,
  .mini-two,
  .mini-three,
  .mini-four {
    flex-basis: calc(50% - 20px);
  }
}


/* animations */
@keyframes slidedown {
    from{
        transform: translateY(-2000px);
    } to{
        transform: translateY(0px);
    }
}
@keyframes slideup {
    from{
        transform: translateY(2000px);
    } to{
        transform: translateY(0px);
    }
}

@keyframes slide {
    from{
        transform: translate(-2000px);
    }to{
        transform: translate(0px);
    }
    
  }

  @keyframes slideR {
    from{
        transform: translate(2000px);
    }to{
        transform: translate(0px);
    }
    
  }