/*
Filename: main.css
*/
/* There are known issues with the validator and the calc function... */
* {
    font-family: cursive, fantasy, "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

:root {

    --footercolor: black;
    --bodybgcolor: white;
    --bodyfontcolor: grey;

    /* background colors */
    --stdBGDesktop1: lightBlue;
    --stdBGDesktop2: wheat;
    --stdBGTablet: grey;
    --landscapeBG: aqua;
    --landscapeFG: brown;
    --hfbgColor: lightblue;
    --highlightColor: wheat;
    --companyLinkColor: blue;

}


html {
    font-size: 1em;
}

body {
    background: var(--bodybgcolor);
    box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.06);
    color: black;
    margin: 0 auto;
    padding: 2em 2em 4em;
}

footer {
    color: var(--footercolor);
}


header {
    margin-top: .2rem;
    padding: .25rem;
    width: 90%;
    height: calc(1.5rem + 1.3vw);
    position: fixed;
    /* this fails when a var(--hfbgColor) is put in place of lightblue */
    background: linear-gradient(blue, lightblue);
    /* background-color: var(--hfbgColor); */
    top: 0;
}

.footerstyle {

    background: linear-gradient(lightblue, blue);
    bottom: 0;
    color: var(--footercolor);
    font-size: calc(.25rem + .5vw);
    margin: auto;
    position: fixed;
    text-align: center;
    width: 90%;
}

.indent1 {
    margin-left: calc(2rem + .5vw);
    padding-left: 15px;
}

.techicons {
    max-width: 100px;
}

.fadeinout {
    animation-name: fadein-out;
    animation-duration: 5s;
    animation-iteration-count: 1;
}

.funheader {
  margin-left: 50px; 
  margin-top:  20px";
}

.funform {
    margin-top: 50px;  
    margin-left: 50px; 

}


.funbodyparts {
    margin: 50px;  
/*    padding: 10px;*/
    max-width: 45%;
}

@keyframes fadein-out {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

@media only screen and (min-width: 580px) {

    /* First breakpoint for tablet view */
    main {
        /* need to keep some leading when scaling the font size */
        line-height: calc(1.5rem + 1vw);
    }

    body {
        /* background: var(--stdBGTablet); */
        font-size: calc(1rem + 2vw);

    }

    footer {
        font-size: calc(.25rem + .5vw);
        /* color: var(--footercolor); */
    }
}

@media only screen and (min-width: 640px) and (orientation: landscape) {

    /* breakpoint for mobile phone in landscape mode */
    body {
        font-size: calc(1rem + 1.5vw);
        line-height: calc(1.5rem + 1vw);
        /* background: var(--landscapeBG); */
        /* color: var(--landscapeFG); */
    }

    footer {
        font-size: calc(.25rem + .5vw);
        /* color: var(--footercolor); */
    }
}


@media only screen and (min-width: 1024px) {

    /* Second breakpoint for desktop view */
    body {
        font-size: calc(1rem);
        line-height: calc(1rem);
        /* background: var(--stdBGDesktop2); */
    }

    footer {
        font-size: calc(.25rem);
        /* color: var(--footercolor); */
    }
}