@import url('https://fonts.googleapis.com/css?family=Karla|PT+Serif:700');

body, html {
    margin:0;

}

body {
    font-family:karla;
    font-size:18px;
    line-height:24px;
    letter-spacing:-0.05em;
}

#menu {
    position:fixed;
    z-index:9999;
    text-align:center;
    list-style-type: none;
    text-align:center;    
    bottom:0;
    width:100%;
}

#logo {
        position:fixed;
    z-index:9999;
    text-align:center;
    list-style-type: none;
    text-align:center;    
    top:10px;
    width:100%;
    fill:#55FFF7;
    transition:fill 0.2s;
}


#logo.s0 { fill:#55FFF7; }
#logo.s1 { fill:#5B029B; }
#logo.s2 { fill:#E59405; }


#menu li {
    display:inline;

}


#menu li a {
    display:inline-block;
    width:10px; height:10px;
    background:#55FFF7;
    border-radius:50%;
    transition:all 0.3s;
    margin:1em;

}


#menu.s0 li a { background:#55FFF7; }
#menu.s1 li a { background:#5B029B; }
#menu.s2 li a { background:#E59405; }

#menu li a:hover,
#menu li.active a {

    width:16px; height:16px;
    transform:translateY(3px);


}


.section {
        height:100vh;
        width:100vw;
        background:red;
        overflow-x:hidden;
      }


      #section0 {
        background:#C94B05;
        color:#55FFF7;
        display:grid;
        align-items: center;
      }


      #section1 {
        background:#FFDE6A;
        color:#5B029B;
        display:grid;
        align-items: center;
      }

      #section2 {
        padding:5em 0;
        background:#123F00;
        color:#E59405;
        height:auto

      }

      #section2 div, #section2 h2, #section2 h3, #section2 h4 {letter-spacing:0.015em!important;}

      a:hover {text-decoration:none;}
      
      #section0 a:link, #section0 a:visited { color:#55FFF7; border-bottom:1px solid #55FFF7; }
      #section1 a:link, #section1 a:visited { color:#5B029B; border-bottom:1px solid #5B029B; }
      #section2 a:link, #section2 a:visited { color:#E59405; border-bottom:1px solid #E59405; }

.underline {
    border-bottom:1px solid #000;
}

#section2 .underline {
    border-color: #E59405;
}


.thirds {
    display:grid;
    grid-gap:2em;
    margin:3em;
    grid-template-columns: repeat(3, 1fr);
}


      h1 {
        margin:0; padding:0;
        font-family:"PT Serif";
            font-size: 120px;
    line-height: 122px;
        /*font-size:140px;
        line-height:160px;*/
        text-align:center;
        /*transform: translateX(0.25em);*/
      }


      h2 {
        font-family:"PT Serif";
        /*font-size:78px;
        line-height:106px;*/
            font-size: 66px;
    line-height: 90px;
        text-align:center;
        margin:0;
        /*transform: translateX(0.5em);*/
      }

      h3 {
        font-family:"PT Serif";
        font-size:30px;
        line-height:40px;
        /*text-align:center;*/
        margin:0;
      }



      h4 {
        font-family:"PT Serif";      
        margin:0;
      }


@media (max-width:1000px) {
    h1 {
        font-size:60px;
        line-height:72px;
    }

    h2 {
        font-size:36px;
        line-height:51px;
    }

    h3 {
        text-align:center;
    }

    .thirds {
grid-template-columns: 1fr;
    margin:5px;
    }
}