@view-transition {
    navigation: auto;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f4f4;
    color:#222;
}
header{
    background:#1b4f72;
    color:white;
    padding:25px;
}
nav{
    margin-top:15px;
}
nav a{
    color:white;
    text-decoration:none;
    margin-right:20px;
    font-size:18px;
}
nav a:hover{
    text-decoration:underline;
}
main{
    max-width:900px;
    margin:50px auto;
    padding:30px;
    background:white;
    border-radius:12px;
    box-shadow:0 0 20px rgba(0,0,0,.15);
}
img{
    width:100%;
    border-radius:12px;
    margin:20px 0;
}
h2{
    margin-bottom:20px;
}
::view-transition-old(root),
::view-transition-new(root){
    animation-duration:.5s;
}