@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

body {
font-family: 'Nunito', sans-serif;
background-color: #a8d5ba;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

header, main, section, article, aside, figure {
box-sizing: border-box;
}

main {
position: relative;
width: 900px;
height: 700px;
background-color: #ffffff;
border-radius: 15px;
perspective: 1500px;
border: 6px solid #5a6e7f;
box-shadow: 10px 10px 0px rgba(0,0,0,0.15);
}

header {
text-align: center;
padding: 20px;
background: #5a6e7f;
border-radius: 9px 9px 0 0;
color: #ffffff;
margin: 0;
border-bottom: 3px solid #3e4c59;
}

header h1 {
margin: 0;
font-size: 28px;
letter-spacing: 1px;
}

section[role="region"] {
display: flex;
height: calc(100% - 78px);
padding: 20px;
gap: 20px;
background-color: #f4f7f6;
border-radius: 0 0 9px 9px;
}

aside {
flex: 1;
background: #ffffff;
padding: 20px;
border-radius: 8px;
border: 2px dashed #b0bec5;
}

article {
flex: 2;
background: #ffffff;
padding: 20px;
border-radius: 8px;
border: 2px solid #e0e0e0;
overflow-y: auto;
}

section[role="presentation"] {
position: absolute;
top: 78px;
left: 0;
width: 100%;
height: calc(100% - 78px);
display: flex;
pointer-events: none;
}

figure {
margin: 0;
width: 50%;
height: 100%;
background-color: #ecf0f1;
border: 3px solid #5a6e7f;
transition: transform 1s ease-in-out;
position: relative;
pointer-events: auto;
z-index: 10;
}

figure:first-of-type {
transform-origin: left;
border-radius: 0 0 0 9px;
border-right: 1.5px solid #5a6e7f;
}

figure:last-of-type {
transform-origin: right;
border-radius: 0 0 9px 0;
border-left: 1.5px solid #5a6e7f;
}

figure span {
position: absolute;
top: 50%;
width: 18px;
height: 130px;
background-color: #bdc3c7;
border: 2px solid #7f8c8d;
border-radius: 4px;
transform: translateY(-50%);
}

figure:first-of-type span {
right: 20px;
}

figure:last-of-type span {
left: 20px;
}

main:hover figure:first-of-type {
transform: rotateY(-115deg);
}

main:hover figure:last-of-type {
transform: rotateY(115deg);
}

input, select, button {
width: 100%;
padding: 10px;
margin-bottom: 12px;
border: 2px solid #cfd8dc;
border-radius: 5px;
font-family: inherit;
font-size: 15px;
box-sizing: border-box;
}

input:focus, select:focus {
outline: none;
border-color: #5a6e7f;
}

button {
background-color: #2ecc71;
color: white;
font-weight: 700;
cursor: pointer;
border: none;
font-size: 16px;
}

button:hover {
background-color: #27ae60;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 2px solid #ecf0f1;
}

th {
background-color: #5a6e7f;
color: #ffffff;
}

h3 {
margin-top: 0;
color: #2c3e50;
border-bottom: 2px solid #2ecc71;
padding-bottom: 5px;
display: inline-block;
}