html, body {
 
    margin: 0 auto;
    background-color: #fff091;

}

div#container {
    width:80%;
    max-width:780px;
    min-width:320px;
    margin:0 auto;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    
}

/* the portal */ 

#portal {
    border: 1px solid black;
    border-radius: 12px;
/*    padding: 20px;*/
    width: 330px;
/*    overflow: hidden;*/
    position: relative;
    margin:20px auto;
}

/* end of portal */ 



.microwave-container{
    width: 1200px;
    height: 550px;
    margin-left:-850px;
    margin-top:-40px;
}


.microwave-container .microwave {
    width: 100%;
    height: 100%;
    background-color: grey;
    display: flex;
    border-radius: 10px;
}

.microwave-container .microwave .door-container {
    width: 80%;
    height: 100%;
}

.microwave-container .microwave .door-container .door {
    height: 100%;
    width: 100%;
    border-right: solid 7px black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.microwave-container .microwave .door-container .door .handle {
    position: absolute;
    height: 90%;
    width: 50px;
    background-color: silver;
    right: 2.5%;
    cursor: pointer;
}

.microwave-container .microwave .door-container .door .window-container {
    height: 80%;
    width: 95%;
    background-color:#000000d9;
    display: flex;
    align-items: center;
}

.microwave-container .microwave .door-container .door .window-container .window {
    height: 80%;
    width: 80%;
    background-color: silver;
    margin-left: 5%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.microwave-container .microwave .control-panel-container {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
}

.microwave-container .microwave .control-panel-container .control-panel {
    background-color: #000000d9;
    height: 80%;
    width: 90%;
}

.microwave-container .microwave .control-panel-container .control-panel .clock {
    height: 94px;
    width: 100%;
    text-align: center;
    color: green;
    font-family: monospace;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-panel .controls {
    width: 85%;
    height: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.control-panel .controls .control-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.control-panel .controls .control-row.no-border .button{
    border: none;
}

.control-panel .controls .control-row .button {
    width: 28%;
    font-size:11px;
    text-align: center;
    font-family: sans-serif;
    height: 30px;
    color: white;
    border: solid 1px white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


#btn-convert {
    background:red;
}

#btn-new {
    display:none;
    background:blue;
}

.control-panel-container.converted #btn-convert {
  display: none;
}

.control-panel-container.converted #btn-new {
  display: flex;
}

.control-panel-container.converted .clock {
    background:white;
    color:blue;
}


.control-panel .controls .control-row .button span.smallText {
    font-size:6px;
}

.light {
    height: 0px;
    width: 80%;
    box-shadow: 0px 42px 92px 14px #ffd400;
    z-index: -1;
    display: none;
}

.inside-light {
    height: 0px;
    width: 100%;
    box-shadow: 0px 152px 1004px 84px #ffd40082;
    display: none;
}
/* end of microwave */ 

div.someInfo h3 {
  margin-bottom:0;
  margin-top:2px;
}

div.someInfo p {
    margin-top:4px;
}