﻿html {
    overflow: hidden;
    height: 100vh;
}

@font-face {
    font-family: 'LibreBaskerville-Bold';
    src: url('LibreBaskerville-Bold.ttf') format('truetype');
}

body {
    background: #000;
    margin: 0;
    overflow: auto;
    height: 100vh;
    padding-top: 10vh;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    -ms-scroll-snap-points-x: repeat(100%);
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-align: start;
}

header {
    height: 40vh;
    width: 100vw;
    background: #000;
    top: 0;
    font-family: LibreBaskerville-Bold;
    font-size: 7.5vw;
    color: white;
    transform: translate(2.5%,30%);
}


section {
    min-height: 95vh;
    scroll-snap-align: start;
}


    section:nth-of-type(even) {
        min-height: 100vh;
    }

    section:nth-of-type(odd) {
        min-height: 100vh;
    }

.outer {
    min-height: 250vh;
    min-width: 100vw;
}

.canclass {
    position: sticky;
    max-height: 100vh;
    max-width: 100vw;
    top: 10%;
    background: #000;
}

.canvass {
    position: inherit;
    transform:translate(10%,-20%);
    max-height: 80vh;
    max-width: 80vw;
}

.textoncanvas {
    position: sticky;
    max-height: 80vh;
    max-width: 80vw;
    top: 20%;
    z-index: 1;
    transform: translate(22%,-15%);
    font-size: 6vw;
    color: white;
}
.text {
    position: sticky;
    max-height: 100vh;
    max-width: 100vw;
    top: 20%;
    z-index: 1;
    font-size: 6vw;
    color: white;
}
.texttwo {
    position: sticky;
    max-height: 100vh;
    max-width: 100vw;
    top: 5%;
    z-index: 1;
    font-size: 3vw;
    color: white;
}
.linkclass {
    position: absolute; 
    top:100%;
    left:10%; 
    font-size: 7vw; 
    color: white; 
    transform: translate(22%,100%);
}
model-viewer {
    width: 1600px;
    height: 800px;
}
.myim {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 80%;
    top: 10%;
}

