:root {  
            --background-color: #F6F3F1;
            --primary-color: #394F3C;
            --secondary-color: #6B8053;
            --tertiary-color: #E9E0DD;
            --quaternary-color: #9FB8A2;
            --quinary-color: #9AB0BB;
            --accent-color: #B07C7A;
            --header-font: Monserrat, sans-serif;
            --header-text-transform: uppercase;
            --header-font-weight: bold;
            --body-font: Roboto, sans-serif;
            --body-font-weight: 400;
            --button-border-radius: 0;
            } 
        
    
        html {
            background-color: var(--background-color);
        }

        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: var(--body-font);
        }

        body {
            overflow-x: hidden;
        }
        
        .msg {
            padding: 20px 24px;
            border-radius: 12px;
}

.msg li {
    list-style-type: none;
}

.msg.success {
     background-color: #D9F0DE;
     color: #598A62;
}

.msg.danger {
     color: #5B151D;
    background-color: #FDD6D6;
}
        
        #container1 {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        /* Header */

        header {
            background-color: transparent;
            width: 100%;
            position: fixed;
            top: 0;
            margin: 0;
            padding: 0;
            list-style-type: none;
            transition: 0.3s;
            z-index: 5;
            height: 115px;
        }

        .logo {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            float: left;
            margin-left: 8em;
        } 
        
        .logo {
            width: 100px;
        }

        .nav-bar {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            float: right;
            margin-right: 6em;
        }

        .option {
            display: inline-block;
            margin: 0 20px;
            position: relative;
            padding: 10px 20px;
            border: 1px solid #5B1919;
        }


        /* Header */

        h1 {
            font-family: var(--header-font);
            font-size: 36px;
            color: var(--primary-color);
            text-align: center;
            text-transform: var(--header-text-transform);
        }

        h2, h3, h4, h5, h6 {
            font-family: var(--header-font);
        }
        
        h3 {
            text-transform: var(--header-text-transform);
            color: var(--secondary-color);
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .valley {
            position: absolute;
            opacity: 0.5;
            transition: 0.3s;
        }

        /* Section */

        #introduction {
            background-color: transparent;
            height: 100vh;
            margin: 0;
        }

        section {
            position: relative;
            width: 100%;
        }

        .background {
            height: 100vh;
            width: 100vw;
            background: linear-gradient(298deg, #F2EBE8 0%, #FFF 100%);
            filter: blur(30px);
            position: absolute;
        }


        /* Containers */

        .container {
            position: relative;
            display: block;
        }

        form {
            width: 100%;
            margin: 0 auto;
            display: block;
        }

        .form-container {
            margin: 0 auto;
        }

        .text-input {
            background-color: white;
      width: 100%;
      border: 2px solid var(--quinary-color);
      font-family: inherit;
      display: block;
      padding: 15px 20px;
      margin-bottom: 30px;
      background-color: var(--background-color);
     font-size: inherit;
            box-sizing: border-box;
        }

        textarea:focus, input:focus {
      outline: none;
      border: 2px solid var(--quaternary-color);
      background-color: var(--tertiary-color);
    }
        
            .password {
        position: relative;
    }
       .password-toggle {
           width: 20px;
           position: absolute;
           right: 0;
           top: 50%;
           transform: translateY(-50%);
       }
       
       form button {
           float: right;
       }

           button {
      border: none;
      padding: 15px 40px;
      cursor: pointer;
      z-index: 2;
      font-family: var(--body-font);
      border-radius: var(--border-radius);
      font-size: 16px;
    }
    
    .primary {
        background-color: var(--secondary-color);
        color: white;
    }
    
    .primary:hover {
        background-color: var(--primary-color);
    }
    

        footer {
            padding: 0 40px;
            z-index: 5;
            height: 70px;
            font-size: 14px;
        }

        .more-links {
            border-top: 1px #6D5A52 solid;
            bottom: 0;
            width: 70vw;
            padding: 20px;
            color: #6D5A52;
            margin: 0 auto;
        }
        
        .error {
            background-color: #e6aaaa;
            color: #000000;
        }
        
        ul li {
            list-style-type: none;
        }

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

            button {
                width: 100%;
            }

            a {
                text-decoration: none;
                color: inherit;
            }


        }

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

            .logo {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                float: left;
                margin-left: 2em;
            }

            .mobile {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                float: right;
                margin-right: 2em;
            }

            #mobile-dm {
                position: relative;
                top: 46%;
                transform: translateY(-46%);
                margin: 0 auto;
                height: 20px;
                width: 20px;
                fill: #372F34;
            }

            #mobile-dm:hover {
                fill: #B27174;
            }

            #exit {
                position: relative;
                float: right;
                margin-right: 1.6em;
                top: 40px;
            }

            .nav-bar {
                display: none;
            }


            #introduction .container {
                top: 40%;
                transform: translateY(-40%);
                height: 50vh;
            }

            .container {
                margin: 0 2em;
                position: relative;
            }

            .form-container {
                width: 100%;
            }

            button {
    
                width: 100%;
            }

        }

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

            .mobile, .mobile-icon {
                display: none;
            }

            .nav-bar {
                display: block;
            }

            #introduction .container {
                top: 40%;
                transform: translateY(-40%);
            }

            .container {
                margin: 0 8em;
                position: relative;
            }

            .form-container {
                width: 600px;
            }


        }


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

            .valley {
                width: 100vw;
            }
        }


        @media (pointer:coarse) {

            .logo {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                float: left;
                margin-left: 2em;
            }

            .mobile {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                float: right;
                margin-right: 2em;
            }

            #exit {
                position: relative;
                float: right;
                margin-right: 1.6em;
                top: 40px;
            }

            .nav-bar {
                display: none;
            }

        }
        
        .msg ul {
    padding: 0;
    margin: 0;
}