*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Verdana, Geneva, sans-serif;

    background:
    linear-gradient(
    180deg,
    #3e0166 0%,
    #8a3bb5 35%,
    #f79ced 75%,
    #ffffff 100%);

    color:#31133e;

    min-height:100vh;

    padding:40px;
}

.page{

    max-width:1100px;
    margin:auto;

    background:rgba(255,255,255,.55);

    border:4px solid white;

    box-shadow:
    0 0 0 3px #a24cd9,
    0 10px 35px rgba(0,0,0,.25);

    backdrop-filter:blur(6px);
}

.header{

    text-align:center;

    padding:40px;

    background:
    linear-gradient(
    90deg,
    #3e0166,
    #f79ced);

    color:white;
}

.header h1{

    font-family:Georgia, serif;

    font-size:3rem;

    margin:15px 0;
}

.small{

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.8rem;
}

.marquee{

    overflow:hidden;

    margin-top:20px;

    border:2px inset white;

    background:rgba(255,255,255,.15);

    white-space:nowrap;
}

.marquee span{

    display:inline-block;

    padding:10px;

    animation:scroll 18s linear infinite;
}

@keyframes scroll{

from{
transform:translateX(100%);
}

to{
transform:translateX(-100%);
}

}

.nav{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

padding:18px;

background:white;

border-top:3px solid #f79ced;

border-bottom:3px solid #f79ced;
}

.nav a{

text-decoration:none;

color:#3e0166;

padding:8px 18px;

background:#ffe7fa;

border:2px outset white;

font-weight:bold;
}

.nav a:hover{

background:#f79ced;

color:white;
}

.layout{

display:grid;

grid-template-columns:300px 1fr;

gap:25px;

padding:25px;
}

.box{

background:white;

border:3px outset white;

padding:20px;

box-shadow:4px 4px 12px rgba(0,0,0,.08);

margin-bottom:20px;
}

.box h2,
.box h3{

font-family:Georgia, serif;

color:#5f118d;

margin-bottom:15px;
}

.avatar{

width:100px;

height:100px;

margin:15px auto;

border-radius:50%;

background:
linear-gradient(#f79ced,#ffffff);

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

border:3px solid white;

box-shadow:0 0 0 2px #f79ced;
}

ul{

padding-left:20px;

line-height:1.8;
}

article p{

line-height:1.8;

margin-bottom:20px;
}

blockquote{

margin:30px 0;

padding:20px;

background:#fff3fc;

border-left:5px solid #f79ced;

font-style:italic;
}

hr{

margin:30px 0;

border:none;

border-top:2px dotted #f79ced;
}

.buttons{

text-align:center;
}

.button{

margin:8px auto;

width:120px;

padding:8px;

background:
linear-gradient(
#ffffff,
#ffd9f8);

border:2px outset white;

font-size:.8rem;
}

.footer{

padding:25px;

text-align:center;

background:#fff5fc;

border-top:3px solid #f79ced;
}

.counter{

background:black;

color:#5cff5c;

padding:4px 10px;

font-family:Courier New, monospace;

letter-spacing:2px;
}

.blink{

animation:blink 1s steps(2) infinite;

font-weight:bold;

text-align:center;

color:#7b008f;
}

@keyframes blink{

50%{
opacity:0;
}

}

.stars{

position:fixed;

inset:0;

pointer-events:none;

background-image:

radial-gradient(white 1px, transparent 1px),
radial-gradient(#ffdfff 1px, transparent 1px);

background-size:70px 70px,120px 120px;

opacity:.25;
}

@media(max-width:800px){

.layout{

grid-template-columns:1fr;
}

.header h1{

font-size:2rem;
}

body{

padding:15px;
}

}