/*------------------------------------------------------------------------------

    LAYOUT 

------------------------------------------------------------------------------*/
body{
    background-color: #232023;
}


.img1{
    height: clamp(15em, 30%, 22.5em);
    width: clamp(10em, 30%, 15em);
}

header{
    display: flex;
    flex-direction: row;
    stroke: 10pt;
    margin-left: 10pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

main{
    display: flex;
    flex-wrap:wrap;
    
}

.basic-info{
    box-sizing:inherit;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;
}

.job{
    box-sizing:inherit;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;
}
.liebe-hass{
    box-sizing:border-box;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;

}
.musik{
    box-sizing:inherit;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;
}

.musik-text{
    margin-right:6px;
}
.tv{
    box-sizing:inherit;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;
}
.gruss{
    box-sizing:inherit;
    height: 270pt;
    width: 270pt;
    padding: 20px;
    border-style: solid;
    border-color: darkcyan;
    border-width:2pt;
}


.ohrwurm{
    height: clamp(30pt, 80pt, 80pt);
    width: 180pt;
    position:fixed;
    right:10pt;
    top:60pt;
    box-sizing: border-box;
    border-style: solid;
    border-color:white;
    border-radius: 15pt;
    padding: 10pt;
    background-color:#331434;
    box-shadow: 0px 0px 30px -10px black;
    border-style: none;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}
@media screen and (max-width: 500px){
    .ohrwurm{
        height: clamp(50pt,80pt,80pt); !important
    }
    
}

.ohrwurm-text1{
    position:fixed;
    right:30pt;
    top:62pt;
    
}
.ohrwurm-text2{
    position:fixed;
    right:60pt;
    top:94pt;
    
}
.ohrwurm-text3{
    position:fixed;
    right:30pt;
    top:114pt;
    
}

.ohrwurm:hover{
    box-shadow: 0px 0px 30px black;
}

.links{
    margin: 10pt;
    width: 90%;
}
.texte{
    margin: 5pt;
}
.mail{
    margin: 10pt;
}
/*------------------------------------------------------------------------------

    TYPO & LINKS

------------------------------------------------------------------------------*/
h1{
    font-family: "ltc-octic-gothic-two", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(6vw, 6vw, 8vw);
    color: white;
    margin-left: 10pt;
}

h2{
    font-family: "ltc-octic-gothic-two", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
    color: white;
}

h3{
    color: white;
    font-family: "zedou", sans-serif;
    font-weight: 700;
    font-style: normal;
}
p{
    color: white;
    font-family: "zedou", sans-serif;
    font-weight: 500;
    font-style: normal;
}


a{ 
    color:#232023;
    background-color: white;
    border-style: solid;
    border-width:thick;
    border-color: white;
    border-radius:8pt;
    font-family: "zedou", sans-serif;
    font-weight: 500;
    font-style: normal;
    box-shadow: 0px 0px 20px -10px black;
    margin-top: 4pt;
    margin-bottom: 4pt;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}
a:before {
  content: "↪";
}

a:hover{
    box-shadow: 0px 0px 50px -10px black;
    padding:2pt;
}
.img2{
    width:369px;
    height:273.6px;
    transition:0.1s;
    transition-timing-function:ease-in-out;
}
.img2:hover{
    width: 410px;
    height: 304px;
    transform: rotate(1deg);
    box-shadow: 0px 0px 70px  black;
}
.karibik-bild{
    border-style: hidden;
    
    width:369px;
    height:273.6px;
}
.karibik-bild:before{
    content:none;
}

.karibik-bild:hover{
    content:none;
    border-style: none;
    padding: 0pt;
    
}
/*------------------------------------------------------------------------------

    SECTION "XY"

------------------------------------------------------------------------------*/