*{
    margin: 0;
}
body{
    background-color: #ececec;
}

/* HEADER */
header{
    width: 330px;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
}
header .mobile-btn{display:none;}
header h1{
    font-weight: 400;
    margin-bottom: 5px;
}
header h1 i{
    margin-right: 10px;
    color:#fe9500;
    background-color: #000;
    border-radius: 5px;
}
header h2{
    font-size: 14px;
    margin-bottom: 15px;
}
header h2 a{
    color:#535353;
}
header label{
    font-size: 24px;
    color: #252525;
    margin-right: 5px;
}
header #theme{
    border-radius: 3px;
}
header #theme, header #theme option{
    font-size: 17px;
    background-color: #696564;
    color: #fff;
    border: none;
    padding: 5px 10px;
    outline: none;
}

/* CALCULATOR */
#calculator{
    width:337px;
    height:580px;
    margin: 50px auto 0 auto;
}
#calculator .results{
    width:100%;
    margin:0 auto;
}
#calculator .results .result{
    width: 92%;
    height: 150px;
    padding-bottom: 26px;
    position: relative;
    margin: 0 auto;
}
#calculator .results .result span{
    color: #fff;
    font-size: 80px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 100;
    position: absolute;
    bottom: 30px;
    right: 0;
    line-height: 1;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: right;
}
#calculator .row{
    width:92%;
    height: 69px;
    margin: 0 auto 12px auto;
    display:flex;
    justify-content:space-between;
}
#calculator .row .btn{
    width: 69px;
    height: 69px;
    cursor: pointer;
    
}
#calculator .row .large {width: 150px;}





/* IPHONE LAYOUT */
.iphone{
    background-color: #000;
}
.iphone .results .operations{display:none}
.iphone .row .btn{
    background-color:#333333;
    border-radius: 50px;
    color:#fff;
    font-size: 25px;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
    outline: none;
    border:none;
}
.iphone .row .large{
    text-align: left;
    box-sizing: border-box;
    padding-left: 30px;
}
.iphone .row .btn:hover{background-color: #636363;}
.iphone .row:nth-of-type(2) .btn{
    background-color: #a4a4a4; 
    color:#000;
}
.iphone .row:nth-of-type(2) .btn:hover{background-color:#bebebe}
.iphone .row:nth-of-type(2) .btn:nth-of-type(2){
    font-size: 20px;
}
.iphone .row .btn:last-child{
    background-color: #fe9500; 
    color:#fff;
}
.iphone .row .btn:last-child:hover{
    background-color:#fff; 
    color: #fe9500;
}
.iphone .row .btn:last-child:focus{
    background-color:#fff; 
    color: #fe9500;
}





/* Default Layout */
.default{
    background-color: #151414;
    border-radius: 10px;
}
.default .results .operations{display:none}
.default .row .btn{
    background-color:#fff;
    color:#333333;
    font-size: 27px;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
    outline: none;
    border:none;
}
.default .row .large{
    text-align: left;
    box-sizing: border-box;
    padding-left: 30px;
}
.default .row .btn:hover{
    background-color: #00d7bb;
    color:#fff;
}
.default .row:nth-of-type(2) .btn{
    background-color: #00d7bb; 
    color:#fff;
}
.default .row:nth-of-type(2) .btn:hover{
    background-color:#fff; 
    color: #333333;
}
.default .row:nth-of-type(2) .btn:nth-of-type(2){
    font-size: 20px;
}
.default .row .btn:last-child{
    background-color: #00d7bb; 
    color:#fff;
}
.default .row .btn:last-child:hover{
    background-color:#fff; 
    color: #333333;
}
.default .row .btn:last-child:focus{
    background-color:#fff; 
    color: #333333;
}




/* Default Light Layout */
.default-light{
    background-color: #151414;
    border-radius: 10px;
}
.default-light .results .operations{display:none}
.default-light .row .btn{
    background:transparent;
    border:1px solid #fff;
    color:#fff;
    font-size: 27px;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
    outline: none;
}
.default-light .row .large{
    text-align: left;
    box-sizing: border-box;
    padding-left: 30px;
}
.default-light .row .btn:hover{
    background-color: #fff;
    color:#151414;
}
.default-light .row:nth-of-type(2) .btn{
    border:1px solid #00d7bb; 
    color:#fff;
}
.default-light .row:nth-of-type(2) .btn:hover{
    background-color: #00d7bb;
    color: #151414;
}
.default-light .row:nth-of-type(2) .btn:nth-of-type(2){
    font-size: 20px;
}
.default-light .row .btn:last-child{
    border:1px solid #00d7bb; 
}
.default-light .row .btn:last-child:hover{
    background-color:#00d7bb;
}
.default-light .row .btn:last-child:focus{
    border:1px solid #fff; 
}



/* Default Light Layout */
.gradient{
    background: rgb(222,72,96);
    background: linear-gradient(36deg, rgba(222,72,96,1) 0%, rgba(109,41,97,1) 100%);
    border-radius: 10px;
}
.gradient .results .operations{display:none}
.gradient .row .btn{
    background:transparent;
    color:#fff;
    font-size: 27px;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
    outline: none;
    border:none;
}
.gradient .row .large{
    text-align: left;
    box-sizing: border-box;
    padding-left: 30px;
}
.gradient .row .btn:hover{
    box-shadow: 0px 0px 5px 0px #fff;
}
.gradient .row:nth-of-type(2) .btn{
    color:#fff;
}
.gradient .row:nth-of-type(2) .btn:hover{
}
.gradient .row:nth-of-type(2) .btn:nth-of-type(2){
    font-size: 20px;
}

@media screen and (max-width:500px){
    header{
        position: absolute;
        top:-155px;
        width: 100%;
        background-color: rgba(0,0,0,0.8);
        padding: 30px 0;
        z-index: 99;
        transition: top 1s;
    } 
    header.show{
        top:0;
    }
    header.hide{
        top:-155px;
    }
    header h1, header label{
        color:#fff;
    }
    header h2{
        color:#ccc;
    }
    header .mobile-btn{
        color:#fff;
        font-size:20px;
        position:absolute;
        bottom:-50px;
        left:10px;
        width:50px;
        height:50px;
        box-sizing: border-box;
        padding-top:15px;
        background-color:rgba(0,0,0,0.8);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        display:block;
    }
    #calculator{
        width:100%;
        height:100vh;
        margin:0;
        border-radius: 0;
    }
    #calculator .row{
        height: auto;
    }
    #calculator .row .btn{
        width:21%;
    }
    #calculator .row .large{
        width:47%;
    }
}