body{
          background-image: linear-gradient(to right, darkblue, skyblue);
          font-family: "Times New Roman", Times, serif;font-family: "Times New Roman", Times, serif;
          color: white;
      }
      a{
        text-decoration: none;
        font-size:100%;
        transition: font-size 1s;
        color: white
    }
    a:hover{
        font-size:150%; 
    }
    ul{
        list-style-type: square;
        display: inline-block;
        position: absolute;
        right: 100px;
    }
    li {
        display: inline-block;
        padding: 10px;
    }
    .nav-logo-title{
        display: inline-block;
    }
    h1,h2,h3{
        color: white;
        text-shadow: 2px 2px 12px purple;
    }

    input{
        border:10px;
    }
    .nav-logo-title a[href="#header"]{
        font-size: 200%;
        color: lightblue;
    }
    img[alt="Logo"]{
        content: url("https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582747_1280.png");
        width: 70px; 
        height: 70px;
    }
    .header-texts h1{
        font-size: 400%;
        color: lightblue;
    }
    .header-texts h3{
        font-size: 200%;
        font-weight: bold;
        font-style: italic;
    }
    .header-texts p{
        color: aqua;
    }
    #header{
        border-top: 5px solid white;
    }
    aside h2{
        position:relative;
        font-size: 200%;
        color: skyblue;
        display: block;
    }
    aside ul{
        position:relative;
        left: 0px;
    }
    aside ul li{
        padding: 20px;
        display: block;
    }
    aside{
        border-left: 5px solid white;
        padding-left: 50px;
        width: 250px;
    }
    img[alt="Article 1"]{
        content: url(https://blue.kumparan.com/image/upload/fl_progressive,fl_lossy,c_fill,q_auto:best,w_640/v1619623867/texture-1909992_960_720_zboraz.jpg);
        width: 250px;
        height: 250px;
        border-radius: 50%;
    }
    img[alt="Article 2"]{
        content: url(https://1.bp.blogspot.com/-UhYAIwtS7y4/XZKv-1PV7PI/AAAAAAAACh8/DbFvCIeW2-k765bvDjZLUuzvWqAZx4B9wCK4BGAYYCw/s1600/visual-arts.jpg);
        width: 250px;
        height: 250px;
        border-radius: 50%;
    }
    img[alt="Article 3"]{
        content: url(https://akcdn.detik.net.id/visual/2022/02/09/ilustrasi-melukis-paint-by-numbers-1_169.jpeg?w=650);
        width: 250px;
        height: 250px;
        border-radius: 50%;
    }
    img[alt="Article 4"]{
        content: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5TFmpATtATcnPpPGI-Tgc4q20Awe_rSEBrDbWTN56t-y2i7Q81Mak4642AgXGrbagEWc&usqp=CAU);
        width: 200px;
        height: 150px;
        border-radius: 12px;
    }
    table td{
        padding: 20px;
    }
    table{
        border-spacing: 20px;
        border-collapse: separate;
    }
    .article{
        background-color: darkslateblue;
        border-radius: 12px;
    }
    .article-long{
        background-color: darkslateblue;
        border-radius: 12px;
    }
    .article-long h3, .article h3{
        border-bottom: 5px solid grey;
    }
    img[alt="First image"]{
        content: url(https://akcdn.detik.net.id/community/media/visual/2015/01/19/88e4e74b-f4a2-4cfa-9b81-ebbd9aacc22e_169.jpg?w=620);
        border-radius: 50%;
        width: 150px;
        height: 150px;
    }
    img[alt="Second image"]{
        content: url(https://akcdn.detik.net.id/community/media/visual/2020/10/26/pameran-lukisan-imersif-affandi-alam-ruang-manusia-2_169.jpeg?w=620);
        border-radius: 50%;
        width: 150px;
        height: 150px;
    }
    img[alt="Third image"]{
        content: url(https://fungsi.co.id/wp-content/uploads/2020/01/Apa-Itu-Fungsi-Seni-Pengertian-Seni-Fungsi-Dalam-PendidikanKesimpulan-dan-Saran-scaled.jpg);
        border-radius: 50%;
        width: 150px;
        height: 150px;
    }
    img[alt="Four image"]{
        content: url(https://akcdn.detik.net.id/visual/2022/02/09/ilustrasi-melukis-paint-by-numbers-1_169.jpeg?w=650);
        border-radius: 50%;
        width: 150px;
        height: 150px;
    }
    .mini-content{
        background-color: darkslateblue;
        border-radius: 12px;
        box-shadow: 10px 10px darkblue;
        padding: 20px;
    }
    footer div{
        display: inline-block;
        padding-left: 50px;
    }
    .footer-logo h3{
        font-size: 300%;
    }
    .footer-form{
        position: relative;
        left:50px;
        top: 20px;
        border-left: 5px solid grey;
    }