* {
    margin : 0;
    padding : 0;
    font-family : system-ui;
}

body {
	background-color : var(--background);
}

h1 {
    text-align : center;
    margin : 50px 0px;
    color : var(--base-text);
}

.container {
    max-width : 60vw;
    margin : 10px auto; 
    display: flex;
    flex-direction: column;
    padding : 20px;
    border-radius : 10px;
    background : linear-gradient(135deg , var(--high-text-button) , var(--low-text-button));
}

.grid {
    margin : 10px;
    max-width : 100vw;
    margin : 0px auto;
    display : grid;
    place-items : center;
    grid-template-columns : repeat(2, 1fr);
    gap : 20px;
}

.element {
    display: flex;
    flex-direction : column;
    width: 29vw;
    margin: 20px auto;
    gap: 20px;
}

.element h3 {
    text-align : center;
}

.element input {
	align-self : center;
    padding : 5px 10px;
    border : none;
    outline : none;
    border-radius : 5px;
    width : 180px;
}

.element input:focus {
    border : none;
    outline : none;
    width : 210px;
    transition : 0.5s ease;
}

.image-element {
    margin-top : 20px;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 20px;
}

.image-element input {
    padding : 5px 10px;
    border : none;
    outline : none;
    border-radius : 5px;
    width : 180px;
}

.image-element input:focus {
    border : none;
    outline : none;
    width : 210px;
    transition : 0.5s ease;
}

.confirm-element {
    margin-top : 20px;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 20px;
}

.confirm-element input {
    padding : 5px 10px;
    border : none;
    outline : none;
    border-radius : 5px;
    width : 180px;
}

.confirm-element input:focus {
    border : none;
    outline : none;
    width : 210px;
    transition : 0.5s ease;
}

.buttons {
    display : flex;
    margin : 30px auto;
    gap : 20px;
    justify-content: center;
}

.save {
    margin : 30px 0px;
    background : var(--high-text-button);
    width : 120px;
    padding : 5px 10px;
    border : none;
    outline : none;
    align-self : center;
    border-radius : 5px;  
    color : var(--base-text); 
}

.go-back {
    margin : 30px 0px;
    background-color : var(--low-text-button);
    width : 120px;
    padding : 5px 10px;
    border : none;
    outline : none;
    align-self : center;
    border-radius : 5px;
    color : var(--base-text);   
}

#error-msg {
	text-align : center;
	color : var(--high-text-button);
	margin-bottom : 20px;
}