html {
    margin: 0;
    padding:0;
}
body {
    background-color:aqua;
    padding:0;
    margin:0;
    display:flex;
}
#wrap {
    display:flex;
    flex-direction:column;
    background-color:aqua;
    width: 95%;
    margin:auto;
    padding: 2em;
}

main {
    display:flex;
    flex-direction:row;
   
}

#sidebar {
    padding: 1rem;
    gap:0.5rem;
    background-color:#cccccc;
    flex-basis: 40%; 
    display:flex;
    flex-direction:column; 
}

#mainArea {
    background-color: lightcoral;
    flex-basis: 60%;
    display:flex;
    align-items:stretch;
}

#mainArea.landscape {
    flex-direction:column;
}

#buttonBox {
   
    align-items:flex-start;
    justify-content:left;
    flex-wrap:wrap;
    
    background-color:green;
    flex-grow:1;
    margin: 5rem 0.5rem 1rem 0.5rem;
    border-radius: 20px;
    border:3px solid white;
}

.landscape #buttonBox {
    margin: 1rem;
}

#canvasTypeList {
    list-style:none;
    margin-top: 0;
}

.textGroup {
    display:flex;
    flex-direction:column;
    gap: 0;
}
#phoneBorder {
    border:3px solid white;
    border-radius:40px;
    flex-shrink:0;
    flex-grow:0;
    background-color:black;
    margin:1rem;
    position:relative;
    overflow:hidden;
}

#phoneCanvas {
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
#controlMapping {
    box-sizing:content-box;
    position:absolute;
    overflow:hidden;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color:transparent;
}

#bg {
    background-color:transparent;
    position:absolute;
    width:100%;
    height:100%;
}




.landscape #controlMapping {
    background-color:transparent;
}

#controlMapping.print {
    border:0;
}
#phoneBorder.etePortrait  {
    width: 414px;
    height: 896px;

}

#phoneBorder.stdPortrait  {
    width: 414px;
    height: 736px;
}

 #phoneBorder.eteLandscape {
    box-sizing:content-box;
    width: 896px;
    height: 414px;
}

#phoneBorder.stdLandscape {
    width: 736px;
    height: 414px;
}


.print .screen {
    background-color:transparent;
}

.screenBox {
    
    position:absolute;
    border: 1px dotted gray;
    top: 0;
}

.screen {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.216);
}

#screen2Box {
    width: 0;
    height: 0;
}

.etePortrait  #screen1Box {
    top:33px;
}
.etePortrait  #screen1Box.gba {
    top:115px;
}

.etePortrait  #screen1Box.gba, .stdPortrait  #screen1Box.gba {
    width:414px;
    height:276px;
}

.etePortrait  #screen1Box.gbc, .stdPortrait  #screen1Box.gbc {
    width:414px;
    height:373px;
}

.etePortrait  #screen1Box.ds, .stdPortrait  #screen1Box.ds {
    width:384px;
    height:288px;
    left: 15px;
}
etePortrait  #screen2Box.ds, .stdPortrait  #screen2Box.ds {
    width:384px;
    height:288px;
    left: 15px;
}

.stdPortrait  #screen1Box.ds {
    top:0px;
}
.stdPortrait #screen2Box.ds {
    top: 300px;
}

.etePortrait #screen2Box.ds {
    top: 333px;
}


.etePortrait  #screen1Box.snes, .stdPortrait  #screen1Box.snes {
    width:414px;
    height:362.25px;
}

.button {
    width:100%;
    height:100%;
}
.buttonBorder{
    box-sizing:content-box;
    display:inline-block;
    border: 0;
}

.buttonBorder.selected {
    border: 1px aqua dashed;
}

.print .buttonBorder {
    border: 0;
}

#controlMapping .buttonBorder {
    position:absolute;
}

#buttonBox .buttonBorder {
    margin:8px;
    position:static;
}

#buttonBox .button {
    margin-bottom:-4px;
}

.buttonBorder.selected{

    border:1px white dashed;
}

.corner {
    display:none;
}

.buttonBorder.selected .corner {
    --cornerSize: 6px;
    display:inline-block;
    width:var(--cornerSize);
    height:var(--cornerSize);
    border-radius:var(--cornerSize);
    border: 1px solid white;
    position:absolute;
}


.lowerRightCorner {
    bottom:calc(0px - var(--cornerSize) / 2);
    right:calc(0px - var(--cornerSize) / 2);
    cursor:se-resize;
}

.upperRightCorner {
    top: calc(0px - var(--cornerSize) / 2);
    right: calc(0px - var(--cornerSize) / 2);
    cursor:ne-resize;
}

.lowerLeftCorner {
    bottom: calc(0px - var(--cornerSize) / 2);
    left: calc(0px - var(--cornerSize) / 2);
    cursor:sw-resize;
}

.upperLeftCorner {
    top:calc(0px - var(--cornerSize) / 2);
    left:calc(0px - var(--cornerSize) / 2);
    cursor:nw-resize;
}

.buttonBorder:hover {
    cursor:move;
}