html{
    scroll-behavior: smooth;
}

body{
    color: white;
    background-color: #080808;
    font-size: 250%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    padding: 40px 120px;
    gap: 150px;

    h1, h2, h3, h4, h5, h6, p{
        margin: 10px;
        text-shadow: 3px 3px 3px #000000;
    }
}

a{
    color: #7a69ff;
    transition: 0.15s ease;
}

a:hover{
    color: #ff3d71;
    scale: 1.3;
}

header{
    background: linear-gradient(to right, #ffffff05, #ffffff11);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 60px;

    img{
        width: 30%;
        height: 30%;
    }
}

div{
    /* color */
    --bg: 0, 0, 0;
    background: linear-gradient(
    to right,
    rgba(var(--bg), 0.2),
    rgba(var(--bg), 0.6));

    border-radius: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 4px solid #000000C0;
    border-top: 4px solid #ffffff70;

    h3, h4{
        background-color: #ffffff20;
        padding: 8px 24px;
        border-left: 4px solid #ffffff;
        border-radius: 20px;
    }
}

.box{
    --bg: 20,20,20;
    > div + div{
        margin-top: 40px;
    }
}

.attention{
    --bg: 255,0,0
}

.tip{
    --bg: 0,0,255
}