@font-face {
    font-family: 'Conduit'; 
    src: url("../fonts/Conduit_ITC_Regular.otf") format("opentype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Conduit'; 
    src: url("../fonts/Conduit_ITC_Bold.otf") format("opentype");
    font-style: bold;
    font-display: swap;
}

@font-face {
    font-family: 'Conduit'; 
    src: url("../fonts/Conduit_ITC_Italic.otf") format("opentype");
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BrandonGrotesque'; 
    src: url("../fonts/BrandonGrotesque-Regular.otf") format("opentype");
    font-style: bold;
    font-display: swap;
}

@font-face {
    font-family: 'BrandonGrotesque'; 
    src: url("../fonts/BrandonGrotesque-Light.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}
/*

*/
* {box-sizing: border-box;}

body, button, textarea, input, h1, h2, h3, h4, h5, h6 {
    font-family: "BrandonGrotesque", sans-serif;
}

body, button, textarea, input {font-size: 1.2rem;}

h1 {font-size: 2rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.25rem;}
h5 {font-size: 1.15rem;}
h6 {font-size: 1rem;}

h1, h2, h3, h4, h5, h6 {margin:0.25em 0;}


body {
    margin:0;padding:0;background-image: url('../img/Farbverlauf_solo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    height: 100vh;
}

.Content {height: 100vh;display:flex;flex-flow: column nowrap;}

header{text-align: center;padding: 1.5rem;}
.Logo {height:2.5rem;margin:0 auto;}
.subLogo{letter-spacing: 0.33rem;margin-top:0.5rem;font-family: "Conduit", sans-serif;}

main {flex:1; display:flex;flex-flow: column nowrap;align-items: center;}
.MainContent {max-width: 1280px;}

footer {display:flex;flex-flow:row wrap;justify-content: space-between;align-items: center;padding:0.25rem 1rem;width:100%;max-width: 1280px;
    font-size:0.8rem;margin:auto;color:rgba(0,0,0,0.5);margin-top:1rem;}
    
.FooterLink{text-decoration: underline;text-decoration-color: rgba(0,0,0,0.3); color: rgba(0,0,0,0.5);transition:all 0.25s}
.FooterLink:hover{text-decoration: none;color:rgba(0,0,0,0.8);text-decoration-color: rgba(0,0,0,0)}

p {line-height: 1.6rem;margin:1rem 0}

.Button1{background-color: #3399ee;color: white;padding: 0.5rem 1rem;border-radius: 0.5rem;font-size: 1rem;letter-spacing: 0.5px;cursor: pointer;
    outline: none;outline-offset: 0;border: 1px solid #ffffff;transition: all 0.33s;}
.Button1:hover{background-color: #2266dd;}

.ArticleContent {background-color: rgba(255,255,255, 0.66); padding:1rem 2rem; margin:0.5rem; border-radius: 0.5rem;}
.ArticleImage {background-color: rgba(255,255,255, 0.66); margin:0.5rem; border-radius: 0.5rem;overflow: hidden;}
.ArticleImage > img {width: 100%;height: 100%; object-fit: fill;}

.FlexRowWrap {display: flex; flex-flow: row wrap;}
.FlexRow {display: flex; flex-flow: row nowrap;}

.Flex100 {flex: 1 1 100%}
.Flex75 {flex: 1 1 72%}
.Flex66 {flex: 1 1 65%}
.Flex50 {flex: 1 1 47%}
.Flex33 {flex: 1 1 31%}
.Flex25 {flex: 1 1 22%}

.AutoHyper {hyphens: auto;}

.TextIcon {height:1.75rem;vertical-align: bottom;}

.mTopM {margin-top: 1rem;}
.mTopL {margin-top: 2rem;}

/* media queries */
@media screen and (max-width: 900px) {
    .FlexRow {display: flex; flex-flow: row wrap;}
    .Flex75, .Flex66 {flex: 1 1 100%}
    .Flex25 {max-width: 50%;}
}

@media screen and (max-width: 600px) {
    .Flex75, .Flex66, .Flex50, .Flex33, .Flex25 {flex: 1 1 100%}
    .Flex25 {max-width: 100%;}
}