@import "./style.css";

#page-title{
    color: #8cb670;
    text-align: center;
    font-size: 4rem;
    font-family: "scary_feet";
}

/* Add Section */
.code-sec{
    padding-top: 4rem;
    width: 80%;
    margin: 0 auto;
}   

    .code-sec p{
        text-align: center;
        padding-top: 1rem;
        color: white;
        font-family: "scary_feet";
        font-size: 1.2rem;
    }

        .code-sec p a{
            text-decoration: none;
            color: #8cb670;
        }

    .info-sec{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        #tut{
            width: 100%;
        }

        .info-sec h2{
            color: white;
            font-family: "scary_feet";
            font-size: 3rem;
            letter-spacing: 2px;
        }

        #live-site{
            color: #8cb670;
            padding: 0.5rem 2rem;
            margin: 1rem 0;
            background-color: #2c2828;
            border-radius: 10px;
            text-decoration: none;
            font-family: "scary_feet";
            font-size: 1.3rem;
            box-shadow: 2px 2px 3px #0a0a0a;
        }

        #live-site:hover{
            box-shadow: 1px 1px 4px #8cb670;
            text-shadow: 1px 1px 1px #47be59;
        }

    .code-sec img{
        width: 100%;
    }

    .code-ref{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

        .html{
            flex: 1;
        }

        .css{
            flex: 1;
        }

        figcaption{
            color: white;
            font-family: "scary_feet";
            font-size: 3rem;
            text-align: center;
            padding-top: 1rem;
        }

        textarea{
            display: block;
            white-space: pre;
            line-height: 1.5;
            min-height: 800px;
            min-width: 100%;
            background-color: #1e1a1a;
            border: none;
            color: white;
            font-size: 1rem;
            outline: none;
        }

        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

/* Disclaimer Sec */

    .disclaimer-sec{
        background-color: #2f2c2c86;
        padding: 1rem 0;
        width: 85%;
        height: 100%;
        border-radius: 10px;
        margin: auto;
        border: 1px rgba(255, 255, 255, 0.2) solid;
    }

        .disclaimer-text{
            font-size: 1rem;
            color: white;
            text-align: center;
        }

        #code-download{
            font-size: 1rem;
            color: white;
            text-align: center;
            padding: 2rem 0;
            line-height: 1.5;
        }

            .disclaimer-sec a{
                text-decoration: none;
                color: #8cb670;
            }
        
/* Media Queries*/
@media only screen and (max-width: 1024px) {
    .disclaimer-sec{
        width: 100%;
    }
}


@media only screen and (max-width: 700px) {
    .code-sec{
        width: 95%;
    }

    .code-ref{
        display: block;
    }

    textarea{
        font-size: 0.5rem;
        min-height: 600px;
    }

    .disclaimer-text,
    #code-download{
        font-size: 0.7rem;
    }
}

@media only screen and (max-width: 320px) {
    
}