/*@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: Kollektif;
    src: url(/assets/Kollektif.ttf);
}

*, *:after, *:before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    font-family: Kollektif;
}

.fa, .fa:after, .fa:before{
    font-family: FontAwesome;
}

.marvel-device{
    display:inline-block;
    position:relative;
    /*-webkit-box-sizing:content-box !important;*/
    /*box-sizing:content-box !important*/
}
.marvel-device .screen{
    width:100%;
    position:relative;
    height:100%;
    z-index:3;
    background:white;
    overflow:hidden;
    display:block;
    border-radius:1px;
    -webkit-box-shadow:0 0 0 3px #111;
    box-shadow:0 0 0 3px #111
}
.marvel-device .top-bar,.marvel-device .bottom-bar{
    height:3px;
    background:black;
    width:100%;
    display:block
}
.marvel-device .middle-bar{
    width:3px;
    height:4px;
    top:0px;
    left:90px;
    background:black;
    position:absolute
}



.marvel-device.nexus5{
    padding: 20px 8px 18px 8px;
    /* width: 185px; */
    width: 45vh;
    /* height: 310px; */
    height: 95vh;
    background: #1e1e1e;
    border-radius: 20px;
    margin-top: 19px;
}
.marvel-device.nexus5:before{
    border-radius:600px / 50px;
    background:inherit;
    content:'';
    top:0;
    position:absolute;
    height:103.1%;
    width:calc(100% - 26px);
    top:50%;
    left:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}
.marvel-device.nexus5 .top-bar{
    width:calc(100% - 8px);
    height:calc(100% - 6px);
    position:absolute;
    top:3px;
    left:4px;
    border-radius:20px;
    background:#181818
}
.marvel-device.nexus5 .top-bar:before{
    border-radius:600px / 50px;
    background:inherit;
    content:'';
    top:0;
    position:absolute;
    height:103.0%;
    width:calc(100% - 26px);
    top:50%;
    left:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}
.marvel-device.nexus5 .bottom-bar{
    display:none
}
.marvel-device.nexus5 .sleep{
    width:3px;
    position:absolute;
    left:-3px;
    top:110px;
    height:100px;
    background:inherit;
    border-radius:2px 0px 0px 2px
}
.marvel-device.nexus5 .volume{
    width:3px;
    position:absolute;
    right:-3px;
    top:70px;
    height:45px;
    background:inherit;
    border-radius:0px 2px 2px 0px
}
.marvel-device.nexus5 .camera{
    background:#3c3d3d;
    width:10px;
    height:10px;
    position:absolute;
    top:8px;
    left:50%;
    z-index:3;
    margin-left:-5px;
    border-radius:100%
}
.marvel-device.nexus5 .camera:before{
    background:#3c3d3d;
    width:6px;
    height:6px;
    content:'';
    display:block;
    position:absolute;
    top:2px;
    left:-80px;
    z-index:3;
    border-radius:100%
}
.marvel-device.nexus5.landscape{
    padding:15px 50px 15px 50px;
    height:320px;
    width:568px
}
.marvel-device.nexus5.landscape:before{
    width:103.1%;
    height:calc(100% - 26px);
    border-radius:50px / 600px
}
.marvel-device.nexus5.landscape .top-bar{
    left:3px;
    top:4px;
    height:calc(100% - 8px);
    width:calc(100% - 6px)
}
.marvel-device.nexus5.landscape .top-bar:before{
    width:103%;
    height:calc(100% - 26px);
    border-radius:50px / 600px
}
.marvel-device.nexus5.landscape .sleep{
    height:3px;
    width:100px;
    left:calc(100% - 210px);
    top:-3px;
    border-radius:2px 2px 0px 0px
}
.marvel-device.nexus5.landscape .volume{
    height:3px;
    width:45px;
    right:70px;
    top:100%;
    border-radius:0px 0px 2px 2px
}
.marvel-device.nexus5.landscape .camera{
    top:50%;
    left:calc(100% - 18px);
    margin-left:0;
    margin-top:-5px
}
.marvel-device.nexus5.landscape .camera:before{
    top:-100px;
    left:2px
}