* {
    box-sizing: border-box;
}

body {
    margin:0;
}

/* for linked elements */

/* a {
    outline:transparent;
    text-decoration: none;
}

a:link {
    color:#1E3B5C;
}

a:visited {
        color: #8B8C89;

}

a:hover {
    color: #6287b1;
}

a:active {
        color: #f5ebe0;

}          */              

/* for screen sizing */
/* 360 */

@media screen and (min-width:200px) {
        .container {
            display:flex;
            width:100vw;
            height:100vh;
            background:#201e1b;
            justify-content: center;
        }

        button:hover{
            color: #f7f1ec;
            background-color:#6287b1;
        }

        .desktop {
            display:none;
        }

        /* .menubutton {
            button {
                border: none;
                background-color: inherit;
                padding: 0;
                font: inherit;
                cursor: pointer;
                appearance: none; 
                font-size:20px;
                font-family: 'NT Epika regular', sans-serif;
                margin-left:15px;
                margin-top:15px;
            }
        } */
/* 
        .menu {
        background: #e3d5ca9c;
        font-size: 150%;
        font-family: 'NT Epika Regular', sans-serif;
        position:fixed;
        top:100px;
        margin-left:30px;
        height:300px;
        width:300px;
        border-radius:50%;
        padding:20px;
        text-align:left;
        visibility: hidden;
        opacity: 0;
        
        transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
        }

        .menu.active {
        visibility: visible;
        opacity: 1;
        transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
        } */

        .title {
            position:absolute;
            font-size:70px;
            font-family: 'NT Epika Regular', sans-serif;
            color:#f7f1ec;
            margin-top:90px;
            animation: fade 4s 4s infinite alternate;

        }

        @keyframes fade{
            0% {
                opacity:100%;
            }
            100%{
                opacity:0%;
            }
        } 

        .form {
            position:absolute;
            display:flex;
            justify-content: center; 
            align-items: center;      /* Vertically centers children */
            height: 100vh; 
            max-width: 100%;     

        }

        textarea {
            width:340px;
            height:300px;
            font-size:15px;
            font-family: 'instrument sans';
            border: solid #f7f1ec;
            border-radius:3%;
            padding:10px;
        }

        textarea:focus {
        border: 2px solid #6287b1;
        outline: none;   
        }

        button {
        font-family: 'NT Epika regular', sans-serif;
        font-size:15px;
        border-radius: 5px;
        color:#f7f1ec;
        background-color:#57524b;
        padding:4px 8px;
        border: solid 1px #f7f1ec;
        cursor:pointer;  
        display: block;
        margin:5px auto ;

    } 

}

/* default style */

body {
    font-family: 'NT Epika Regular', sans-serif;
    background:#57524b;
    color:#1E3B5C;
}
ul {
    margin-top:50px;
}
li {
    list-style-type: none;
}


@media screen and (min-width:1000px) {

.desktop {
    position:fixed;
    font-size:25px;
    color:#f7f1ec;
    display:block;
    margin:auto 0;
    margin-top:400px;
}

}