@font-face {
    font-family: normal;
    src: url(light.ttf);
}
@font-face {
    font-family: bold;
    src: url(semibold.ttf);
}
:root {
    --text: #000000;
    --hintergrund: #ffffff;
    --lila: #D69CC6;
    --grün: #426A06;
    --green: #739949;
    --dunkelrot: #450A26;
    --mitteldunkelrot: #6C4353;
    --gelb: #FFE588;
    --orange: #FF8F3F;
    --rot: #FF4E4E;
    --pink: #EF819B;
    --background-colour: grey;
}

/* Alle meine Links haben keinen Unterstrich und sind grau */
/* Hier sind alle Header bearbeitet*/
a {
    text-decoration: none;
    color: grey;
    font-size: 30px;
    font-family: 'normal';
}
* {
    box-sizing: border-box;
}
/* Allgemein für alle Bodys*/
body {
    color: var(--text);
    background-color: var(--hintergrund);
    font-family: 'normal';
    line-height: 1.5;
    font-size: 25px;
    padding: 0px 30px 0px 30px;
}
h1,
h2,
.h1,
.h2 {
    font-weight: bold;
}
header {
    display: flex;
    align-items: center;
    /* Objekte vertikal zentrieren */
    justify-content: space-between;
}
header input {
    display: none;
}
header label {
    display: none;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline-block;
    margin-right: 30px;
}
nav ul li:last-child {
    margin-right: 0;
}
.kopf {
    display: flex;
    align-items: center;
    margin: 0;
}
nav.kopf a {
    text-decoration: none;
    margin-left: 60px;
}
.header_link:hover {
    color: var(--lila);
}
/* Bttn und Btn da der Kreis nicht größer werden soll weil er sonst Bild schneidet, die Links jedoch schon*/
.btn {
    display: inline-block;
    border: 0;
    position: relative;
    background-color: var(--hintergrund);
    transition: all 1s;
}
.btn:hover {
    transform: scale(1.1);
    /*Hover geht nach außen da größer als 1*/
    z-index: 2;
}
.bttn {
    display: inline-block;
    border: 0;
    position: relative;
    background-color: var(--hintergrund);
    transition: all 1s;
}
.bttn:hover {
    transform: scale(0.8);
    /*Hover geht nach innen da kleiner als 1*/
    z-index: 2;
}
/*HOME*/
main.home {
    display: grid;
    grid-template-columns: 10% calc(50% - 60px) 40%;
    grid-template-rows: 32vh 32vh;
    gap: 30px;
}
main.home h1 {
    background-color: var(--rot);
    grid-row: span 2;
    margin: 0;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
}
main.home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-row: span 2;
    border-radius: 3rem;
}
main.home h2 {
    background-color: var(--pink);
    margin: 0;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
}
main.home p {
    background-color: var(--green);
    margin: 0;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
}
/* About Me*/
main.about-me {
    display: grid;
    grid-template-columns: 35% calc(50% - 60px) 15%;
    /* vertikal*/
    grid-template-rows: 20vh 44vh;
    /*horizontal*/
    gap: 30px;
}
main.about-me h1,
.about-text {
    background-color: var(--orange);
    font-size: 50px;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    border-radius: 3rem;
    margin-block: 0;
}
.about-text {
    background-color: var(--lila);
    font-size: 23px;
    padding: 10px;
}
main.about-me img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-row: span 2;
    border-radius: 3rem;
}
/*PROJEKTS*/
main.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 32vh 32vh;
    /*grid-template-rows: 32vh 32vh;*/
    gap: 30px;
}
main.projects img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 3rem;
    position: relative;
    overflow: hidden;
}
.seestern,
.board,
.img-place {
    transition: 1s;
}
.seestern:hover,
.board:hover,
.img-place:hover {
    transform: scale(0.9);
    /*Hover geht nach innen da kleiner als 1*/
    z-index: 2;
    -webkit-filter: blur(1px);
    /*Blur Effekt beim Hovern*/
    filter: blur(1px);
}
.board {
    grid-row: span 2;
}
.img-place {
    grid-row: span 2;
}
.buntes_rechteck {
    background-color: var(--pink);
    border-radius: 3rem;
}
/*Safe Place*/
main.safe-place {
    display: grid;
    grid-template-columns: 30% 45% calc(25% - 60px);
    gap: 30px;
}
main.safe-place img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3rem;
}
.text-safe {
    background-color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    border-radius: 3rem;
    margin-block: 0;
    padding: 20px;
}
.year {
    background-color: var(--lila);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: aliceblue;
    border-radius: 3rem;
    margin-block: 0;
}
/*INHALER*/
main.inhaler {
    display: grid;
    grid-template-columns: 40% 35% 20%;
    grid-template-rows: 32vh 32vh;
    gap: 30px;
}
main.inhaler img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3rem;
}
.text-inhaler {
    background-color: var(--dunkelrot);
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    margin-block: 0;
    padding: 15px;
    color: aliceblue;
    grid-row: span 2;
    border-radius: 3rem;
}
.twentythree {
    background-color: var(--mitteldunkelrot);
    font-size: 80px;
    color: aliceblue;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 3rem;
    grid-row: span 2;
    margin-block: 0;
}
/*SKATEBOARD*/
main.skateboard {
    display: grid;
    grid-template-columns: 30% calc(45% - 60px) 25%;
    gap: 30px;
}
main.skateboard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3rem;
}
.text-skate {
    background-color: var(--green);
    /*opacity: 50%;*/
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: left;
    padding: 30px;
    margin-block: 0;
    border-radius: 3rem;
}
.twentytwo {
    background-color: var(--grün);
    justify-content: center;
    font-size: 80px;
    color: aliceblue;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-block: 0;
    border-radius: 3rem;
}
/*CONTACT*/
main.contact {
    display: grid;
    grid-template-columns: 50% calc(50% - 30px);
    grid-template-rows: 32vh 32vh;
    gap: 40px;
    border-radius: 3rem;
}
.steuer {
    background-color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15%;
    border-radius: 3rem;
}
.adresse {
    background-color: var(--lila);
    display: flex;
    align-items: center;
    /*vertikale Achse*/
    justify-content: center;
    /*horizontal Achse*/
    padding: 15%;
    border-radius: 3rem;
}
.hochschule {
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15%;
    border-radius: 3rem;
}
.buntes-rechteck {
    background-color: var(--rot);
    border-radius: 3rem;
}
/*FOOTER*/
footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 40px;
}
.schutz {
    font-size: 25px;
    color: grey;
    transition: 1s;

}
.schutz:hover {
    transform: scale(1.1);
    /*Hover geht nach innen da kleiner als 1*/
    z-index: 2;
    color: var(--lila);
}
main.datenschutzerklaerung {
    margin-inline: auto;
    max-width: 70ch;
}