/**************************TEXT SELECTION***********************/
*:not(div)::selection {
    background: var(--mainColor);
    color: var(--fontColor);
}

*:not(div)::-moz-selection {
    background: var(--mainColor);
    color:var(--fontColor);
}

*:not(div)::-webkit-selection {
    background: var(--mainColor);
    color:var(--fontColor);
}

/**************************HTML & BODY***********************/
html{
    font-size: 28px;
    scroll-behavior: smooth;


}

body, html {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background:var(--mainColor);
}

body {
    /* margin-top: -1px; 
    border-top: 1px solid;
    margin-bottom: 2px; */
    background: var(--bg-color);
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    display:flex;
    flex-direction: column;
    min-height: 100%;

}

/**************************HEADER & NAVIGATION***********************/
body > header{
    padding:1.5rem;
    position: fixed;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items: center;
	nav a{
		text-decoration: none;
	}
}

nav{
    margin-left: auto;
}

main{
	width: 100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    header{
		margin: 1.5rem;
		h1{
            margin-top: 3rem;
        }
    }
	section {
		width:100%;
	}
	footer{
	}
}

main.home{
    header{
		flex: 1 1 auto;

	}
	section {
		flex: 0 0 40rem;
	}
	footer{
		flex: 0 0 0;
	}
}

main.image{
    header{
		flex: 0 0 auto;
    }
	section {
		flex: 1 1 auto;            /* fill remaining vertical space */
		display: flex;             /* turn into a flex container */
		align-items: center;       /* center vertically */
		justify-content: center;   /* center horizontally */
		overflow: hidden;          /* hide any tiny overflow */
		padding: 0 1rem;
	}
	footer{
		flex: 0 0 auto;
		margin: 1.5rem;
	}
}

.logo{
    width:5.8rem;

    & svg{
        width:100%;
    }

    & path, rect{
        fill:var(--highlightColor);
    }
}

.bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/**************************FOOTER***********************/
body > footer{
    position: fixed;
    bottom:0;
    display:flex;
    width:50%;
    margin-left: 50%;

    & ul{
        display:flex;
        padding:.5rem;
        & a{
            font-size: .6rem;
            margin-right: .5rem;
        }
    }

    & ul.colorSwitch{
        margin-left: auto;

        & li{
            border-radius: 50%;
            width:1.5rem;
            height:1.5rem;
            margin-right: .25rem;
            cursor: pointer;
        }
    }

    & ul.footerNavi{
        padding-left: 0;
    }

}