/* Hintergrundbild und allgemeine Einstellungen */
body{
    /* background-color: #484848; */
    text-align: center;
    font-family: 'Coolvetica Rg';
    color: rgb(240, 240, 240);
    background-image: url(img/ica.png);
    background-size: cover;
}

/* Logo-Einstellungen */
.logo{
    width: 50%;
}

/* gesamter Text-Toggle */
.text-toggle{
    border-radius: 5px;
    background: #282828;
    margin: 5px;
    overflow: hidden;
}

/* Header vom Text-toggle */
.summary-header{
    font-size: 20px;
    cursor: pointer;
    display: block;
    position: relative;
    background-color: #333333;
}

/* The background div */
.background{
    padding: 5px;
    background-color: #222222;
    border-radius: 5px;
}

/* der Pfeil for dem summary-header */
.summary-header:before {
    content: '';
    border-width: .4rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0.4rem;
    left: 1rem;
    transform: rotate(0);
    transform-origin: 25% 50%;
    transition: .25s transform ease;
}
  
/* die Animation des ::before, wenn ein details geöffnet wird */
details[open] > .summary-header:before {
    transform: rotate(90deg);
}