@import './colors.css';

/*
History of Cloud Service Providers
ITC Project

Date:   11/18/2025

Filename: base_style.css
*/

html {
    background-color: var(--primary-bg-color);
}

/* Page */
body {
    background-color: var(--primary-page-color);

    box-shadow: 0 0 10px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-color);
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.4em;
}

p {
    line-height: 1.5em;
}

main {
    animation: main-fade-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Background */
img.bg {
    background-image: url('../images/bg.svg');

    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
        125deg,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        125deg,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );

    opacity: 0.2;
}

/* Navigation */
.nav-container {
    background-color: var(--primary-navbar-color);
}

nav#main-nav {
    line-height: 4rem;
}

nav#main-nav > a {
    font-weight: bold;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

nav#main-nav > a:link, nav#main-nav > a:visited {
    color: var(--primary-link-color);
    text-decoration: none;
    text-align: center;
}

nav#main-nav > a:hover, nav#main-nav > a:active {
    color: var(--hover-link-color);
}

nav#main-nav > a.active {
    font-weight: bold;
    color: var(--active-link-color);
}

nav#main-nav > a::before {
    content: '';
    border-radius: 5px;
    background: var(--link-background-color);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
nav#main-nav > a:hover::before {
    opacity: 1;
    /* animation: nav-link-pulse 0.5s ease-in forwards; */
}


/* Mobile Button Menu */
#mobile-menu-button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
}

#mobile-menu-button img {
    width: 2rem;
    height: 2rem;
}


/* Forms */

fieldset {
    border-color: var(--primary-border-color);
}


/* Theme Toggle */
label#theme-toggle-label {
    float: right;
    margin: 1rem;
    cursor: pointer;
}

label#theme-toggle-label img {
    width: 2rem;
    height: 2rem;

    border-radius: 50%;
    box-shadow: 0 0 10px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-color);
}

/* Page Title */
h1#page-title {
    text-align: center;

    background-color: var(--primary-navbar-color);
}

/* Footer */
body > footer {
    text-align: center;
    line-height: 2em;
    color: var(--primary-text-color);
}

body > footer address {
    background-color: var(--secondary-bg-color);
}


/* Header */
.header-container {
    position: relative;
    overflow: hidden;
}

.header-container img {
    

    animation: header-pulse 20s infinite ease-in-out;
}

.header-container h1 {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    animation: header-text-pulse 20s infinite ease-in-out;
}


/* Animations */
@keyframes main-fade-in {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

@keyframes header-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes header-text-pulse {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.1) translate(15px, -15px);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* @keyframes nav-link-pulse {
    0% {
        right: 90%;
        left: 20%;
        opacity: 0;
    }
    25% {
        right: 50%;
        left: 20%;
        opacity: 1;
    }
    50% {
        right: 20%;
        left: 20%;
        opacity: 1;
    }
    75% {
        right: 20%;
        left: 50%;
        opacity: 1;
    }
    100% {
        right: 20%;
        left: 80%;
        opacity: 0;
    }
} */



/* Media Queries */
/* Mobile Devices */
@media screen and (max-width: 480px) {
    .header-container h1 {
        font-size: 1.5em;
    }

    h1#page-title {
        border-top: 1px solid var(--primary-border-color);
    }

    nav#main-nav > a {
        line-height: 3.0em;
    }

    nav#main-nav > a:nth-child(2n) {
        background-color: var(--link-first-nth-bg-color);
    }

    nav#main-nav > a:nth-child(2n + 1) {
        background-color: var(--link-second-nth-bg-color);
    }
}

/* Tablet */
@media screen and (min-width: 481px) {
    h1#page-title {
        border-radius: 10px;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
}


/* Dark Theme */
html[data-theme="dark"] {
    color: #fff;
}