section {
    display: grid;
    grid-template-rows: 40% 60%;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
}

.con {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-row: 1/2;
    grid-column: 1/2;
}

.input, .btn {
    margin: 0.5em;
    height: 3em;
    width: 15em;
    background-color: rgba(100, 0, 200, 0.2);
    border: 0.1em solid rgba(100, 0, 200, 0.4);
    border-radius: 0.5em;
    box-shadow: 0.5em 0.5em 1em grey;
    text-align: center;
}

/* ändert den Style bei Aktivierung */
input:focus {                                                   
    outline: none;
    background-color: rgba(100, 0, 200, 0.4);
}

.btn {
    cursor: pointer;
    font-size: 100%;
}

.btn:hover {            
    background-color: rgba(100, 0, 200, 0.4);
}

.mono {
    grid-row: 2/3;
    grid-column: 1/2;
    display: grid;
    grid-template-rows: 50% 50%;
    justify-items: center;
    align-items: center;
    height: 449px;
    width: 400px;
    background-image: url(../medien/denim_hemd.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
}

.nothidden {
    opacity: 1;
}

#first, #second {
    font-size: 1200%;
    color: tomato;
}

#first {
    transform: rotate(-40deg);
}

#second {
    font-size: 1300%;
    transform: rotate(20deg);
}

@media screen and (max-width: 600px){

    .mono {
        transform: scale(80%);
    }

    #first, #second {
        font-size: 2000%;
    }
    
}