style.css

@media (prefers-color-scheme:light){
    body{
        background-color: white;
        color: black;
    }
    a{
        color: black;
    }
    button{
        background-color: white;
        color: black;
    }
}

@media (prefers-color-scheme:dark){
    body{
        background-color: black;
        color: white;
    }
    a{
        color: white;
    }
    button{
        background-color: black;
        color: white;
    }
}

body{
    width: 100%;
    height: 100%;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    text-align: center;
    margin: 10px;
}

.website{
    display: grid;
    justify-content: center;
    align-items: center;
    align-items: center;
    text-align: center;
}

#linkeingabe{
    border-radius: 20px;
    /* Funktioniert nur in Chrome, Edge, Opera. Wird sonst ignoriert */
    field-sizing: content;
    width: clamp(100px, 50%, 200px);
    margin: 10px;
}

#linkbutton{
    border-radius: 20px;
    margin: 10px;
    width: 50px;
}

#linkausgabe{
    border-radius: 20px;
    margin: 10px;
    color: black;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    text-align: center;
    max-width: 75%;
}