@import "style.css";
@import "animations.css";

:root {
    --header-text-size: 4vh;
    --header-indent: 25vw;
    --header-padding: calc(var(--header-text-size) / 2);

    --list-button-width: 35vw;
    --list-button-height: 15vh;
    --list-padding-left: calc(5vw + var(--header-indent));

    --list-vertical-gap: 2vh;
    --list-horizontal-gap: 2.5vw;
    
    --logo-size: 10vh;
    --logo-glow-size: calc(var(--list-text-size) / 2);
    --logo-padding: 2vh;

    --list-text-size: 8vh;
    --text-glow-size: calc(var(--list-text-size) / 6);
    --text-glow-transition-time: 0.75s;
    --list-button-glow-transition-time: 2s;
}

a {
    text-decoration: none; /* remove underline */
}

.header {
    opacity: 0;
    animation: fadeAndSlide 1.5s ease forwards;
    animation-delay: 0.5s; /* wait after page load */

    padding-left: var(--header-indent);
    width: 20vw;

    font-size: var(--header-text-size);
    color: var(--text-color);
}

h1 {
    margin: 0;
    padding: 0 0 var(--header-padding);
}

.logo-list {
    display: flex;
    flex-direction: column;  /* stack sections vertically */
    gap: var(--list-vertical-gap);               /* space between sections */
    padding-left: var(--list-padding-left);
}

.logo-list-element {
    display: flex;           /* horizontal layout */
    justify-content: flex-start;  /* aligns items to the left */
    align-items: center;     /* vertically center items */

    gap: var(--list-horizontal-gap);               /* space between image and text */
    padding-left: var(--logo-padding); /* padding to the left of the entire box */
    width: var(--list-button-width); /* horizontal clickable space */
    height: var(--list-button-height);
    
    background-color: var(--menu-color);
    
    opacity: 0; /* start with no opacity */
    position: relative;               /* required for transform movement */
    animation: fadeAndSlide 2s ease forwards;
    animation-delay: 2s;              /* wait after page load */
    
    filter: drop-shadow(0 0 0vh var(--text-color)); /* start with no glow */
    transition:
        filter var(--list-button-glow-transition-time) ease,
        text-shadow var(--text-glow-transition-time) ease;
}

.logo-list-element:hover {
    text-shadow: 0 0 var(--text-glow-size) var(--text-color);

    filter: drop-shadow(0 0 15px var(--text-color));
    /* transition: filter var(--list-button-glow-transition-time) ease;  /* smooth fade-in */
}

.logo {
    height: var(--logo-size);
    width: auto;
    padding-top: var(--logo-padding);
    padding-bottom: var(--logo-padding);

    transition: filter var(--text-glow-transition-time) ease;  /* smooth fade-in */
}

.logo-list-element:hover .logo {
    filter: drop-shadow(0 0 var(--logo-glow-size) var(--text-color));
}

.list-text {
    color: var(--text-color);
    font-size: var(--list-text-size);
}