@font-face {
    font-family: Source Sans Pro;
    src: url("./media/Fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf");
}
@font-face {
    font-family: Montserrat;
    src: url("./media/Fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}
:root {
    --title-color: black;
    --accent-color: #632b24;
    --background-color: rgb(214, 214, 214);

    --normal_font: 'Montserrat', sans-serif;
    --code_font: 'Source Code Pro', monospace;
    
}


::selection {
    background-color: var(--accent-color);
    color: var(--background-color);
}

::-moz-selection {
    background-color: var(--accent-color);
    color: var(--background-color);
}

* {
    font-family: var(--normal_font);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
}
*::-webkit-scrollbar{
    display: none; /* Chromium browsers and Safari*/
}

body {
    background-color: var(--background-color);
    margin: 2em;
    padding: 1em;
    
}

h1 {
    color: var(--title-color);
    margin: 0, auto;
    text-align: center;            
}

h2{
    color: var(--accent-color);
}

p {
    color: var(--accent-color);
}

p a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}
/* .social-media {
    -webkit-filter: drop-shadow(0px 8px 5px var(--title-color));
    -moz-filter: drop-shadow(0px 8px 5px var(--title-color));
     -ms-filter: drop-shadow(0px 8px 5px var(--title-color)); 
      -o-filter: drop-shadow(0px 8px 5px var(--title-color));
         filter: drop-shadow(0px 8px 5px var(--title-color)); 
} */
.social-media a svg{
    height: 1em;
}
.social-media a {
    margin: 1.5rem 1.5rem 0 0;
    font-size: xxx-large;
    color: var(--title-color);
}


.social-media a:hover {
    color: var(--accent-color);
    
}

.code {
    padding: 1rem;
    background-color: var(--background-dark-color);
    font-family: var(--code_font);
    color: var(--accent-color);
    border-style: solid;
    border-color: var(--accent-color);
    border-width: 2px;
}


.code c {
    font-family: var(--code_font);
    color: var(--title-color);
    font-weight: bold;
}
.projects{
    display: block;
    width: 100%;
}

.projects > * {
    /* box-sizing: border-box; */
    overflow: hidden;
    
}
.project{
    background-color: var(--background-dark-color);
    width: clamp(15em,22em,35em);
    padding: 1em;
    margin: 0.25em 1em 0 0;
    border-style: solid;
    border-color: var(--accent-color);
    border-width: 2px;
    display:inline-block;
    height: clamp(8em, 11em, 15em);
    overflow: scroll;
    color: var(--title-color);
    position: relative;
}
.vicotv::before{
    position: absolute;
    content:"";
    top: 1rem;
    right:1rem;
    width: 1.5em;
    height: 1.5em;
    background: url("./media/assets/Csharp.png") no-repeat 0 0;
    background-size: 100%;
}
.kian::before{
    position: absolute;
    content:"";
    top: 1rem;
    right:1rem;
    width: 1.5em;
    height: 1.5em;
    background: url("./media/assets/Adobe_InDesign_CC_icon.png") no-repeat 0 0;
    background-size: 100%;
}
.meinBaumhaus::before{
    position: absolute;
    content:"";
    top: 1rem;
    right:1rem;
    width: 6em;
    height: 1.5em;
    background: url("./media/assets/phpjshtmlcss-removebg-preview.png") left no-repeat;
    background-size: 100%;
}
.kydah::before{
    position: absolute;
    content:"";
    top: 1rem;
    right:1rem;
    width: 4.5em;
    height: 1.5em;
    background: url("./media/assets/jshtmlcss-removebg-preview.png") left no-repeat;
    background-size: 100%;
}
.akkordeonBrittnau::before, .denidrive::before{
    position: absolute;
    content:"";
    top: 1rem;
    right:1rem;
    width: 1.5em;
    height: 1.5em;
    background: url("./media/assets/Wordpress-Logo.png") left no-repeat;
    background-size: 100%;
}

.project p a {
    color: var(--title-color)
}
.project h2{
    margin-top: -0.125em;
}

.project img {
    max-height: 5em;
    max-width: 9em;
    float: right;
    margin: 0.125em 0 1em 0.125em;
    -webkit-filter: drop-shadow(0px 8px 5px var(--title-color));
       -moz-filter: drop-shadow(0px 8px 5px var(--title-color));
        -ms-filter: drop-shadow(0px 8px 5px var(--title-color)); 
         -o-filter: drop-shadow(0px 8px 5px var(--title-color));
            filter: drop-shadow(0px 8px 5px var(--title-color)); 
}
.project i img{
    vertical-align: bottom;
    bottom: 0;
    
}
.year {
    position: absolute;
    bottom: 0; right: 1em;
}
.certificates{
    display: block;
    width: 100%;
}
.certificate > iframe{
    -webkit-filter: drop-shadow(0px 8px 5px var(--title-color));
       -moz-filter: drop-shadow(0px 8px 5px var(--title-color));
        -ms-filter: drop-shadow(0px 8px 5px var(--title-color)); 
         -o-filter: drop-shadow(0px 8px 5px var(--title-color));
            filter: drop-shadow(0px 8px 5px var(--title-color)); 
}
.certificate > iframe {
    box-sizing: border-box;
    width: clamp(15em 22em 35em);
    /* width: clamp(15em,22em,35em); */
    margin: 0em 1em 1em 0;
    overflow: hidden;
}
.cert-link > a {
    color: var(--title-color);
}
@media only screen and (max-width: 700px) {
    body{
        width: 100%;
        max-width: 80% !important;
        min-width: 200px;
    }
    .cert-mobile{
        display: block;
    }
    embed {
        display: none;
    }

}