<script>
	import Header from './../Header.svelte';
</script>

<body>
<div class="header"> <Header/> </div>

<div class="mainDiv">

    <div class="gradient">

        <div class="division">
            <div class="buttonDiv">
                <button class="button">Аккаунт</button>
            </div>
            <div class="changingData">
                <h1>Изменение данных</h1>
                <div class="divisionChangingData">
                    <div>пинчи</div>
                    <div>данные</div>
                </div>
                <div class="finishButton">
                    <button>Подтвердить</button>
                    <button>Отменить</button>
                </div>
            </div>
        </div>

    </div>

</div>    
</body>

<style lang="scss">

.button{
    border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 15px;
        background-repeat: no-repeat;
		background-attachment: fixed;
        margin: 10px 0 0 10px;
        width: calc(100% - 10px);
}

.buttonDiv{
    width: 20%;
}
.changingData{
    display: flex;
    flex-direction: column;

    border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 15px;
        background-repeat: no-repeat;
		background-attachment: fixed;
        margin: 10px;
        width: 80%;
}

.divisionChangingData{
    display: flex;
    flex-direction: row;
    height: 80%;
}

.divisionChangingData > div{
    width: 50%;
    height: 100%;
}

.division{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.finishButton{
   display: flex;
   justify-content: space-around; 
}

.header {
    height: 10%;
    width:  85%;
}

.mainDiv{
    height: 90%;
    padding-top: 15px;
}

.gradient{
	border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 15px;
        background-repeat: no-repeat;
		background-attachment: fixed;
		width: 95%;
		height: 95%;

		display: flex; /* Добавляем для центрирования по вертикали и горизонтали */
    	align-self: center; /* Центрируем по вертикали */
    	justify-content: center; /* Центрируем по горизонтали */
    	margin: auto;
}



body{
    display: flexbox;
    flex-direction: column;
    
        width: 100%; 
        height: 100%;  
        overflow: hidden;
}

</style>