@layer main {

body{
  position: relative; /* for vertical line height span */
}

main{
}

    #vertical-line {
      top:100px;
      position: absolute;
      width:100px;
      min-height:95%;
      border-right: 1px solid var(--c-dark-accent2);
      z-index:1;
    }


/* Generic Blocks ------------------------------------------------------------------------------------------------*/

    .block{
      width:100%;
      padding:60px 0;
    }

        .bordered{
          border-bottom:1px solid var(--c-dark-accent2);
        }

    .bg-image{
      background: center / cover fixed no-repeat;
    }

    .bg-white{
      background-color: #fff;
    }

        .content-block{
          width:82%;
          margin:0px auto;
        }


/* Headings  ------------------------------------------------------------------------------------------------------*/

    h1 {
      font-size:11rem;
      line-height: 3rem;
      font-family: var(--font-2);
    }

    h1.white{
        font-size:25rem;
        line-height:9rem;
        color:#fff;
        margin: 20px 0 50px 0;
    }


/* Hero    ----------------------------------------------------------------------------------------------------------*/

/* dev */

      #dev .hero.bg-image {
          background-color: #fff;
          background-image: url('../../img/stock/clouds.png');
          opacity:0;
      }

      #dev .hero .content-block {
        padding-top:50px;
        display:flex;
        flex-direction: column;
        gap:70px;
      }

      #dev .hero .content-block div{
        align-items: center;
        align-self: center;
        text-align: center;
      }

          #dev .hero .content-block div:first-of-type{
            margin:30px 0 0 0;
          }

            #dev .hero .content-block div:last-of-type{
              width:700px;
            }

            #dev .hero h1{
              font-size:16rem;
              line-height: 4rem;
            }

                #dev .hero h1 .secondary{
                  font-size:6.5rem;
                  color: var( --c-main-accent);
                  font-family: var(--font-code);
                  -webkit-text-stroke: 0;
                }

            #dev .hero h2{
              font-size:2.5rem;
              line-height: 3rem;
              font-weight: 200;
              margin-bottom:20px;
            }

            #dev .hero h3{
              font-size:1.5rem;
              line-height: 1.5rem;
              font-weight: 200;
              margin-bottom:10px;
            }

            #dev .hero p{
              font-size:1.5rem;
              line-height: 2rem;
              font-weight: 200;
            }

            /* #dev .hero p.flex-right{
              padding-top:30px;
            } */

    /* language */

          #language .hero h1{
            font-size:8rem;
            line-height: 7.5rem;
            font-weight: normal;
          }

          #language .hero h2{
            font-size: 1.5rem;
            font-family: var(--font-code);
            font-weight: 100;
            margin-top:45px;
          }

/* Language Text sections ----------------------------------------------------------------------------------- */

  #language .content-1{
    width:600px;
    margin:0px auto;
  }

          #language .content-1 p{
            font-weight: 100;
            font-size:1.5rem;
            line-height: 2.3rem;
            padding-bottom:10px;
          }

          #language .content-1 h3{
            font-weight: 100;
            font-size:2.1rem;
            line-height: 2.5rem;
            font-weight: 500;
            padding:15px 0;
          }

          #language .content-1 h4{
            padding-top:40px;
            font-size: 6.4rem;
            line-height: 5rem;
            font-weight: 100;
            color: var(--c-dark-accent);
            font-family: var(--font-2);
          }

      #language .block .content-block.content-2{
        margin:0px auto;
        width:900px;
        padding:90px;
        background-color: #fff;
      }

      #language .block .content-block.content-2 h2{
        font-family: var(--font-3);
        color: var(--c-main-accent) !important;
        font-size: 4.2rem;
        line-height: 3.5rem;
        letter-spacing:2px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        margin: 0 0 40px 0;
      }

          #language .block .content-block.content-2 h2 .transform-non{
            font-size: 3rem;
            color: var(--c-dark-accent);
            letter-spacing:2px;
            /* line-height: 3.2rem; */
          }


        #language .block .content-block.content-2 p{
          font-size:1.5rem;
          line-height: 2rem;
          text-align: center;
        }


  #language .image-landscape{
      background-image: url('../../img/stock/rocks.jpg');
  }

    #language .content-3{
       padding:70px;
       padding-top:0;
    }

          #language .content-3 h2{
            font-family: var(--font-2);
            font-size:8rem;
            line-height: 7.5rem;
            font-weight: 100;
            color: var(--dark-accent2);
            margin-bottom: 70px;
          }

          #language .content-3 .content{
            width:600px;
            margin:0px auto;
          }

              #language .content-3 .content h3{
                margin-top:30px;
                font-size:2.5rem;
                line-height: 2.75rem;
                font-weight: 500;
              }

              #language .content-3 .content h4{
                margin-top:30px;
                font-family: var(--font-2);
                font-size: 4rem;
                line-height: 4.2rem;
                font-weight: 100;
                color: var(--c-dark-accent);
              }

              #language .content-3 .content p{
                font-size:1.5rem;
                line-height: 2.3rem;
                margin:15px 0;
              }


/* Definitions -----------------------------------------------------------------------------------------------------*/
/* dev & langauge */

        .definitions{
          padding:60px 0;
          text-align: center;
        }

            .definitions h2{
              font-size:21rem;
              font-family: var(--font-2);
              float:left;
              line-height: 5rem;
              margin-bottom: 30px;
              color: #fff;
            }

              #language.definitions h2{
                font-size:19rem;
                /* line-height: 12rem; */
                text-align: left;
              }

                    .definitions h2.code{
                      font-family: var(--font-code);
                      font-size: 16rem;
                      color:var(--c-main-accent);
                    }

                #language.definitions h2.code{
                  font-size: 11rem;
                }

            .definitions h4{
              font-size: 1.5rem;
              line-height: 2.4rem;
              font-weight: 200;
            }

            hr {
              border:none;
              border-bottom: 1px solid var(--c-dark-accent2);
              width:40px;
              margin-top:20px;
              margin-bottom: 20px;
            }


/*  Toggle  ---------------------------------------------------------------------------------------------------------*/

      .toggle {
        margin-top:30px;
        width:700px;
      }

            /* clickable text */
            .toggle-btn {
              display: block;
              cursor: pointer;
              color: var(--c-dark-accent);
              font-size: 1.5rem;
              padding: 20px 0;
              /* border-top:1px solid var(--c-main-accent); */
            }

                .toggle-btn:hover{
                  color: var(--c-main-accent);
                }

            /* toggle content mechanism */
            .toggle-content1, .toggle-content2, .toggle-content3, .toggle-content4 {
              display: none;
              padding-top:20px;
              font-size: 1.2rem;
            }

                  /* Show content when checkbox is checked */
                  #toggle1:checked + .toggle-content1, #toggle2:checked + .toggle-content2, #toggle3:checked + .toggle-content3, #toggle4:checked + .toggle-content4 {
                    display: block;
                  }



/* Contact Form -------------------------------------------------------------------------------------------------*/

      .contact{
        padding-top:60px;
        width:600px;
        margin:0px auto;
        font-family: var(--font-2);
      }

          .contact h3{
            font-size:4rem;
            line-height: 4rem;
            text-align: center;
            color: var(--c-dark-accent);
          }

              /* Form */

              .contact .contact-form1 {
                margin-top:40px;
                font-family: var(--font);
                display: block;
              }

                .contact .contact-form1 input{
                  width:100%;
                  margin:0 0 15px 0;
                  padding:15px;
                }

              .contact .contact-form1 textarea{
                  width: 100%;
                  padding:15px;
                }

/* Contact  Page ------------------------------------------------------------------------------------------------ */

/* #contact h1{
  font-size:11rem;
} */

#contact main p{
  font-size:2rem;
}

/* About -----------------------------------------------------------------------------------------------------------**/

        .about{
          display: flex;
          width:800px;
          gap:30px;
          justify-content: center;
        }

            #about main .content-block {
              display: flex;
              width:1000px;
              gap:30px;
              justify-content: center;
            }

            #about main{
              padding-bottom: 30px;
            }

        .about .images,
        #about main .images{
          flex: 0 0 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

            .about .images img.portrait,
            #about main .images img.portrait{
              border-radius: 50%;
              margin-bottom: 10px;
            }

                #about main .images img.portrait{
                  width:75%;
                }

            .about .images img.webby,
            #about main .images img.webby{
              width: 60%;
            }

              #about main .images img.webby{
                width: 40%;
              }

        .about .content,
        #about main .content{
          flex: 0 0 50%;
          display:flex;
          flex-direction: column;
          justify-content: flex-end;
        }

            .about .content p,
            #about main .content p{
              font-size:1.3em;
              line-height: 2rem;
              margin:.5rem 0;
            }

                #about main .content p{
                  font-size:1.3em;
                  line-height: 2rem;
                }
/*
            #about h1{
              font-size:25rem;
              line-height:9rem;
              color:#fff;
              margin: 20px 0 50px 0;
            } */


/* Legal pages   -------------------------------------------------------------------------------------------------*/

/* #legal h1{
  font-size:25rem;
  line-height:9rem;
  color:#fff;
  margin: 0 0 50px 0;
} */

  #legal .content-block {
    margin:0px auto;
    width:700px;
    min-height: 20vh;
  }

      .legal_documents{
        font-size: 1rem;
        line-height: 1.3rem;
      }

      .legal_documents h3 {
        font-weight: 100;
        font-size: 1rem;
        text-align: left;
      }

          .legal_documents p{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }

          .legal_documents img{
            width:75px !important;
            opacity: 0.5;
          }

}