* {
    font-family: Helvetica;

}
main img {
    /* width: calc(100vw / 5.09) !important; */
    /* height: calc(100vw / 5.09) !important; */
    /* background-color: white; */
    margin: 0;
    padding: 0;
    border: none;
    float: left;
    opacity: 0;
    border: 0px solid grey;
    box-shadow:  0px 0px 0 1px grey;
    box-sizing:border-box;
    /* border: 1px solid black; */
}
.ctn {
    background-color: black;
}
body {
    margin: 0;
    background-color: white;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
    width: 100%;
    overflow-x: hidden;


}

main {
    width: 100%;
    display:inline-block;
}


.placeholder {
    opacity: 0;
    background-color: black;
    /* will-change: opacity; */
    margin: 0;
    padding: 0;
    float: left;
    display: inline-block;
    
}
.placeholder p {
    color: blue;
    font-size: 13px;
    position: absolute;
    top: 50%;
    text-align: center;
    
}

.hovered {
    opacity: 1;
    will-change: opacity;
    transition: .3s;
    /* pointer-events: none; */
    /* background-color: blue; */
}

.unhovered {
    opacity: 0;
    will-change: opacity;
    transition: .3s;
    /* pointer-events: none; */
    /* background-color: blue; */
}

#MI {
    text-align: center;

    display: table-cell;
    vertical-align: middle;

    font-weight: bold;
    font-family: Helvetica, Arial,  sans-serif;

    color: black;
    /* pointer-events:visible; */
    
    /* mix-blend-mode: dif; */
    z-index: 30;
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 200;
    pointer-events: none;    
}
nav div button, nav button, nav div div, nav div img {
    pointer-events: visible;
}
nav div button:hover, nav button:hover, nav div div:hover, nav div img:hover  {
    cursor: pointer;
}

* {
    cursor: pointer !important;
}

nav p {
    pointer-events: visible;

}
nav:hover {
    
    /* pointer-events:none; */
}

#MI {
    position: absolute;
    z-index: 1000;
    /* visibility: visible; */
    top: 50vh;
    left: 50vw;
    margin: 0;
    text-anchor: middle;
    text-align: center;
    transform: translate(-53%,-50%);
}

.logo img, #burger {
    transform: scale(.8);
}

#reset {
    position: absolute;
    right: 40px;
    bottom: 30px;
    width: 80px;
}

/* rewrite navbar for index where reset button is at the bottom */
.navbar{
    height:100vh;
    align-items: baseline;
}

main {
    margin-top: 0;
    top: 0;
    padding-top: 0;
    border: 0;
    /* cursor: url('../../images/cursor.png'), auto; */

}

video {
    /* position: absolute; */
}

.preload video{
    pointer-events: none;
    position: absolute;
    width: 100%;
    overflow-x: hidden;
    left: 0;
    top: 0;
}