:root {
    --yellow: #ff4200;
    --black: #272727;
    --oak: #910000;
    --dybackmainX: 20vw;
    --dybackmainY: 7vh;
    --dybackmainS: 45vw;
    --dybackchainX: 30.5vw;
    --dybackchainY: 6.4vh;
    --dybackchainS: 42vw;
}
  
html {
    /* border-box box model allows us to add padding and border to our elements without increasing their size */
    box-sizing: border-box;
    /* A system font stack so things load nice and quick! */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 900;
    font-size: 10px;
    color: var(--black);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

::-webkit-scrollbar { width: 0px; }

body {
   /*background: url(/assets/Background.jpg);*/
   background: url(/assets/golden_blockchain.png), #f4f0fa;
   background-repeat: repeat-y;
   display: grid;
   overflow: hidden;
   min-height: 100vh;
   margin: 0px;
   padding: 0px;
   grid-template-rows: 34px auto 100px;
   grid-template-columns: 110px 1fr 110px;
   grid-template-areas: 
    "topbar topbar topbar"
    ". content ."
    "footer footer footer";
}

/* Each item in our grid will contain numbers */
.item {
    /* We center the contents of these items. You can also do this with flexbox too! */
    display: grid;
    justify-content: center;
    align-items: center;
    /*
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    */
    font-size: 27px;
    color: #34475c;
}
  
.item p {
    margin: 0 0 5px 0;
}
  
.topside {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8vh;
    grid-template-areas: 
    "newsbar";
    grid-area: topbar;
    /*background: linear-gradient(180deg, #1b191985, rgba(6, 6, 8, 0.055));*/
}

.content {
    display: grid;
    --webkit-scrollbar: { display: none; };
    overflow-y: auto;
    max-height: calc(100vh - 220px);
    grid-area: content;
    justify-content: center;
    align-items: center;
    margin: 0px;
    font-size: 16px;
    color: #34475c;
    border-radius: 0px;
    /*background: rgba(255, 255, 255, 0.21);*/
    grid-template-columns: 9% 1fr 9%;
    grid-template-rows: 2% 9fr 1fr;
    grid-template-areas:
    ". centercontent ." 
    ". centercontent ."
    ". centercontent .";
}

.content h2 {
    font-style: italic;
    text-decoration: underline;
    font-family: 'san-serif', serif;
    color: var(--yellow);
    padding-left: 15px;
}

.content div {
    font-family: 'san-serif', serif;
}

.content ul {
    font-family: 'san-serif', serif;
}

.content #marker {
    font-style: italic;
    color: var(--yellow);
    display: inline;
    font-size: 26px;
}

.content #clink {
    text-decoration: none;
    color: black;
}

.content #clink:hover {
    font-style: italic;
    color: var(--yellow);
}

.sysmodules {
    font-size: 20px;
}

#contentxt {
    height: 100%; 
    width: 100%; 
    font-size: 25px;
    grid-area: centercontent;
    text-align: justify;
    justify-self: center;
    align-items: center;
    margin: 0px;
}

#media-intro {
    display: block;
    border-top-right-radius:  13em;
    border-bottom-right-radius: 13em; 
    /*box-shadow: 11vw 9vh #27272777;*/
	position: fixed; 
	z-index: 300;
	bottom: 9.5vh; 
	right: 15vw; 
	width: 100vw; 
	height: 11vh; 
    background: #34475c;
    font-size: 1.11em;
}

#swap-media {
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
}

.structurepic {
    justify-items: center;
    width: 100%;
    text-align: center;
}

.structurepic img {
    height: 38vh;
}

.mediaContainer {
    display: grid;
    grid-template-columns: 55vw;
    grid-template-rows: 1fr;
    margin: 20px;
    justify-content: center;
}

.person {
    display: grid;
    grid-template-areas: 
    "pics name"
    "pics bio"
    "pics bio";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 105px 1fr;
}

.pname {
    display: grid;
    grid-template-areas: 
    "fullname fullname"
    "social jobt";
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 2fr 1fr;
}

.videoContainer {
    background-color: #290020;
    justify-items: center;
    align-self: center;
    display: block;
    min-width: 100vw;
    min-height: 100%;
    overflow: hidden;
    --webkit-scrollbar: { display: none; };
    align-self: center;
}

.meetupLinks a {
    text-decoration: none;
    color: white;
}

.meetupLinks a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.navibar {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1fr);
    grid-area: navigation;
    grid-template-areas: "myhome myabout mydemo mycontact";
    margin: 30px 1% 0 50%;
}

.mylogo {
    display: grid;
    grid-area: logo;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "logopic logotext";
}

.logopic {
    grid-area: logopic;
    margin: 20px 0px 4px 20px; 
    border:2px solid #eeffff;
}

.logotext {
    font-size: 29px;
    text-align: left;
    grid-area: logotext;
    align-self: self-end;
    padding: 0 0 11px 11px;
}

.myhome {
    grid-area: myhome;
    display: grid;
    padding: 0 5px 0 5px;
}

.myhome a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.myhome a:focus {
    color: var(--yellow);
    text-decoration: underline;
    outline: none;
}

.myhome a {
    text-decoration: none;
    color: #34475c;
}

.myabout {
    grid-area: myabout;
    display: grid;
    padding: 0 5px 0 5px;
}

.myabout a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.myabout a:focus {
    color: var(--yellow);
    text-decoration: underline;
    outline: none;
}

.myabout a {
    text-decoration: none;
    color: #34475c;
}

.mydemo {
    grid-area: mydemo;
    display: grid;
    padding: 0 5px 0 5px;
}

.mydemo a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.mydemo a:focus {
    color: var(--yellow);
    text-decoration: underline;
    outline: none;
}

.mydemo a {
    text-decoration: none;
    color: #34475c;
}

.mycontact {
    grid-area: mycontact;
    display: grid;
    padding: 0 5px 0 5px;
}

.mycontact a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.mycontact a:focus {
    color: var(--yellow);
    text-decoration: underline;
    outline: none;
}

.mycontact a {
    text-decoration: none;
    color:#34475c;
}

.w3-animate-opacity{animation:opac 1.5s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-fading{animation:fading 3s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

.click a {
    border: 2px solid var(--black); 
    font-size: 22px; 
    background: none; 
    color: var(--black);
    padding: 2px 6px;
    text-decoration: none;
}

.click a:hover {
    background: var(--black);
    color: #f4f0fa;
    cursor: pointer;
}

.copyright {
    font-size: 14px;
    text-align: center;
    grid-area: copyright;
}

.footbar {
    display: grid;
    grid-area: footer;
    grid-template-columns: 1fr 250px 70px 50px 250px 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        ". twitter github facebook youtube ."
        ". copyright copyright copyright copyright .";
    z-index: 301;
    /*background: #27272711;*/
}

@media (max-width: 1280px) {
    body {
        max-height: calc(100vh - 20px);
        grid-template-columns: 1fr;
        grid-template-rows: 34px 8fr 90px;
        grid-template-areas: 
        "topbar"
        "content"
        "footer";
        background-repeat: repeat-y;
    }

    .content {
        text-align: left;
        max-height: 95%;
        margin: 0px;
        padding: 0 6px 0 6px;
        grid-template-columns: 1fr;
        grid-template-rows: 10px 1fr 2%;
        grid-template-areas:
        "." 
        "centercontent"
        ".";
    }

    #contentxt {
        overflow-y: auto;
        --webkit-scrollbar: { display: none; };
        max-width: 85vw;
    }

    #marker {
        font-size: 2.6vh;
    }

    #swap-media {
        margin-top: 50px;
        margin-bottom: 5px;
    }

    #media-intro {
        /*box-shadow: 15vw 9vh #27272777;*/
        top: 52vh;    
        height: 11vh;    
        min-width: 100vw;
        font-size: 1.3em;
    }

    .structurepic img {
        height: auto;
    }

    .content p {
        text-align: left;
    }

    .contactinfo {
        margin: 20px;
    }

    .contactinfo li {
        font-size: 4.5vw;
    }

    .videoContainer {
        margin-top: 40px;
    }

    .logopic {
        justify-self: center;
        width: 96px;
        height: 96px;
        margin: 6px;
    }

    .mylogo {
        justify-self: center;
    }

    .logotext { 
        align-self: center;
        font-size: 36px;
        padding-top: 20px;
    }

    .topside {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
        "newsbar";
    }

    .item {
        font-size: 16px;
    }

    .navibar {
        grid-gap: 2px;
        justify-items: center;
        margin: 0 10px 0 10px;
        grid-template-rows: repeat(auto-fit, 1fr);
        font-size: 45px;
    }

    .navibar div { 
        width: 100%;
        font-size: 25px;
    }

    /* .navibar div:hover {
        border: 1px solid white;
        background-color: rgba(0, 0, 0, 0.37);
    } */

    .structurepic img {
        width: 80vw;
    }
}

@media(max-width: 1000px) {
    :root {
        --dybackmainX: 20vw;
        --dybackmainY: 1vh;
        --dybackmainS: 46vh;
        --dybackchainX: 47vw;
        --dybackchainY: 0vh;
        --dybackchainS: 48vh;
    }

    body {
        grid-template-rows: 34px 1fr 90px;
    }

    .content {
        grid-template-rows: 4px 1fr 2%;
        margin: 0px;
        padding: 0 6px 0 6px;
    }

    #contentxt {
        text-align: left;
        overflow-y: auto;
        --webkit-scrollbar: { display: none; };
    }

    #swap-media {
        margin-top: 100px;
    }

    #media-intro {
        top: 47vh;        
        max-width: 100vw;
        font-size: 0.9em;
        height: 11vh;
        padding-right: 5vw;
        /*box-shadow: 15vw 9vh #27272777;*/
    }
    
    .structurepic img {
        width: 95vw;
    }

    .mylogo {
        grid-template-columns: 1fr;
    }

    .logotext {
        display: none;
    }

    .navibar {
        grid-gap: 2px;
        justify-items: center;
        margin: 15px 10px 0 10px;
        grid-template-columns: repeat(auto-fill, 1fr);
        grid-template-rows: repeat(auto-fit, 1fr);
        font-size: 35px;
    }

    .navibar div { 
        width: 100%;
        font-size: 26px;
    }
}

@media(max-height: 1000px) {
    :root {
        --dybackmainX: 40vw;
        --dybackmainY: 14vh;
        --dybackmainS: 47vw;
        --dybackchainX: 40vw;
        --dybackchainY: 7vh;
        --dybackchainS: 48vw;
    }

    body {
        grid-template-rows: 34px 1fr 90px;
    }

    .navibar div {
        font-size: 16px;
    }

    .content {
        grid-template-rows: 10px 1fr 1%;
        margin: 0px;
        padding: 0 6px 0 6px;
    }

    #contentxt {
        margin: 0px;
    }

    #media-intro {
        top: 60vh;
    }

    #swap-media {
        margin-top: 25px;
    }

    .mylogo {
        grid-template-columns: 1fr;
    }

    .logopic {
        width: 64px;
        height: 64px;
    }

    .logotext {
        display: none;
    }

    .navibar {
        grid-gap: 2px;
        justify-items: center;
        margin: 0 10px 0 10px;
        grid-template-rows: repeat(auto-fit, 1fr);
        font-size: 35px;
    }

    .topside {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
        "newsbar";
    }
}