:root{
	--idp-green: #0E8860;
	--idp-cyan: #00757B;
	--idp-blue: #4292D3;
	--idp-black: #111518;
	--idp-red: #b14848;
}

@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300;
  src: url(/static/fonts/Onest/Onest-Light.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  font-display: swap;
}

@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400;
  src: url(/static/fonts/Onest/Onest-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  src: url(/static/fonts/Font_Awesome/fa-solid-900.woff2) format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Free Brands'; font-weight: 400;
  src: url(/static/fonts/Font_Awesome/fa-brands-400.woff2) format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'mTLS ID'; font-weight: 400;
  src: url(/static/fonts/mTLS_ID/mTLS_ID.ttf) format('truetype');
  font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.4;
    font-size: 18px;
    background-color:#262d3e;
    color: #333;
}

section{width:100%; float:left; text-align:center; display:flex; justify-content:flex-start; align-items:center; flex-direction: column;}
content{display:inline-block; max-width:1200px; text-align:left;}

section.headline {
    background: linear-gradient(to bottom, #63d2ff, #006495);
    height:85vh;
    padding:40px;
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.4);

    content{
        text-align:center;
        background:url(/static/agency-needs-identity.webp) no-repeat center top;
        background-size:contain;
    }
    h1{
        font-weight: 300;
        font-size: 4em;
        color:#202020;
        margin:0.3em;
        margin-top:30vh;
        line-height: 100%;
        span{font-family: mTLS ID; font-size: 1.2em;}
    }
    p{
        font-weight: 400;
        font-size: 1.2em;
        color:#FFFFFFCF;
        line-height: 1.2;
    }
    p.subtitle{
        display:inline-block;
        font-size: 1.4em;
        margin-bottom:1em;
        color:#000000;
        padding-bottom:1em;
    }
}

section.graphic{
    padding:40px;
    content{
        display:flex;
        flex-direction: row;
        align-items: stretch;
        align-content: center;
        justify-content: center;
        row-gap: 3em;
        column-gap: 3em;
        flex-wrap: wrap;
        padding:40px;

        h2{
            text-align: center;
            font-size: 2em;
            font-weight: 100;
            color:#FFFFFF;
            margin:1em 0 0 0;
            width:100%;
        }

        div{
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            column-gap: 3em;
            row-gap: 1em;
            flex-wrap: wrap;
            p{color: #0AB1FF; font-size: 1.2em; max-width: 300px; display:inline-block; text-align:left;}
        }

        img{
            max-width: 640px;
            height:auto;
            opacity: 0.6;
            filter: drop-shadow(15px 15px 3px rgb(0 0 0 / 0.5));
        }

	  div.embed-container { 
        	  position: relative; padding-bottom: 56.25%; width:100%; max-width: 100%;
		  iframe, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	  } 
        
        p{
        	margin-top:10px;
			
        	a{
			color:#FFFFFFAF;	 text-decoration:none; 
			&:hover{color:#FFFFFF;}
			span{
				&:before{font-family:'Font Awesome 6 Free Brands'; content:'\f167'; font-weight:400; margin-right:10px;}
			}
		}
        }
        
    }
}

section.graphic_1{
    padding:80px;
    background-color: #FFFFFF00;
    h2{
        text-align: center;
        font-size: 2em;
        font-weight: 100;
        color:#FFFFFF;
        margin:1em 0 1.5em 0;
        width:100%;
    }
    div{
        display:flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        column-gap: 3em;
        row-gap: 1em;
        flex-wrap: wrap;
        p{color: #0AB1FF; font-size: 1.2em; max-width: 380px; display:inline-block; text-align:left;}
    }
    table{
        width:100%;
        max-width: 1024px;
        border-collapse: separate;
        border-spacing: 3px;
        margin-top:2em;
        td{
            vertical-align: top;
            width:25%;
            font-size: 0.9em;
            font-weight: 400;
            padding:1em 1em;
            background-color: #6EACE38C;
            border-radius: 5px;
            color:#FFFFFF;
        }
        td.img{
            text-align:center;
            vertical-align: middle;
            background: #FFFFFF1F;
            padding:15px 20px 5px 20px;
            img{
                display: inline-block;
                width:100%;
                height:auto;
                max-width: 180px;
                opacity: 0.5;
            }
        }
        td.ai{
            background: #8EDD718C;
            span{
                color:#000000;
                background: #FFFFFF;
                padding:0em 0.2em;
                border-radius: 3px;
                margin-left: 2px;;
            }
        }
        th{
            font-size: 0.9em;
            font-weight: 400;
            padding:1em 1em;
            background-color: #0AB1FF;
            border-radius: 5px;
            color:#000000;
        }
    }
    
    
}

section.principles{
    background-color: #FFFFFFF0;
    padding:40px;
    
    content{
        padding:40px 80px 80px 80px;
    }

    h2{
        font-size: 2em;
        color:#202020;
        margin:1em 0;
        font-weight: 300;
        line-height: 100%;;
    }
    h3{
        font-size: 1.6em;
        font-weight: 300;
        margin:2em 0 0.3em 0;
        color:#006495;
        margin-bottom:0.3em;
        line-height: 100%;
    }
    p{
        font-size: 1em;
        color:#303030;
        line-height: 1.2;
    }
    p.hr{
        border-top: 1px solid #00000030;
        margin:2em 0;
    }
    p.subtitle{
        font-size: 1.2em;
        span{
            font-family: mTLS ID;
            font-size: 1.2em;
        }
    }
}
section.share{
    padding:80px 80px 160px 80px;

    content{
        text-align:center;
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    p{
        display:inline-block;
        font-size: 1.2em;
        color:#FFFFFFAF;
        line-height: 1.2;
        margin:1em;
    }

    a.button{
        font-size: 0.9em;
        background: #0AB1FF;
        color:#000000;
        text-decoration: none;
        border:1px solid #000000;
        padding:0.4em 1em;
        border-radius: 40px;
        transition: background 0.3s ease;
    }

    a.button:hover{
        background: #84d8ff;
        text-decoration: none;
    }

    .social-share {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 0.5em;
        p{
            font-size: 1.em;
            color:#FFFFFF6F;
            line-height: 1.2;
            margin:0.3em;
            margin-right: 0;
        }
        .social-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #FFFFFFA0;
            text-decoration: none;
            transition: transform 0.2s ease;
            background: transparent;
            border: 1px solid #FFFFFFA0;
            &:hover {
                transform: scale(1.1);
                color: #FFFFFF;
                border-color: #FFFFFF;
            }
        }
    }
}
section.footer{
    padding:40px;
    background-color: #00000020;
    p{
        font-size: 0.8em;
        color:#FFFFFF8F;
    }
    a{
        color:#FFFFFF8F;
        text-decoration: none;
    }
}
.register {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 3vh;

    .registration-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        background:#FFFFFFC0;
        padding:5px;
        border-radius: 40px;
        border:1px solid #00000090;
    }
    
    
    input[type="email"] {
        padding: 0.75rem;
        width:100%;
        border: none;
        border-radius: 4px;
        font-size: 1em;
        transition: border-color 0.3s ease;
        border:none;
        background:transparent;
        color:#000000;
    }
    
    input[type="email"]:focus {
        outline: none;
        border:none;
        background:transparent;
    }

    p.hint{
        font-size: 1em;
        font-weight: 400;
        color:#FFFFFF;
        margin-bottom:0.6em;
        text-align:left;
    }
}


button {
    padding: 0.75rem 1.5rem;
    background-color: #001528;
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s ease;
}

button:hover {
    background-color: #000000;
    color: #63d2ff;
}

.message {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-align: center;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.twitter, .linkedin, .facebook, .reddit { 
    background-color: transparent;
}

@media screen and (max-width: 768px) {
    section.headline{
        height:auto;
        padding:20px;
        content{ text-align: left;}
        h1{ margin:25vh 0 1vh 0; font-size: 2.6em; line-height: 1; }
        p.subtitle{ font-size: 1.1em; max-width: 60%; }
        .register{ padding:0px; }
    }

    section.graphic{
        padding:20px;
        content{
            padding:20px 0px;
            text-align: left;
            column-gap: 2em;
            row-gap: 2em;
            img{ max-width: 90%; }
            p{ font-size: 1em; max-width: 100%; }
        }
        iframe{width:480px;}
    }
    section.principles{
        padding:20px;
        content{
            padding:20px 0px;
            h2{ font-size: 1.8em; }
            h3{ font-size: 1.6em; }
            
        }
    }
    section.share{
        padding:20px;
        content { flex-direction: column; align-items: center; }
    }
    section.footer{
        padding:20px;
        p{ font-size: 0.7em; }
    }
    section.graphic_1{
        padding:20px;
        h2{ text-align: left; font-size: 1.6em; line-height: 1; font-weight: 100; color:#FFFFFF; margin:1em 0 0.5em 0;}
        table{
            margin-top:1em;
            td, th{ font-size: 0.6em; }
            td.img{ padding:10px 10px 5px 10px; }
        }
    }
}