body {
    background: #070752;
    background: linear-gradient(140deg,rgba(7, 7, 82, 1) 0%, rgba(0, 0, 212, 1) 21%, rgba(0, 212, 255, 1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
}

p {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #46c4ff;
    margin: 0px auto;
}

p a {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #46c4ff;
    margin: 0px auto;
}

button {
    background-color: #0033ff;
    color: #57c8fc;
    border-width: 0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    padding: 6.7px;
}

ul {
    margin: 0px auto 5px -25px;
    list-style-type: none;
}

.subsubtitle a {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #55b1fd;
    margin: 0px auto;
    text-decoration:underline;
}

.title {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #00d0ff;
}

.subtitle {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #00ffe5;
    margin: 27px auto 10px auto;
}

.subsubtitle {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #55b1fd;
    margin: 0px auto;
}

.table {
    box-sizing: border-box;
    display: grid;
    grid-template-areas:
        'base'
        'buttons'
        'content'
        'likes';
    gap: 1px;
}

.tabel {
    border: 1px solid rgb(0, 217, 255);
    background: #0000d4;
    background: linear-gradient(140deg, rgba(0, 0, 212, 1) 0%, rgba(0, 166, 255, 1) 58%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;
}

.tabel p {
    margin-bottom: 10px;
}

#base {
    grid-area: 'base';
}

#buttons {
    grid-area: 'buttons';
}

#but {
    display: grid;
    place-items: center;
    height: 75%;
    align-self: center;
}

.content {
    grid-area: 'content';
}

#liebeundnicht {
    display: none;
}

#kontakte {
    display: none;
}

@media (max-width: 600px) {
    p {font-size: 3vw;}
    button {font-size: 3vw; padding: 2.5px; margin: 4.2px;}
    .title {font-size: 6vw;}
    .subtitle {font-size: 4vw;}
    .subsubtitle {font-size: 2.5vw;}
    .table {width: 430px;}
    #pfpmain {width: 40vw;}
    #base {grid-area: 1 / span 5;}
    #buttons {grid-area: 2 / span 5;}
    .content {grid-area: 3 / span 5;}
}

@media (min-width: 600px) {
    p {font-size: 2vw;}
    button {font-size: 2vw;}
    .title {font-size: 4.5vw;}
    .subtitle {font-size: 2.6vw;}
    .subsubtitle {font-size: 1.7vw;}
    .table {width: 670px;}
    #pfpmain {width: 20vw;}
    #base {grid-area: 1 / span 3;}
    #buttons {grid-area: 1 / span 2;}
    .content {grid-area: 2 / span 5;}
}

@media (min-width: 1440px) {
    p {font-size: 1.25vw;}
    button {font-size: 1.25vw; padding: 10px;}
    .title {font-size: 3vw;}
    .subtitle {font-size: 1.5vw;}
    .subsubtitle {font-size: 1vw;}
    .table {width: 900px;}
    #pfpmain {width: 15vw;}
    #base {grid-area: 1 / span 3;}
    #buttons {grid-area: 1 / span 2;}
    .content {grid-area: 2 / span 5;}
}

@media (min-width: 2560px) {
    p {font-size: 1.25vw;}
    button {font-size: 1.25vw; padding: 10px;}
    .title {font-size: 3vw;}
    .subtitle {font-size: 1.5vw;}
    .subsubtitle {font-size: 1vw;}
    .table {width: 1500px;}
    #pfpmain {width: 15vw;}
    #base {grid-area: 1 / span 3;}
    #buttons {grid-area: 1 / span 2;}
    .content {grid-area: 2 / span 5;}
}