html{
    background: rgb(92,1,136);
    background: linear-gradient(180deg, rgba(92,1,136,1) 0%, rgba(135,23,185,1) 50%);
    /*https://cssgradient.io/*/
}

body{
    color: white;
    padding: 0;
    margin: 0;
}

.flex{
    display: flex;
}

.left{
    flex: 40%;
    padding: 0;
    button{
        font-family: monospace;
        font-weight: bold;
        font-size: 16px;
        border-radius: 0;
        border-width: 2px;
        border-collapse: collapse;
        border-style: solid;
        
        margin:0;
        padding: 4px 24px 4px 24px;
        background: rgb(160,192,56);
        background: linear-gradient(0deg, rgba(160,192,56,1) 0%, rgba(160,192,56,1) 50%, rgba(201,217,68,1) 54%); 
    }
}

.leftphone{
    border: solid black 2px;
    border-radius: 30px;
    background-color: #F09708;
    margin-top:52px;    
    padding:6px 6px 6px 6px;
}

.phonescreen{
    background-color: black;
    border: solid white 1px;
    border-bottom-left-radius:24px;
    border-bottom-right-radius:24px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    flex-wrap: wrap;
    .heading{
        color: black;
        background-color: greenyellow;
        flex:100%;
        font-weight: bold;
    }
    .item{
        background-color: rgb(255, 216, 19);
        color: black;
        font-weight: normal;
        flex:100%;
    }
}

.right{
    flex:70%;
}

.homerow{
    background: black;
    width:fit-content;
}

.homerow button:hover{
    background: rgb(160,192,56);
    cursor: pointer;
}