@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --primary-100: #0acae1;
  --primary-200: #00acc3;
  --primary-300: #006a80;
  --accent-100: #dae9f6;
  --accent-200: #798793;
  --text-100: #333333;
  --text-200: #5c5c5c;
  --bg-100: #ffffff;
  --bg-200: #f5f5f5;
  --bg-300: #cccccc;
  --font-family: "Poppins", sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.page-wrapper {
  max-width: 1920px;
  margin: auto;
}

body {
  background-color: var(--bg-100);
  font-family: var(--font-family);
  font-size: 16px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-100);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

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

.nav-logo-title img {
  content: url(https://codecreator.my.id/webcx003/uc.png);
  height: 2rem;
  margin-right: 1rem;
}

.nav-logo-title a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-100);
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 2rem;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  color: var(--text-200);
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: var(--primary-300);
}

nav ul li a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--primary-200);
  transition: all 0.3s ease;
}

nav ul li a:hover::after {
  width: 100%;
  transition: 0.5s;
}

#header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 800px;
  /* background-image: linear-gradient(to bottom right, var(--bg-300), var(--primary-200)); */
  background-color: var(--primary-100);
  color: var(--primary-300);
  text-align: center;
  padding: 0 2rem;
}

.header-texts {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.header-texts h1 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  display: inline-block;
  background-color: var(--primary-300);
  color: var(--primary-100);
  border-radius: 10px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.header-texts h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.header-texts p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.header-texts abbr {
  text-decoration: none;
  color: var(--bg-100);
  font-weight: bold;
  border-bottom: 2px solid var(--bg-100);
  padding-bottom: 2px;
  margin-right: 0.5rem;
}

.header-texts abbr:hover {
  border-bottom-color: var(--primary-300);
  transition: 1s;
}

/* Styling for the content-aside container */
.content-aside {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.header-filler {
  /* max-width: 100%; */
  width: 30%;
  content: url(https://codecreator.my.id/webnic6969/vr.svg);
}

/* Styling for the content container */
.content {
  margin: 20px;
  border-radius: 15px;
  background-color: var(--bg-200);
  flex-basis: 80%;
  padding: 25px;
  color: var(--text-200);
  box-shadow: 0px 0px 5px var(--primary-300);
}

.content-second {
  margin-top: 50px;
}

/* Styling for the heading tags */
.content h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content h4 {
  background-color: var(--primary-200);
  color: var(--bg-200);
  border-radius: 10px;
  width: fit-content;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Styling for the paragraph tags */
.content p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Styling for the aside container */
aside {
  flex-basis: 20%;
  padding: 20px;
  margin: 20px;
  margin-left: 0px;
  background-color: var(--bg-200);
  color: var(--text-200);
  border-radius: 25px;
  box-shadow: 0px 0px 5px var(--primary-300);
  margin-bottom: 10px;
}

/* Styling for the unordered list */
aside ul {
  margin-bottom: 20px;
  list-style: none;
}

aside h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* Styling for the list items */
aside li {
  background-color: var(--primary-200);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Styling for the anchor tags */
aside a {
  color: var(--bg-200);
  text-decoration: none;
}

aside ul li:hover {
  background-color: var(--accent-200);
  color: var(--primary-100);
  transition: 0.5s;
}

.articles {
  background-color: var(--bg-200);
  padding: 10px;
  border-radius: 15px;
  margin: 20px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  box-shadow: 0px 0px 5px var(--primary-300);
  color: var(--text-200);
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 20px;
  vertical-align: top;
}

.row-first {
  border-bottom: 1px solid --bg-300;
}

.article {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.article:nth-child(1) img {
  content: url(https://www.miriamsuzanne.com/images/talks/7TrmlKJqvk-960.jpeg);
  border-radius: 15px;
  max-width: 400px;
  max-height: 205px;
  margin-bottom: 20px;
}

.article:nth-child(2) img {
  content: url(https://www.motocms.com/blog/wp-content/uploads/2021/04/Essential-Advantages-and-Disadvantages-of-CSS-1.jpg);
  border-radius: 15px;
  max-width: 400px;
  max-height: 205px;
  margin-bottom: 20px;
}
.article:nth-child(3) img {
  content: url(https://res.cloudinary.com/cloudinary-marketing/images/w_1540,h_847/f_auto,q_auto/v1649718594/Web_Assets/blog/working_with_css_22218720ab/working_with_css_22218720ab-jpg?_i=AA);
  border-radius: 15px;
  max-width: 400px;
  max-height: 205px;
  margin-bottom: 20px;
}

.article h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.article p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.article a {
  display: inline-block;
  background-color: var(--primary-200);
  color: var(--bg-200);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  text-decoration: none;
  border-radius: 15px;
  box-shadow: 0px 0px 5px var(--text-200);
  transition: all 0.2s ease-in-out;
}

.article a:hover {
  background-color: var(--primary-100);
  box-shadow: 0px 0px 10px var(--accent-200);
  transform: translateY(-2px);
}

.row-second {
  border-top: 1px solid #ccc;
}

.article-long h3 {
  font-size: 32px;
  margin-bottom: 20px;
}

.article-long p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 40px;
}

.article-long td {
  padding-top: 40px;
}

.row-second img {
  content: url(data:image/png;base64,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);
  border-radius: 15px;
  margin-top: 40px;
  margin-left: 40px;
  width: 100%;
  height: auto;
}

/* styling for creativity section */

#creativity {
  background-color: var(--bg-200);
  padding: 30px;
  margin: 20px;
  border-radius: 15px;
  box-shadow: 0px 0px 5px var(--primary-300);
}

.creativity-wrapper {
  display: flex;
  gap: 20px;
  max-width: 100%;
}

/* styling for mini content boxes */
.mini-content {
  background-color: var(--bg-100);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px var(--accent-200);
  transition: all 0.3s ease-in-out;
}

.mini-content:hover {
  box-shadow: 0px 0px 5px var(--primary-300);
}

.mini-content h2 {
  font-size: 26px;
  font-weight: bold;
  margin-top: 0;
  color: var(--primary-500);
}

.mini-content p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* styling for mini images */
.mini-one img {
  content: url(https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80);
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.mini-two img {
  content: url(https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.mini-three img {
  content: url(https://images.unsplash.com/photo-1630569265359-0374303ad11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80);
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.mini-four img {
  content: url(https://plus.unsplash.com/premium_photo-1681494379901-6dc30090cd1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.mini-one img:hover,
.mini-two img:hover,
.mini-three img:hover,
.mini-four img:hover {
  box-shadow: 0px 0px 5px var(--primary-300);
}

.mini-content {
  max-width: 400px;
  margin: 0 auto;
}

.mini-two,
.mini-three {
  order: -1;
}

.mini-content:nth-child(even) {
  text-align: left;
}

.mini-content:nth-child(odd) {
  text-align: right;
}

footer {
  margin-top: 50px;
  background-color: var(--primary-100);
  color: var(--bg-200);
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 16px;
}

.footer-logo {
  flex-basis: 40%;
}

.footer-form {
  flex-basis: 30%;
}

.footer-credit {
  flex-basis: 25%;
  text-align: right;
}

.footer-logo h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: var(--primary-500);
}

.footer-logo p {
  margin: 0;
}

.footer-form p {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: var(--text-secondary);
}

.footer-form form {
  margin-top: 10px;
}

.footer-form label {
  font-weight: bold;
}

.footer-form input,
.footer-form select {
  margin: 5px 0 10px 0;
  padding: 8px;
  border: 2px solid var(--primary-300);
  border-radius: 5px;
  font-size: 16px;
  color: var(--accent-200);
}

.footer-form button {
  background-color: var(--primary-300);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.footer-form button:hover {
  background-color: var(--primary-200);
}

.footer-credit h3 {
  font-size: 16px;
  margin: 0 0 10px 0;
}

@media only screen and (max-width: 640px) {
  nav {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 80px;
    max-width: 100%;
    padding: 0px;
    z-index: 0;
    position: relative;
  }

  nav ul {
    display: flex;
  }

  nav ul li a {
    padding-left: 5px;
    margin-top: -50px;
    font-size: smaller;
  }

  footer {
    flex-direction: column;
  }

  .content-aside {
    display: flex;
    flex-direction: column;
  }

  aside {
    width: 70%;
    margin-left: 40px;
  }

  .row-first {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }

  .article {
    max-width: 100%;
    text-align: center;
  }

  .article img{
    max-width: 100%;
  }

  .row-second {
    display: flex;
    flex-direction: column-reverse;
  }

  .creativity-wrapper{
    display: flex;
    flex-direction: column;
  }

  .footer-logo,
  .footer-form,
  .footer-credit {
    flex-basis: 100%;
  }
}