html {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: monospace;
            background-color: #f6f8fa;
            color: #24292e;
            margin: 0;
            height: 100vh;
           
        }
        header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #24292e;
            color: white;
            margin: 0;
            height: 20vh;
            box-shadow: 0 0 1vh #00f3ff, inset 0 0 1vh #00f3ff;
        }

        h1 {
            margin: 0;
        }

        #mainBlock {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background-color: #121212;
            margin: 0;
            height: 80vh;
            color: aliceblue;
            padding-top: 2%;
        }
        
        #contentBlock {
            background-color: #24292e;

            padding: 2%;
            justify-items: center;
            width: 50vw;
            flex-grow: 0;
            order: 3px solid #00f3ff;
            box-shadow: 0 0 10px #00f3ff, inset 0 0 5px #00f3ff;


        }

        #emailVisual {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4%;
        }

      .cp-btn {
  --color: #00f0ff; /* Neon Cyan */
  font-family: sans-serif;
  font-weight: 800;
  color: var(--color);
  background: transparent;
  text-transform: uppercase;
  padding: 12px 30px;
  border: 2px solid var(--color);
  cursor: pointer;
  position: relative;
  
  /* The iconic clipped corner */
  clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
  
  /* Glow effect */
  text-shadow: 0 0 8px var(--color);
  box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.2);
  transition: all 0.2s ease;
}

.cp-btn:hover {
  background: var(--color);
  color: #000;
  box-shadow: 0 0 20px var(--color);
  text-shadow: none;
}

/* Basic reset and styling for all inputs */
input[type="email"] {
  /* Inherit font from parent for consistency */
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 15px;
  margin: 8px 0;
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* Ensures padding/border are included in width calculation */
  
  /* Modern look: subtle border and rounded corners */
  border: 1px solid #ccc;
  border-radius: 4px; 
  
  /* Remove default glowing outline on focus */
  outline: none;
  
  /* Smooth transitions for a modern feel */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Style the input when it is focused (clicked/tabbed into) */
input[type="email"]:focus {
  border-color: #007bff; /* A nice blue color for focus indication */
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Subtle glowing effect */
}

/* Style the placeholder text */
input[type="email"]::placeholder {
  color: #999;
  opacity: 1; /* Ensures consistency across browsers */
}

#mailSender{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form {
     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}

a:link{
    color:#00f0ff
}
a:visited{
    color:#00b8ff
}

@media screen and (max-width: 768px) {
  #contentBlock {
    width: 80vw;
    margin: 3%;
    padding-left: 4%;
    padding-right: 4%;
  }
}