@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root{
    --h1: 40px;
    --h2: 32px;
    --h3: 28px;
    --h4: 24px;
    --h5: 20px;
    --h6: 16px;

    --sub: 20px;

    --label: 16px;
    --ls: 5px;

    --body: 14px;

    --font-1: "Courier Prime", monospace;
    --font-2: "Archivo", sans-serif;

    --color-dark-100 : rgba(0, 18, 25, 1);
    --color-dark-75: rgba(0, 18, 25, 0.75);
    --color-dark-50: rgba(0, 18, 25, 0.5);
    --color-dark-25: rgba(0, 18, 25, 0.25);

    --color-white-100: rgba(243, 245, 249, 1);
    --color-white-75: rgba(243, 245, 249, 0.75);
    --color-white-50: rgba(243, 245, 249, 0.5);
    --color-white-25: rgba(243, 245, 249, 0.25);

    --color-blue-100: rgba(56, 131, 201, 1);
    --color-blue-75: rgba(56, 131, 201, 0.75);
    --color-blue-50: rgba(56, 131, 201, 0.5);
    --color-blue-25: rgba(56, 131, 201, 0.25);

    --bg-color: #ffffff; /* Default light mode */


}


* {
    margin : 0;
    padding: 0;
    box-sizing: border-box;
    list-style : none;
    text-decoration :none ; 
    font-family : 'Courier Prime' , sans-serif;
}

body{
    background: #f3f5f9;
    overflow-x: hidden;
    background: var(--bg-color) !important;

}

a {
    text-decoration: none;
    color: var(--color-dark-100);
}

a:hover {
    text-decoration: underline;
    color: var(--color-blue-100)
}


.space{
    padding:2vh;
}


/* .twospace {
    padding:10vh;
}  */

#changing-text {
    font-size: 1.5rem;
    transition: opacity 1s ease-in-out, color 0.5s ease-in-out; /* Smooth transitions for opacity and color */
    font-weight: bold;
}


.title__changing{
    text-align: center;
    padding-top: 3vh;
    font-size : 5em;


}

  .dark-mode {
    --bg-color: #121212; /* Dark mode */
  }