@charset "utf-8";

/**************************************************************************/

/* areas, contents and elements */

/**************************************************************************/

html {
  scroll-behavior: smooth;
}

/* areas */

header,
#creativeconcept,
#profile,
#brands,
#blog,
#references,
#books,
#community,
#accessibility,
#contacts,
footer {
    width: 100%;
    padding-top: 16rem;
    padding-bottom: 16rem;
    /* flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

/* contents */

.headercontent,
.creativeconceptcontent,
.profilecontent,
.brandscontent,
.blogcontent,
.referencescontent,
.bookscontent,
.communitycontent,
.accessibilitycontent,
.contactscontent,
.footercontent {
    width: 100%;
    padding-left: 4rem;
    padding-right: 4rem;
    /* flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

.footercontent {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* elements */

.headerelements,
.creativeconcepttext,
.profiletext,
.profilehighlights,
.brandstitle,
.brandslist,
.blogtitle,
.blogarticles,
.blogmore,
.referencestitle,
.referencesarticles,
.referencesmore,
.bookstitle,
.bookslist,
.communitytitle,
.communityarticles,
.accessibilitytitle,
.accessibilitytext,
.contactstitle,
.contactstext,
.footertext, 
.footersocial {
    width: 100%;
}

/*************************************/

/* structure */

/*************************************/

/*header,
#creativeconcept,
#profile,
#brands,
#blog,
#references,
#books,
#community,
#accessibility,
#contacts,
footer {
    background-color: aqua;
}

header,
#profile,
#blog,
#books,
#accessibility,
footer {
    background-color: indianred;
}

.headercontent,
.creativeconceptcontent,
.profilecontent,
.brandscontent,
.blogcontent,
.referencescontent,
.bookscontent,
.communitycontent,
.accessibilitycontent,
.contactscontent,
.footercontent {
    background-color: red;
}

.headerelements,
.creativeconcepttext,
.profiletext,
.profilehighlights,
.brandstitle,
.brandslist,
.blogtitle,
.blogarticles,
.blogmore,
.referencestitle,
.referencesarticles,
.referencesmore,
.bookstitle,
.bookslist,
.communitytitle,
.communityarticles,
.accessibilitytitle,
.accessibilitytext,
.contactstitle,
.contactstext,
.footertext,
.footersocial {
    background-color: cadetblue;
}

.headerheadline {
    background-color: yellowgreen;
}

.brandstitle,
.blogtitle,
.referencestitle,
.bookstitle,
.communitytitle,
.accessibilitytitle,
.contactstitle {
    background-color: darkgoldenrod !important;
}*/

/**************************************************************************/

/* text styles */

/**************************************************************************/

body {
    font-family: 'eSansSerif', 'Roboto', sans-serif;
    font-size: 16px;
    color: #111314;
    letter-spacing: -0.02rem;
}

h1,
h2,
h3,
h4,
p,
ul,
li,
a {
    font-weight: 300;
    font-size: 2rem;
    line-height: 3.4rem;
}

/* custom */

.blogarticles article h4 a,
.referencesarticles a,
.referencesmore a {
    font-weight: 300;
}

a,
.headerheadline h1 span,
h3 {
    font-weight: 700;
}

.headerheadline h1 {
    font-family: 'eSerif', 'IBM Plex Serif', serif;
    font-weight: 300;
    font-size: 5rem;
    line-height: 5.6rem;
    letter-spacing: 0;
}

.creativeconcepttext p {
    font-family: 'eSerif', 'IBM Plex Serif', serif;
    font-size: 2.8rem;
    line-height: 3.8rem;
    font-weight: 300;
    letter-spacing: 0;
}

.brandstitle h2,
.blogtitle h2,
.referencestitle h2,
.bookstitle h2,
.communitytitle h2,
.accessibilitytitle h2,
.contactstitle h2 {
    font-family: 'eSansSerif', 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

.footertext p {
    font-family: 'eSansSerif', 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 0.8rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

.headerheadline p,
.breaktag {
    font-family: 'eMonospace', 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 0.8rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

/**************************************************************************/

/* interactions */

/**************************************************************************/

::selection {
    background: #fed100;
	color: #111314;
}

::-moz-selection {
	background: #fed100;
	color: #111314;
}

:focus {
    width: 100%;
    height: 100%;
    outline: 2px dashed #111314;
    background-color: #fed100;
    color: #111314;
    z-index: 1000;
}

/* links */

a {
    color: #111314;
    text-decoration: none;
    padding-bottom: 0.2rem;
    box-shadow: inset 0 -1px 0 #FFFFFF;
    /* transitions */
    transition: all .2s linear;
    -o-transition: all .2s linear;
  	-ms-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

a:link {
    color: #111314;
}

a:visited {
    color: #111314;
}

a:active {
    color: #111314;
}

a:hover {
    color: #6932d4;
    box-shadow: inset 0 -18px 0 #eae7f7;
}

#blog a,
#books a {
    box-shadow: inset 0 -1px 0 #f6f7f8;
}

#blog a:hover,
#books a:hover {
    box-shadow: inset 0 -18px 0 #eae7f7;
}

/* social icons */

.socialicons {
    fill: #202324;
    /* transitions */
    transition: all .2s linear;
    -o-transition: all .2s linear;
  	-ms-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
}

.socialicons:hover {
    fill: #FFFFFF;
    transform: scale(1.3);
}

/**************************************************************************/

/* components */

/**************************************************************************/

/* primary titles */

.brandstitle,
.blogtitle,
.referencestitle,
.bookstitle,
.communitytitle,
.accessibilitytitle,
.contactstitle {
    border: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
}

/* secundary titles */

h3 {
    background: linear-gradient(45deg, rgba(40,248,209,1), rgba(0,205,255,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* texts */

.profiletext p,
.profiletext a,
.profilehighlights h3,
.profilehighlights p,
.profilehighlights ul,
.profilehighlights li,
.brandslist p,
.brandslist ul,
.brandslist li,
.blogarticles p,
.blogarticles article,
.blogarticles article h4,
.blogmore h3,
.blogmore p,
.blogmore div,
.blogmore div h4, 
.referencesarticles p,
.referencesarticles article,
.referencesarticles article h4,
.referencesmore p,
.referencesmore h3,
.referencesmore div,
.referencesmore div h4,
.bookslist p,
.bookslist div,
.bookslist div h4,
.communityarticles p,
.communityarticles article, 
.communityarticles article h4,
.accessibilitytext h2,
.accessibilitytext p,
.contactstext h2,
.contactstext p {
    width: auto;
    display: inline;
}

/* breaks */

.breaktype {
    /* spacing */
    margin-left: 0.4rem;
    margin-right: 0.6rem;
}

.breaktag {
    height: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: #111314;
    color: #FFFFFF;
    border-radius: 2rem;
    vertical-align: 50%;
    /* spacing */
    margin-left: 0.4rem;
    margin-right: 0.4rem;
}

.blogmore h4,
.bookslist h4,
.communityarticles h4 {
    /* spacing */
    margin-right: 0.4rem;
}

/* more content */

.profilehighlights,
.blogmore,
.referencesmore {
    margin-top: 8rem;
}

/* backgrounds colors */

.creativeconceptcontent,
.profilecontent,
.brandscontent,
.referencescontent,
.communitycontent,
.accessibilitycontent,
.contactscontent {
    background-color: #FFFFFF;
}

#blog,
.blogtitle,
.blogcontent,
#books,
.bookstitle,
.bookscontent {
    background-color: #f6f7f8;
}

/* backgrounds patterns */

header {
    background-image: url("../img/pattern.png");
    background-repeat: repeat-y;
    background-position: right -20rem top 0;
}

/* ... */

#brands {
    background-image: url("../img/pattern.png");
    background-repeat: repeat-x;
    background-position: left 0 top -20rem;
}

.brandstitle {
    margin-top: 2rem;
}

/* ... */

#creativeconcept {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: left -20rem bottom -20rem;
}

#community {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: right -20rem bottom 0;
}

#accessibility {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: left -20rem bottom 0;
}

.creativeconceptcontent,
.communitycontent,
.accessibilitycontent {
    padding-bottom: 4rem;
}

/* ... */

#blog {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: right -50rem center;
}

#references {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: left -50rem center;
}

#books {
    background-image: url("../img/pattern.png");
    background-repeat: no-repeat;
    background-position: right -50rem center;
}

/**************************************************************************/

/* custom */

/**************************************************************************/

/*************************************/

/* header */

/*************************************/

header {
    padding-top: 0;
    padding-bottom: 8rem;
}

.headerbrand {
    display: block;
    background-color: #111314;
}

.headerbrandicon {
    fill: #FFFFFF;
}

.headerheadline {
    margin-top: 16rem;
    width: 90%;
}

.headerheadline h1 span {
    background: linear-gradient(45deg, rgba(40,248,209,1), rgba(0,205,255,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headerheadline div {
    line-height: 0;
    height: auto;
    margin-top: 4rem;
}

.headerheadline div img {
    width: 2rem;
    height: 2rem;
    margin-top: 1rem;
}

/*************************************/

/* footer */

/*************************************/

footer {
    padding-bottom: 0;
    background-color: #111314;
    color: #FFFFFF;
}

.footertext {
    text-align: center;
    margin-bottom: 2rem;
}

.footersocial {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 4px solid;
    border-image: linear-gradient(45deg, rgba(40,248,209,1), rgba(0,205,255,1)) 4;
}

.footersocial ul {
    /* flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

.footersocial ul li {
    width: 40px;
    height: 40px;
    margin: 2rem;
}

.footersocial ul li a {
    border-bottom: none;
    box-shadow: none;
    width: 40px;
    height: 40px;
    display: block;
}