:root{
            --cream:#feb0a3;
            --purple:#47425e;
            --teal:#01b9be;
            --light:#ffefcc;
            --dark-teal:#14788d;
            --red:#fe6973;
         }

        body{
            font-family:Arial, Helvetica, sans-serif;
            color:var(--light);
            padding-top: 30px;
            background-image:url(background-img-2.png);
            background-size:1000px;
            image-rendering: pixelated;     
            margin:0;
            background-color:var(--purple);
            padding: 20px 20%;
        }

        .my-room{
           margin-left: 20px;
        }
        .my-room h1{
            margin:0px;
            white-space:nowrap;
            color:var(--light);
        }
        .my-room b{
            color:var(--red);
        }
         .button-a{
            vertical-align: middle;
            padding:5px 10px;
            background-color: #feb0a2;
             box-shadow:
             0 -3px 0 0#fe6973, /* top*/
             0 4px 0 0 #fe6973, /*bottom*/
            -4px 0 0 0 #fe6973, /*left*/
             4px 0 0 0 #fe6973; /*right*/
            border-style:dashed;
            border-width: 3px;
            border-color: aliceblue;
            cursor: pointer;
            transition: 0.5s;
        }
        
        .button-a:hover{
           transform:scale(1.1);
        }
        .heading{
            display: flex;
            justify-content: space-between;
            display: flex;
            flex-wrap:wrap;
            align-items: center;
            gap:12px;
            min-height:50px;
            color:var(--cream);
            margin-bottom: 10px;
        }

        .button-a{
          display:inline-block;
          padding:8px 14px;
          font-family: Arial, Helvetica, sans-serif;
          text-decoration:none;
        }
        .all-button{
            display:flex;
            flex-wrap: wrap;
            gap:24px;
            margin:28px 0 0 20px;
        }
        .all-button label{
            color:rgb(0, 0, 0);
        }

        .last-para{
            margin-top:15px;
            margin-left:20px;
        }
        .room {
            position:relative;
            display:inline-block;
        }
        .room img{
            width:100%;
            image-rendering: pixelated; 
            height:600px;
            box-shadow:
             0 -3px 0 0#fe6973, /* top*/
             0 4px 0 0 #fe6973, /*bottom*/
            -4px 0 0 0 #fe6973, /*left*/
             4px 0 0 0 #fe6973; /*right*/
        }
        .toggle{
            display: none;
        }
        .hotspot{
            position: absolute;
            left:71%;
            top:28%;
            width:15%;
            height: 20%;
            cursor: pointer;
        }
        .hotspot:hover{
            outline: 3px;
            border-style: dashed;
            border-color:var(--light)
        }
        .popup{
            display:none;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            background-color:var(--light);
            padding: 20px 28px;
            z-index: 10;
            text-align: center;
            font-family: monospace;
            color:var(--purple);
        }
        .popup.icon{
            font-size:48px;
        }

        .close{
            position: absolute;
            top:4px;
            right: 8px;
            cursor:pointer;
        }
        
        #about:checked~ #about-page,
        #projects:checked~ #project-page,
        #contact:checked~ #contact-page {
            display: block;
        }

        .computer{
            left: 43.5%;
            top:35.5%;
            height: 10%;
            width:15.5%
        }
        .shelf{
            left: 72%;
            top:28%;
            height:21%;
            width: 13.5%;

        }
        /*lamp is acutally mail*/
        .lamp{
            left:12.25%;
            top:35.5%;
            width: 7.5%;
            height:4%;
        }