/* fonts */

@font-face {
    font-family: 'Playfair';
    src: url('Playfair-VariableFont_opsz\,wdth\,wght.woff');
}
@font-face {
    font-family: 'Playfair SemiBold';
    src: url('Playfair_144pt-SemiBold.woff');
}
@font-face {
    font-family: 'Playfair Regular';
    src: url('Playfair_144pt-Regular.woff');
}
@font-face {
    font-family: 'Playfair Italic';
    src: url('Playfair_144pt-Italic.woff');
}
@font-face {
    font-family: 'frangmentMono';
    src: url('FragmentMono-Regular.woff');
}

body{
    background-color: white;
    font-family: 'Playfair Regular';
    margin:2vw; 
    font-size:2.1vw;
}

img {
    width: 100%;
}

div.largeText{
    font-size: 7em;
    font-family: 'Playfair SemiBold';
}
div.italic{
    font-family: 'Playfair Italic';
}
div.largeText2{
    font-size: 15.2vw;
}

div.smallText{
    font-size:2vw;
    margin-top:46px;
}
div.smallestText{
    font-size:1vw;
}
div.smallerText{
    font-size:1.5vw;
}


div.frag{
    font-family: 'frangmentMono';
}

div.para{
    font-size: 3em;
    line-height: 0.7em;
}

div.bgBlack{
    background-color: black;
}
div.whiteText{
    color: white;
}
div.align{
    text-align: center;
}
div.paraSmall{
    padding-left: 3vw;
}

/* layout */
div.mt11{
    margin-top: 11vw;
}
div.mt15{
    margin-top: 15vw;
}
div.mt2{
    margin-top: 2vw;
}
div.mt5{
    margin-top: 5vw;
}
div.mt3{
    margin-top: 3vh;
}
div.mtminus10{
    margin-top: -10vw;
}
div.widthAuto{
    width:auto;
}
div.width20{
    width:20%;
}
div.width33p{
    width: calc(33% - 3vw); 
}
div.width33{
    width: 33%;
}
div.width50{
    width:50%;
}

div.width66{
    width:66%;
}
div.width70{
    width:70%;
}
div.width100{
    width:100%;
}
div.width90{
    width:90%;
}
div.width60{
    width:60%;
}
div.mb330{
    margin-bottom: 330px;
}
div.mb125{
    margin-bottom: 125px;
}
div.mb80{
    margin-bottom: 80px;
}
div.mb15{
    margin-bottom: 15vw;
}
div.mlAuto{
    margin-left: auto;
}
div.ml13{
    margin-left: 13vw;
}
div.mrAuto{
    margin-right:auto;
}
div.pb40{
    padding-bottom: 40px;
}
div.pd20{
    padding: 20px;
}

div.container {
    display: flex;
    flex-wrap:wrap;
}
div.sketchrnn{
    margin-left: auto;
    margin-right:auto;
    width: 95.8vw;
    height: 45.139vw;
    position: relative;
    overflow: hidden;
}

div.sketchrnnWindow {
    position: absolute;
    top: -100px;
    left: -2px;

}
div.border{
    border:1.5px solid black;
}
div.fixed{
    position:fixed;
}
div.contain{
    position: relative;
    text-align: center;
}
div.top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    color:black;
    text-align: left;
    font-style: light;
}
div.rotate180{
    transform: rotate(180deg);
}
div.rotate90{
    transform: rotate(90deg);
}
div.containerRow{
    width: 100%; 
    display: table;
}
div.contRow{
    display:table-row;
}
div.contCell{
    display:table-cell;
}

div.scrolltext {
    height: 40vh;
    width:60%;
    overflow:auto;
    /* border:2px solid black; */
    padding:2%
}
div.border{
    border:2px solid white;
}
div.box{
    width: 350px;
    height: 300px;
    padding: 10px;
    border: 1px solid black;
    margin-left: 50px;
}
div.time{
    text-align: center;
    font-family: 'fragmentMono';
    font-size: 1vw;
    margin-left: 60px;
}
div.box1{
    width: 28vw;
    height: 300px;
    border: 1px solid white;
    margin-left: 10px;
    margin-top: 10px;
}