@font-face {
    font-family: "Bombardier";
    src: url("../font/bombardier.ttf");
}

html {
    overflow-x: hidden;
}

body {
    background-color: rgba(0,0,150,1);
    margin: 0;
    padding: 0;
    width: 100vw;
}

#canvas {
    position: absolute;
}

.containerTitle {
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin: auto;
    padding: 0;
    width: 100vw;
    height: 30vh;
    max-height: 300px;
    background-color: black;
    }

.title {
    position: relative;
    z-index: 2;

    width: 35vw;
    min-width: 500px;
    height: 17.5vh;

    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    color: white;
    text-align: center;
    font-size: max(7.5vw, 75px);
    font-family: "bombardier";
    line-height: 17.5vh;

    -webkit-text-stroke-width: max(0.325vw, 3.5px);
    -webkit-text-stroke-color: gray;
}

.titleImg {
    position: absolute;
    width: 45vw;
    min-width: 300px;
    height: 45vw;
    min-height: 300px;
    opacity: 0.5;

    top: 17vh;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.containerNavbar {
    position: relative;
    margin: auto;
    width: 100vw;
    height: 5vh;
    background: linear-gradient(90deg, rgba(0,0,0,1) 10vw, rgba(0,0,75,1) 30vw, rgba(0,0,75,1) 70vw, rgba(0,0,0,1) 90vw);

    border-style: solid;
    border-width: 0.4vh 0px 0.4vh 0px;
    border-image: linear-gradient(90deg, rgba(0,0,0,1) 10vw, rgba(0,0,255,1) 30vw, rgba(0,0,255,1) 70vw, rgba(0,0,0,1) 90vw) 1;
}

.navbarBox {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: auto;
    width: 40vw;
    min-width: 400px;
}

.navbarButton {
    position: relative;
    z-index: 5;
    width: 7vw;
    height: 5vh;
    min-width: 71.5px;
    
    color: white;
    background-color: black;
    border-color: blue;
    
    border-style: solid;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
    transform: translateY(-5.5%);
    
    font-family: "bombardier";
    font-size: max(1.5vw, 20px);
    text-decoration: none;
    text-align: center;
    line-height: 5vh;
}

.navbarBox #HO::after {
    content: "Home";
}

.navbarBox #CV::after {
    font-size: max(1.15vw, 10px);
    content: "CV & Resume";
}

.navbarBox #PO::after {
    content: "Portfolio";
}

.navbarBox #ME::after {
    content: "Media";
}

.navbarBox #CO::after {
    content: "Contact";
}

.navbarButton:hover {
    background-color: rgba(0, 0, 75, 1);
}

.containerContents {
    position: relative;
    z-index: 0;
    margin: auto;
    width: 50vw;
	min-width: 50vw;
    background-color: black;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
	
    background-image: linear-gradient(90deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%),
                      linear-gradient(270deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%);

    box-sizing: border-box;
    padding: 3vw;
    border-style: solid;
    border-color: blue;
    border-width: 0px 0.4vh 0px 0.4vh;
}

.contentElement {
    border-style: solid;
    
    border-color: blue;
    border-width: 0.4vh;

    overflow: hidden;
    
    width: 20vw;
    height: 20vw;

    background-image: linear-gradient(00deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%),
                      linear-gradient(90deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%),
                      linear-gradient(180deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%),
                      linear-gradient(270deg, rgba(0,0,0,0) 95%, rgba(0,0,75,1) 100%);
}

.contentElement iframe {
    transform: scale(0.5);
    position: relative;
    top: -10vw;
    left: -10vw;
    width: 40vw;
    height: 40vw;
    z-index: -2;
}

.contentElementText {
    position: relative;
    top: -165%;
    transform: translate(-50% -50%);

    text-align: center;
    line-height: 3vw;
    text-decoration: underline;
    text-decoration-color: blue;
    font-family: "bombardier";
    font-size: 2.5vw;

    color: white;
    background-color: blue;

    width: 20vw;
    height: 3.5vw;
}

.containerFooter {
    position: relative;
    z-index: 0;
    padding: 0;
    margin: auto;
    width: 50vw;
	min-width: 50vw;
    height: 12.5vh;
    min-height: 8.5vh;
    background-color: rgba(0, 0, 60, 1);

    box-sizing: border-box;
    border-style: solid;
    border-color: blue;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
}

.containerFooter p {
    position: relative;
    font-family: bombardier;
    color: white;
    font-size: max(1.2vw, 13.5px);
    padding: 0;
    margin: 0;

    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.alphaGradient {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(90deg, rgba(0,0,0,1) 10vw, rgba(255,255,255,0) 30vw, rgba(255,255,255,0) 70vw, rgba(0,0,0,1) 90vw);
}

@media only screen and (max-width: 600px) {
    .containerTitle {
        max-height: 150px;
    }
    .titleImg {
        top: 10vh;
        opacity: 0.75;
    }
    .navbarBox {
        scroll-snap-type: x mandatory;
        overflow-x: scroll;
        margin: 0;
        padding: 0.4vh;
        top: -0.4vh;
        scrollbar-width: none;
        min-width: 98vw;
    }
    .navbarBox #HO::after {
        content: "<   Home   >";
    }
    .navbarBox #CV::after {
        font-size: 7vw;
        content: "<   CV & Resume   >";
    }
    .navbarBox #PO::after {
        content: "<   Portfolio   >";
    }
    .navbarBox #ME::after {
        content: "<   Media   >";
    }
    .navbarBox #CO::after {
        content: "<   Contact   >";
    }
    .navbarButton {
        scroll-snap-align: center;
        flex-shrink: 0;
        width: 98vw;
        border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
        font-size: 7vw;
    }
    .containerContents {
        flex-direction: column;
        align-items: center;
    }
    .contentElement {
        width: 40vw;
        height: 40vw;
    }
	.containerFooter {
		height: 8.5vh;
	}
}