/*TODO: Divide into multiple files for better organization */
@font-face {
    font-family: "My Comic Font";
    src: url("../assets/fonts/comic-font.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --nice-blue: deepskyblue;
    --primary-font: "My Comic Font", "Comic Sans MS", "Comic Sans", cursive;
    --primary-font-color: azure;
    --secondary-font-color: #00AAFF;
}

h1, h2 {
    font-family: var(--primary-font);
    color: var(--primary-font-color);
    text-shadow: -2px 0 var(--secondary-font-color), 0 2px var(--secondary-font-color), 2px 0 var(--secondary-font-color), 0 -2px var(--secondary-font-color);
    text-align: center;
    margin: 0 0 1vh 0
}

h1 {
    font-size: min(2em, 7vw);
}

h2 {
    font-size: min(1.5em, 5vw);
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--nice-blue);
    text-align: center;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 100vh;
    box-sizing: border-box;
    padding: 2vh 2vw;
}


main {
    padding: 33vh 10vw;
}

.temporary-empty {
    font-family: var(--primary-font);
    color: var(--primary-font-color);
    font-size: min(1.5em, 4vw);
    text-align: center;
    margin: 0 0 1vh;
}

.projects-link-container {
    font-family: var(--primary-font);
    font-size: 1.5em;
    color: var(--secondary-font-color);
    background-color: floralwhite;
    border: 4px solid #00AAFF; 
    border-radius: 10px; 
    text-align: center;
    padding: 10px 20px; 
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    width: fit-content; 
    display: inline-block;
    box-shadow: 5px 5px 5px #008BD1;
}

.projects-link-container a,
.projects-link-container a:visited,
.projects-link-container a:hover,
.projects-link-container a:active {
    color: inherit;
    text-decoration: none;
}

.projects-link-container:hover {
    background-color: #00AAFF; 
    color: floralwhite; 
    transform: scale(5);
}