<!--
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');

body {
        width: 98%;
        margin-top: 50px;
        background-image: url("assets/background9.jpg");
        background-position: center;
        background-size: cover;
        font-family: 'Hammersmith One', sans-serif;
        display: flex;

       }
       
        #outer {
                width: 25%;
                max-height: 100% ;
                padding-left: 40px; padding-right: 10px; padding-top: 5px; 
                border-radius: 30px;
                margin: 10px; margin-right:100px; 
                margin-top: 10px;
                background: rgba(255, 255, 255,0.7);
                background-position: left;
                text-align: left;
                flex-basis: 25%;
                }

        #outer h1 { 
                margin-bottom: 50px;
                font-size: 35px;
                color: #000000;
                font-family: 'Hammersmith One', sans-serif;
                line-height: 1.5;
                }

        #outer p { 
                text-justify: auto;
                color:#0F0F0F;
                font-family: 'Hammersmith One', sans-serif;
                line-height: 2;
                }
        
        #title {
                margin-right: 10px;
                margin-top: 30px;
                margin-left: 10px;
                }
        
        #description {
                margin-right: 10px;
                margin-top: 30px;
                margin-left: 10px;
                }

h3 {
        font-size: 40px;
        font-weight: bolder;
        color: #0F0F0F;
        }

        #survey-form {
                width: 60%; height: auto;
                padding-left: 20px; padding-right: 20px; padding-bottom: 20px;
                border-radius: 30px;
                background: rgba(255, 255, 255,0.7);
                text-align: left; 
                height: 100%;
                }

        #fieldset {    
                border-width: 3px;
                border-radius:15px;
                color: #0F0F0F;
                background-color:transparent;
                opacity: .9;
                }

        #legend{
                margin-bottom: -50px;
                text-align: right;
                font-size: 35px;
                color: #000000;
               /* text-shadow: 3px 3px 2px #474954; */
                font-family: 'Hammersmith One', sans-serif;
                }

        #name-label { 
                color: #0F0F0F;
                font-family: 'Hammersmith One', sans-serif;
                font-size: 15px;
                }

        #email-label {
                color: #0F0F0F;
                font-family: 'Hammersmith One', sans-serif;
                font-size: 15px;
                }

        #number-label {
                color: #0F0F0F;
                font-family: 'Hammersmith One', sans-serif;
                font-size: 15px;
                }

        #question h2, h4 { 
                padding: 0;
                color: #281E1D;
                font-family: 'Hammersmith One', sans-serif;
                font-size: 25px;
                }      

        #genre-label {
                color:#0F0F0F;
                font-size: 15px;
                font-family: 'Hammersmith One', sans-serif;
                }

        #dropdown {
                color:#0F0F0F;
                font-size: 15px;
                }

        #radiobuttons {
                color: #0F0F0F;
                font-size: 15px;
                font-family: 'Hammersmith One', sans-serif;
                } 


/*Form inputs*/

input[type=text], input[type=email], input[type=number] {
                width: 100%;
                padding: 10px;
                margin: 8px 0;
                box-sizing: border-box;
                border-radius: 20px;
                background-color: cornsilk;
                color: black;
                font-size: 15px;
                font-family: 'Hammersmith One', sans-serif;
}

textarea {
                width: 100%;
                height: 150px;
                padding: 10px;
                box-sizing: border-box;
                border: 2px solid #ccc;
                border-radius: 20px;
                background-color: cornsilk;
                color: black;
                resize: none;
                font-size: 15px;
                font-family: 'Hammersmith One', sans-serif;
              }

select {
                width: 100%;
                padding: 10px;
                border: 2px solid #ccc;
                border-radius: 20px;
                background-color: cornsilk;
                font-size: 15px;
                font-family: 'Hammersmith One', sans-serif;
        }

input[type=button], input[type=submit], input[type=reset] {
                width: 20%;
                padding: 10px;
                background-color: cornsilk;
                border: 2px solid #ccc;
                font-size: 20px;
                font-family: 'Hammersmith One', sans-serif;
                color:black;
                text-decoration: none;
                cursor: pointer;
              }
           

-->