/*FONTS*/
 @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

 ::selection {
   background-color: #1A1919;
   color: #F5F6F7;
 }

 html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   font-family: "Work Sans",Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight: 300;
   font-style: normal;
   font-size: 1rem;
   background: #fafafc;
 }
.mz-main{
  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
 }
 .mz-main {
   position: relative;
   width: 90%;
   margin: 0 auto;
   padding: 0;
   color: #333;
 }
p{margin:0 0 1rem;}
 h1,
 h2,
 h3,
 h4,
 h5 {
   margin: 0 0 1rem 0;
 }

 h1 {
   text-transform: none;
   font-family: Julius Sans One, Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight: 600;
   font-size: 2.2rem;
   letter-spacing: -2px;
   margin-bottom: 0.5rem;
 }
 h2 {
    text-transform: none;
    font-family: "Work Sans", Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
    letter-spacing: normal;
    margin-bottom:2rem;
  }

 h3,
 h4,
 h5 {
   font-family: "Work Sans", Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight: 300;
   font-style: normal;
   font-size: 1rem
 }

.mz .header {
    display: flex;
    width: 100%;    
}

.mz .row--header {
    display: flex;
    flex: 1;
    width: 100%;
    margin:0;
    align-items: center;
    justify-content: space-between;
}

.mz .mz-brand{
    display: block;
    margin: 0;
    text-decoration: none;
    font-size:1rem;
    text-transform: uppercase;
}


 .mz-btn-primary,  .mz-btn-primary:hover{
    display:block;
    border-radius: 32px;
    font-weight: 300;
    margin: 0 auto;
    padding: 1rem 2rem;
    border:1px solid #191919;
    text-decoration:none;
 }
 .mz-link, .mz-link:hover, .mz-link:active, .mz-link:visited{
    color: #191919;
 }
 .mz-btn-primary {
    color: #191919;
    background-color: transparent;
}
.mz-btn-primary:hover {
    color: #fff;
    background:#191919;
    text-decoration:none;
}
.mz-contact{
    margin-top:0;
}
.mz-contact p{
    margin:1rem auto 0;
}
.mz-profile-photo img{
    /* border-radius: 50%; */
    width:200px;
}
.mz-info-section, .mz-work-section, .mz-footer{
    /* background: #191919;
    color: #f1f1f1; */
    padding: 4rem;
    line-height:160%;
    display:flex;
    flex-direction: row;
}
.mz-info-section{
    margin:0 auto 4rem;
    width:60vw;
}
.mz-profile-info{
    margin: 0 2rem 2rem;
    text-align:left;
    width: 70vw;
}
/* 
.mz-info-section .mz-link{color:#f1f1f1} */
.mz-work-section{
    background: #f9f9f9;
}
.mz-work-section{
    color: #191919;
    display:flex;
    flex-direction:column;
    align-items: center;
}
.mz-work-section .mz-section-title{
    display:block;
    text-align: left;
}
.mz-work-section img, .mz-work-section .mz-section-title{
    width:60vw;
}
.mz-footer{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.mz-footer p{text-align: center}
.mz-footer a{color: #fff;}

@media only screen and (max-width: 1200px) {
    .mz-info-section{
        flex-direction: column;
    }
    .mz-profile-photo img{
        margin: 0 0 1rem;
    }
   .mz-profile-info{
        margin:0;
        width: auto;
   }
  }

 .sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
   height: 1px !important;
   margin: -1px !important;
   overflow: hidden !important;
   padding: 0 !important;
   position: absolute !important;
   width: 1px !important;
   white-space: nowrap !important;
 }

 .sr-only-focusable:focus,
 .sr-only-focusable:active {
   clip: auto !important;
   -webkit-clip-path: none !important;
   clip-path: none !important;
   height: auto !important;
   margin: auto !important;
   overflow: visible !important;
   width: auto !important;
   white-space: normal !important;
 }
.mz-interactive-baby-screens{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom:0;
}
     .playground{
         margin: 0 .6rem 2rem;
         padding: 0;
         background: #f1f1f1;
         border-radius: 32px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }
     .playground .baby_screen {
         transform: scale(1);
         position:relative;
         border-radius: 12px;
         background: #eee;
         box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
         -webkit-box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
         -moz-box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
         padding:12px 12px 48px;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         transition: transform .1s ease-in, background-color .1s ease-in;
     }
     .playground .baby_screen:hover{
         transform: scale(1.04); 
         background-color: #e9e9e9;
     }

     .playground #macPaint.baby_screen {
        position:relative;
        border-radius: 12px;
        background: #eee;
        box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
        -webkit-box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
        -moz-box-shadow: -1px 0px 148px -95px rgba(32,32,32,0.56) inset;
        padding: 6px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
     .playground #macPaint.baby_screen .baby_screen_viewport{
        background: #333; 
        border: 4px solid #333;
        border-radius: 8px;
        overflow:hidden;
        position: relative;
        display: grid;
        gap: 1px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        align-items: center;
    }

    .playground #macPaint .item1{
        background-color: #fff;
    }
    .playground #macPaint .item2{
        background-color: #111;
    }
    .playground #macPaint .item3{
        background-color: #666;
    }
    .playground #macPaint .item4{
        background-color: #999;
    }
    .playground #macPaint .item5{
        background-color: #ddd;
    }
    .playground #macPaint .item6{
        background: repeating-linear-gradient(
        -55deg,
        #333,
        #333 5px,
        #111 5px,
        #111 10px
        );
    }
    .playground #macPaint .item7{
        background-image: radial-gradient(circle at center, #111 0.15rem, #fff 0.15rem);
        background-position: 0 0;
        background-size: .5rem .5rem;
    }
    .playground #macPaint .item8{
        background-color: #fff;
    }
    .playground #macPaint .item9{
        background-color: #59c1d6;
    }
    .playground #macPaint .item10{
        background-color: #ffe96b;
    }
    .playground #macPaint .item11{
        background-color: #fbc15f;
    }
    .playground #macPaint .item12{
        background-color: #d664a6;
    }
    .playground #macPaint .item13{
         background-color: #a74b9e;
    }
    

    #macPaint .mac-paint-file{
        height: 120px;
        margin: 0 0 3px;
        background: #fff;
        border: 1px solid #000;
        border-radius: 4px;
    }
    #macPaint .mac-paint-file-headbar{
        border-radius: 4px 4px 0 0;
        background: linear-gradient(to bottom, #111,#111 50%,#fff 50%,#fff);
        background-size: 100% 2px;
        border-bottom:1px solid #000;
    }
   
    #macPaint .mac-paint-file-headbar span{
        padding: 0 .5rem;
        background:  #fff;
        text-align: center;
    }
    #macPaint .color-palette{
        display:grid;
        gap: 1px;
        grid-template-columns: repeat(8,30px);
        grid-template-rows: repeat(2,24px);
        align-items: center;
        justify-content: center;
        
    }
    #macPaint .color-palette .item{
        height:24px;
        cursor:pointer;
    }
    #macPaint .color-palette .wide {
        grid-column: span 2;
        grid-row: span 2;
        border:6px solid #fff;
        box-sizing: border-box;
    }
   #macPaint .color-palette .wide, #macPaint .color-palette .wide .item{height:100%;}
   #macPaint .color-palette #selectedColor.wide{border-top-left-radius:4px;}
   #macPaint .color-palette .item.item7{border-top-right-radius:4px;}