/*font-family: "PT Serif", serif;*/
/*font-family: "Noto Serif", serif;*/

html {
    font-size: 10px;
    font-family: "Noto Serif", serif;
    color: #111;
}

body {font-size: 1.5rem;}

img {
    float: right;
    shape-outside: circle(50%);
    margin-left: 1rem;
}

#ast {
    float: left;
    height: auto;
    shape-margin: 0.5rem;
    transform: translateX(-5px);
    shape-outside: polygon(153px 11px, 162px 44px, 144px 77px, 113px 131px, 62px 163px);
}

#tag, #box {display: none;}

section#space {
    background-image: url(../images/space-sm.jpg);
    background-size: cover;
    height: 100vh;
    position: relative;
}

h1 {
    font-family: "Staatliches", sans-serif;
    font-size: 7.5rem;
    color: #EEE;
    text-shadow: 0 0 8px #000;
    padding: 4rem 5.7rem 0 2rem;
}

span {color: #FE5D48;}

 h1 + p {
     color: #EEE;
     width: 70%;
     position: absolute;
     bottom: 2rem;
     left: 2rem;
     text-shadow: 0 0 8px #111;
     font-weight: 500;
     font-size: 1.7rem;
     text-align: left;
}

#text {margin: 2rem 1.5rem;}

section#text:first-child {margin-bottom: 2rem;}

#mark {
    font-family: "Staatliches", sans-serif;
    font-size: 2rem;
    color: #FE5D48;
    margin-bottom: 0;
}

h2 {
    font-family: "Staatliches", sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

p {
    line-height: 1.4;
    margin-bottom: 1rem;
    font-family: "Noto Serif", serif;
    text-align: justify;
}

p + p {text-indent: 1rem;}

h3 {
    font-family: "Noto Serif", serif;
    font-weight: bold;
    font-size: 2rem;
    margin: 2rem 0 1rem 0;
}

@media screen and (min-width: 500px) { h1 + p {width: 75%;} #text {margin: 2rem 2.5rem;}}

@media screen and (min-width: 600px) { #text {margin: 3rem 4rem;} }

@media screen and (min-width: 768px) {
    #tag {display: block;}
    
    #tag p {
        font-family: "Staatliches", sans-serif;
        font-size: 2.4rem;
        background-color: #111;
        color: #EEE;
        border-top: 2.3rem solid #ff4b33;
        width: 12.5%;
        padding: 0.5rem;
        text-align: center;
        margin-bottom: 0;
    }

    #tag {
        width: 100%;
        border-bottom: 1rem solid #ff4b33;
        margin-left: 3rem;
        position: fixed;
        top: 0;
        z-index: 1;
    }
    
    .box {
        z-index: 0;
        width: 100%;
        height: 76px;
        background-color: #FFF;
        position: fixed;
        top: 0;
    }
    
    section#space {
        width: 60%;
        height: 91vh;
        position: fixed;
        top: 76px;
        left: 0;
    }
    
    #space article {
        position: absolute;
        bottom: 20px;
        left: 10px;
        width: 60%;
    }
    
    h1 {
        padding: 0 7rem 0 2rem;
        font-size: 8rem;
    }
    
    span {word-spacing: 1.5rem;}
    
     h1 + p {
         color: #EEE;
         width: 90%;
         position: static;
         padding-left: 2rem;
         text-align: left;
    }
    
    section#text {
        width: 35%;
        position: absolute;
        right: 25px;
        padding: 10rem 0 0 0.5rem;
        z-index: -1;
        border-left: 1px solid #111;
        margin: 0;
    }
    
    section#text article {padding-left: 0.5rem;}
    
}

@media screen and (min-width: 880px) { #tag p {width: 11%;} }

@media screen and (min-width: 980px) {        
    section#space {width: 65%;}
    
    section#text {
        width: 30%;
        right: 35px;
    }
}

@media screen and (min-width: 1060px) {
    #tag p {width: 10%;}
    
    section#space {
        width: 67%;
        background-image: url(../images/space-lg.jpg);
    }
    
    h1 {font-size: 8rem;}
    
    section#text {
        width: 28%;
        right: 35px;
    }
    
}

@media screen and (min-width: 1200px) {
    #tag p {width: 8%;}
    
    section#space {width: 70%;}
    
    h1 {font-size: 9rem;}
    
     h1 + p {width: 85%;}
    
    section#text {
        width: 26%;
        right: 38px;
    }
    
}