Sketchy | Medical Login

.sketch-card background: #FFFEF7; border: 3px solid #2C3E50; border-radius: 32px; box-shadow: 12px 12px 0 rgba(44, 62, 80, 0.1); width: 100%; max-width: 420px; padding: 2rem; transition: transform 0.2s ease; position: relative;

<form id="sketchyLoginForm"> <div class="input-group"> <label>📧 Email</label> <input type="email" id="email" placeholder="you@medschool.edu" required> </div> <div class="input-group"> <label>🔐 Password</label> <input type="password" id="password" placeholder="Your secret sketch" required> </div>

<div class="helper-links"> <a href="#">Forgot your sketchy password?</a> <a href="#">Need help?</a> </div> </form>

.sketch-btn:hover background: #FFD966; transform: scale(0.97);

.sketch-card:hover transform: translate(-2px, -2px); box-shadow: 16px 16px 0 rgba(44, 62, 80, 0.15);

input width: 100%; padding: 12px 16px; border: 2px solid #2C3E50; border-radius: 60px; background: #FFFFFF; font-family: 'Nunito', monospace; font-size: 1rem; transition: all 0.2s;

.sketch-btn background: #FFE194; border: 2px solid #2C3E50; border-radius: 60px; padding: 12px 24px; width: 100%; font-weight: bold; font-size: 1.1rem; font-family: 'Permanent Marker', cursive; color: #2C3E50; cursor: pointer; transition: 0.1s linear; margin-top: 0.8rem;