/* Global Styles */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin: 0;
    overflow: auto;
    transition: background-color 0.3s, color 0.3s;
}

html, body {
    overflow: auto; /* Pastikan overflow diatur ke auto atau visible */
}

body.light-theme {
    background-color: #f4f4f4;
    color: #000;
}

body.dark-theme {
    background-color: #333;
    color: #fff;
}

marquee.foonathanPrinsley {
            display: ;
            position: fixed;
            width: 100%;
            bottom: 0px;
            font-family: Tahoma;
            height: 20px;
            color: white;
            left: 0px;
            border-top: 2px solid darkred;
            padding: 5px;
            background-color: #000;
}

/* Profile Card Styles */
.profile-card {
    background-color: #fff;
    width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
    padding: 20px;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-theme .profile-card {
    background-color: #444;
}

.profile-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.profile-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #FF0000;
    transition: transform 0.3s, border-color 0.3s;
}

body.dark-theme .profile-image img {
    border-color: #FF6347;
}

.profile-info h2 {
    margin: 10px 0;
}

.profile-info p {
    color: #777;
    margin: 10px 0;
}

body.dark-theme .profile-info p {
    color: #bbb;
}

/* Links Container */
.links-container {
    margin-top: 20px;
}

.link-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    transition: transform 0.3s;
}

.link-card:hover {
    transform: translateY(-5px);
}

.link-item {
    display: flex;
    align-items: center;
    color: #FF0000;
    text-decoration: none;
}

.link-item i {
    margin-right: 10px;
}

body.dark-theme .link-item {
    color: #FF6347;
}

/* Toggle Switch Styles */
.switch {
    display: none; /* Sembunyikan input checkbox */
}

.slider {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.4s;
}

.slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #FF0000; /* Warna background untuk tema terang */
}

input:checked + .slider::before {
    transform: translateX(14px);
}

/* Dark Theme Styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }

    .link-card {
        background-color: #5555; /* Warna latar belakang untuk tema gelap */
    }

    .slider {
        background-color: #666;
    }

    input:checked + .slider {
        background-color: #FF6347; /* Warna background untuk tema gelap */
    }
}

/* PLAY MUSIC */
@import url('https://fonts.googleapis.com/css2?family=Exo+2&family=Josefin+Sans&display=swap');

      @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Roboto&family=Roboto+Mono&display=swap');

      :root{

      --white: #FFFFFF;

      --img: invert(0%) sepia(0%) saturate(9%) hue-rotate(204deg) brightness(108%) contrast(103%);

      }

      .parent {

      display: flex;

      justify-content: center;

      align-items: center;

      }

      img {

      margin-left: auto;

      margin-right: auto;

      justify-content: center;

      align-items: center;

      transition: filter 0.5s;

      overflow: hidden;

      }

      .texts{

      margin:auto;

      color: var(--white);

      font-family: 'Josefin Sans', sans-serif;

      font-size: 12px; /* Mengurangi ukuran font */
    padding: 2px 5px; /* Mengurangi padding atas/bawah dan kiri/kanan */
}

      .texts2{

      margin:auto;

      color: var(--white);

      font-weight:bolder; 

      font-family: sans-serif;

      opacity: 50%;

      }

      .texts3{

      margin:auto;



      font-family: 'Courier Prime', monospace;

      }

      html, body{

      height: 100%;

      margin:0;

      padding:0;

      overflow:hidden;

      }

      .container{

      display: flex;

      justify-content: center;

      height: 100%;

      }

      .middle{

      display: flex;

      align-items: center;

      justify-content: center;

      height: 100%;

      }

      .cusbtn {

    content: ' ';

      background-color: #4caf4f00;

      border: 0.1rem solid var(--white);

      color: var(--white);

      padding: 10px 27px;

      text-align: center;

      text-decoration: none;

      display: inline-block;

      font-size: 20px;

      margin: 4px 2px;

      cursor: pointer;

    }

      .boxborder {

      border: 0.1rem solid var(--white);

      padding: 0;

    }

    .drp {

    font-size: 15px;

    color: var(--white);

    background: #000000;

    font-family: 'Roboto', sans-serif;

    }



.type {

  display:inline-block;



  vertical-align: bottom;

}



.type > span {

  color: #14f3db;

  display:grid;

  overflow: hidden;

  height:1.2em;

}



.type span span {

  width:0%;

  line-height: 1.7;

  max-width:max-content;

  overflow: hidden;

  height:inherit;

  word-break:break-all;

  animation:

    t 2s linear infinite alternate,

    m 12s steps(3) infinite;

}

    .type span span:before {

      content:" ";

      display:inline-block;

    }



    @keyframes t{

      90%,100% {width:100%}

    }



    @keyframes c{

      0%,100%{box-shadow:3px 0 0 #0000}

      50%{box-shadow:3px 0 0 white}



    }



    @keyframes m{

      100% {transform:translateY(-300%)}

          }