body{
            background-color: #98abd7;
            font-family: 'Times New Roman', Times, serif;
            background-image: url(/assets/background.jpg);
        }

        h1{
            margin: 4px;
            color: chocolate;
        }

        p{
            margin: 4px;
            color: coral;
        }

        address{
            margin: 4px;
            color: coral;
        }

        
        .welcome{
            border: solid;
            padding: 16px;
            width: 200px;
            position: absolute; top: 50%; left: 50%; 
            transform: translate(-50%, -50%);        
            backdrop-filter: blur(10px); 
            background-color: rgba(218, 14, 14, 0.25); 
            color: #fff; 
            border-radius: 16px;
        }

        .top-bar{
           display: flex;
           justify-content: space-between;
           backdrop-filter: blur(10px); 
           background-color: rgba(218, 14, 14, 0.25); 
           color: #fff; 
           z-index: 1000;
           position: relative;
        }

        #welcomeheader {
            width: 100%;
            height: 40px; 
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab; 
            background: linear-gradient(135deg, #2c3e50, #000); 
            border-radius: 8px 8px 0 0; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
            user-select: none; 
        }

        #welcomeheader p {
            margin: 0;
            color: #ffffff;
            font-family: 'Segoe UI', sans-serif;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        #welcomeheader:active {
            cursor: grabbing; 
        }

        .closebutton {
            width: 16px;
            height: 16px;
            cursor: pointer;
            text-decoration-line: underline;
            color: brown;
        }


        #notes {
         width: 600px;  
         height: 500px; 
        }

        #notesclose {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #notesheader {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #contact {
         width: 600px;  
         height: 500px; 
        }

        #contactheader {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #contactclose {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        
        #project {
            width: 800px;  
            height: 600px; 
        }

        #projectheader {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #projectclose {
            font-size: 45px;   
            width: 50px;       
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        #calculator {
            width: 250px;
            height: auto;
        }