.nextcloud{
	position: relative;
}

.nextcloud:before {
    display: block;
    background-image: url(../images/nextcloud/clouds.png);
    opacity: 0.4;
    content: ' ';
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.center-items{
    display: grid;
    justify-items: center;
    gap:2em;
}

.shield{

    mask-image: url(../images/nextcloud/Ic_security_48px.svg);
    -webkit-mask-image: url(../images/nextcloud/Ic_security_48px.svg);
}

.rpi{
    mask-image: url(../images/nextcloud/rpi.svg);
    -webkit-mask-image: url(../images/nextcloud/rpi.svg);
}

.shield, .rpi{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: black;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.shield:hover, .rpi:hover,
.shield:focus, .rpi:focus {
    background: #4169e1;
}