* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', sans-serif;
}

body {
     width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
}

.container {
     width: 380px;
     background-color: #a9c9ff;
     background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
     border-radius: 10px;
     padding: 20px;
     margin: 25px;
     position: relative;
}

.get-container {
     margin-top: 10px;
     padding-top: 10px;
     border-top: 1px solid rgba(128, 128, 128, 0.486);
}

label {
     display: block;
     padding: 8px 0;
     font-weight: 500;
}

input[type='text'] {
     border-radius: 5px;
     border: none;
     padding: 10px;
     outline: none;
}
input[type='tel'] {
     border-radius: 5px;
     border: none;
     padding: 10px;
     outline: none;
}
.addInputs,
.getInputs {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.displayContactStyle {
     font-weight: 600;
     background-color: #21bfe649;
     border-radius: 10px;
     padding: 10px;
}

.displayContactStyle::before {
     content: '  📞';
}

#displayNoti {
     font-weight: 600;
}

#addContact {
     width: 100%;
     margin: 15px 0;
     padding: 8px;
     font-weight: 500;
}

#getContact {
     width: 48%;
     margin: 15px 0;
     padding: 8px;
     font-weight: 500;
}

.reset {
     position: absolute;
     top: 10px;
     right: 15px;
     background-color: #a9c9ff;
     cursor: pointer;
     opacity: 0.2;
}

h1 {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-top: 20px;
}

img {
     transform: rotate(20deg);
}

footer {
     margin-top: 20px;
}

footer a {
     text-decoration: none;
     color: gray;
}