@font-face { font-family: 'Umbrella';
    src: url('Umbrella-Regular.woff') format(woff),
    url('Umbrella-Regular.woff2') format(woff2);
}

body {
    width: 100vw;
    overflow-x: hidden;
    background-color: rgb(0, 0, 0);
    font-family: Helvetica, sans-serif;
    color: ghostwhite;
    font-size: 1.4vw;
}

@keyframes Loopingtxt {
    0%{
        margin-left:6.35vw;
        color: ghostwhite;
    }
    20%{
        color: aquamarine;
    }
    50%{
        margin-left:-166.35vw;
        color: aquamarine;
    }
    70%{
        color: ghostwhite;
    }
    100%{
        margin-left:6.35vw;
        color: ghostwhite;
    }
}

@keyframes Loopingtxt2 {
    0%{
        margin-left:-266.35vw;
        color: ghostwhite;
    }
    20%{
        color: aquamarine;
    }
    50%{
        margin-left:-6.35vw;
        color: aquamarine;
    }
    70%{
        color: ghostwhite;
    }
    100%{
        margin-left:-266.35vw;
        color: ghostwhite;
    }
}

/*@keyframes zoomin {
    0%{
        font-size: 5.432vw;
        line-height: 5vw;
        color: ghostwhite;
    }
    5%{
        font-size: 15.432vw;;
        line-height: 13vw;
        color: aquamarine;
    }
    50%{
        font-size: 15.432vw;;
        line-height: 13vw;
        color: aquamarine;
    }
    55%{
        font-size: 5.432vw;
        line-height: 5vw;
        color: ghostwhite;
    }
    100%{
        font-size: 5.432vw;
        line-height: 5vw;
        color: ghostwhite;
    }
}*/


.bigtitle{
    position:relative;
    font-family: 'Umbrella';
    color: ghostwhite;
    font-size: 36vw;
    text-align: left;
    margin-top: -16vw;
    margin-bottom: -5vw;
    transition: 1250ms;
    transition-timing-function: ease;
}

.bigtitle:hover {
    position:relative;
    font-family: 'Umbrella';
    color: aquamarine;
    font-size: 36vw;
    text-align: left;
    margin-top: -16vw;
    margin-left: -40vw;
    margin-bottom: -5vw;
    transition: 1250ms;
    transition-timing-function: ease;
}

.textbox{
    position: relative;
    display: block;
    width: 100vw;
    height: fit-content;
    background-color: black;
}

.glyphbox{
    display: block;
    margin-top: 10vw;
    width: fit-content;
    height: fit-content;
    margin-top: 15vw;
    margin-bottom: -10vw;
    background-color: black;
}

.glyph{
    display: inline-block;
    font-family: 'Umbrella';
    color:ghostwhite;
    font-size: 7.716vw;
    max-width: 78vw;
    margin-left: 6.35vw;
    margin-top: 1vw;
    margin-bottom: 2vw;
    line-height: 9vw;
}

#samplesentence{
    position: relative;
    text-align: left;
    display: block;
    font-family: 'Umbrella';
    color: ghostwhite;
    font-size: 15.432vw;
    margin-left: 6.35vw;
    min-width: 300vw;
    margin-top: 1vw;
    margin-bottom: -9vw;
    animation-name: Loopingtxt;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

#samplesentence2{
    position: relative;
    text-align: left;
    display: block;
    font-family: 'Umbrella';
    color: ghostwhite;
    font-size: 15.432vw;
    margin-left: 6.35vw;
    min-width: 300vw;
    margin-top: 1vw;
    margin-bottom: -9vw;
    animation-name: Loopingtxt2;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.biglyph{
    position: relative;
    text-align: left;
    display: block;
    font-family: 'Umbrella';
    color: ghostwhite;
    font-size: 5vw;
    margin-left: 6.35vw;
    width: 65vw;
    line-height: 5vw;
    margin-top: 0.5vw;
    margin-bottom: 1vw;
    transition-duration: 750ms;
    transition-timing-function: ease;
    /*animation-name: zoomin;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;*/
}

.biglyph:hover {
    color: aquamarine;
    font-size: 7vw;
    margin-top: 2vw;
    margin-bottom: 2.5vw;
    width: 100vw;
    line-height: 5vw;
}

.smltitle{
    font-family: Helvetica, sans-serif;
    color: ghostwhite;
    margin-top: 10vh;
    font-size: 2.2vw;
    margin-left: 6.35vw;
}

.link{
    color: ghostwhite;
    text-decoration: none;
}

.link:hover{
    color: aquamarine;
    text-decoration: none;
}

p{
    text-align: left;
    margin-left: 6.4vw;
    min-width: 48vw;
    max-width: 61vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.right {
    text-align: right;
    margin-top: 11vw;
    margin-bottom: 1.5vw;
    max-width: 87vw;
    position: relative;
}

.linebreak {
    position: relative;
    display: inline-block;
    height: 1px;
    min-width: 100vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0px;
    background-color: ghostwhite;
}

#linebreakspecial {
    position: absolute;
    display: inline-block;
    height: 1px;
    min-width: 100vw;
    margin-top: 0vw;
    margin-bottom: auto;
    margin-left: 0px;
    background-color: ghostwhite;
}

#imgbox1 {
    position: relative;
    display: inline-block;
    width: 42.6vw;
    height: 80vh;
    margin-left: 6.4vw;
    margin-top: 1vw;
    margin-bottom: 0vw;
    background-color: black;
}

#imgbox2 {
    position: relative;
    display: inline-block;
    width: 75vw;
    height: 80vh;
    margin-left: 6.4vw;
    margin-top: 1vw;
    margin-bottom: 0vw;
    background-color: black;
}

#imgbox3 {
    position: relative;
    display: inline-block;
    width: 85vw;
    height: 80vh;
    margin-left: 6.4vw;
    margin-top: 1vw;
    margin-bottom: 0vw;
    background-color: black;
}

#image {
    display: inline-block;
    position: absolute;
    margin-left: 6.4vw;
    height: 80vh;
}

#image2 {
    display: inline-block;
    position: absolute;
    margin-left: 6.4vw;
    height: 80vh;
}

#image3 {
    display: inline-block;
    position: absolute;
    margin-left: 6.4vw;
    height: 80vh;
}

#decor1 {
    color: aquamarine;
    position: absolute;
    display: inline-block;
    font-family: 'Umbrella';
    font-size: 100vh;
    transform:translate(43%,-26%);
    transition-duration: 250ms;
    visibility: hidden;
    opacity: 0;
}

#decor2 {
    color: aquamarine;
    position: absolute;
    display: inline-block;
    font-family: 'Umbrella';
    font-size: 95vh;
    transform:translate(53%,-27%);
    transition-duration: 250ms;
    opacity: 0;
}

#decor3 {
    color: aquamarine;
    position: absolute;
    display: inline-block;
    font-family: 'Umbrella';
    font-size: 49vh;
    transform:translate(86.4%,-5%);
    transition-duration: 250ms;
    opacity: 0;
}

.caption {
    font-family: Helvetica, sans-serif;
    font-size: 1.4vw;
    margin: 0vw;
    text-align: left;
}

#imgbox1:hover #decor1{
    visibility: visible;
    opacity: 0.8;
}

#imgbox2:hover #decor2{
    opacity: 0.8;
}

#imgbox3:hover #decor3{
    opacity: 0.8;
}

.tight {
    margin-bottom: -10vw;
}

.hide {
    opacity: 0;
}