@font-face {
    font-family: "Ortica";
    src: url("font/PinyonScript-Regular.ttf");
  }


*,
*:after,
*:before {
    box-sizing             : border-box;
    -webkit-box-sizing     : border-box;
    -moz-box-sizing        : border-box;
    -webkit-font-smoothing : antialiased;
    -moz-font-smoothing    : antialiased;
    -o-font-smoothing      : antialiased;
    font-smoothing         : antialiased;
    text-rendering         : optimizeLegibility;

}

body {
    padding: 0;
    margin:0;
    overflow: hidden;
}

/* unvisited link */
a:link, a:visited,  a:hover,   a:active   {
    color: #5b5991;
    text-decoration: none;
  }
  
 


.mediPlayer {
   margin: 0 0 auto;
 
}
.mediPlayer .control {
    opacity        : 0; /* transition: opacity .2s linear; */
    pointer-events : none;
    cursor         : pointer;
}

.mediPlayer .not-started .play, .mediPlayer .paused .play {
    opacity : 1;

}

.mediPlayer .playing .pause {
    opacity : 1;

}

.mediPlayer .playing .play {
    opacity : 0;
}

.mediPlayer .ended .stop {
    opacity        : 1;
    pointer-events : none;
}

.mediPlayer .precache-bar .done {
    opacity : 0;
}

.mediPlayer .not-started .progress-bar, .mediPlayer .ended .progress-bar {
    display : none;
}

.mediPlayer .ended .progress-track {
    stroke-opacity : 1;
}

.mediPlayer .progress-bar,
.mediPlayer .precache-bar {
    transition        : stroke-dashoffset 500ms;
    stroke-dasharray  : 298.1371428256714;
    stroke-dashoffset : 298.1371428256714;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

img {
    width: 100vw;
    height:100vh;
    object-fit: cover;
    position: fixed;
    z-index: -10;
}

h1 {
    font-family: sans-serif;
    font-weight: 100;
    font-size: 8vw;
    padding: 0 10vw;
    color: #5b5991;
    text-align: center;
    line-height: 1;
    margin:0;
}

h3 {
    font-family: sans-serif;
    color: #5b5991;
    font-weight: 100;
    font-size: 3vw;
    margin:0;
}

.pinyon {
    font-family: "arial";
    font-size: 11vw;
}

@media only screen and (max-width: 600px) {
    h1 {
     
        font-size: 12vw;
        padding: 0 1vw;
   
    }
    
    h3 {
        color: #5b5991;
        font-weight: 100;
        font-size: 6vw;
    }

    .pinyon {
        font-family: "arial";
        font-size: 15vw;
    }
  }