Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
4.2 kB
2
Indexable
/* Default styles */
html{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif sans-serif;
}

.link{
font-style: normal;
color: #234599;
text-decoration: none;
}

.heading {
    margin-bottom: 60px;
}

h1 {
    font-size: 2rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 0 0.5rem 0.5rem 0.5rem;
}

label {
    font-size: 1.5rem;
    
}

input {
    line-height: 1.8rem;
    width: 22em;
    border-radius: 0.25rem;
    margin-top: 1.3rem; 
    height:2.8em ;
    font-size: large;
  
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

}

.formdiv {
    display: flex;
    align-items: center;
    justify-content: center;
  /*  background: green; */
    height: 40%;
    width: 30%;
    margin-bottom: 9rem;
    
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
    box-shadow:0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3),
    -0.4rem -0.4rem 0.4rem rgba(0, 0, 0, 0.3),
    0.4rem -0.4rem 0.4rem rgba(0, 0, 0, 0.3),
    -0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

}

button {
    margin-top: 60px;
    font-size: 1.2rem;
    background:black;
    font-style: normal;
    color: white; 
    width: 21.5em;       /* 1.5-12,1.6,0.25   1.2 -*/
    height: 3.0em;
    border-radius: 0.25rem;
    
}

p{
 margin-top: 2.2rem;  
 font-size: 1.2rem;
}

nav{
    display: flex;
    height: 80px;
        background: black;
        justify-content:space-between;
        padding: 1rem calc((100vw-1000px)/2);
        z-index:10;
        
        }
        
    nav h1{
    color: white;
    padding: 0 1rem;
    }
        
    nav .menu{
        
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vh;
        margin-right:-400px;
        justify-content: flex-start;
        
        @media screen and (max-width: 768px) {
            display: none;
          } 
        /*flex-grow: 4;*/
        }
        
        /*
        .link{
        color: white;
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: 0 1rem;
        height: 100%;
        }
        */
    nav .link {
            color: white;
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 0 1rem;
            height: 100%;
            margin-right: 1rem; /* Add margin to the right */
          }
        
    nav button{
            display: flex;
            align-items: center;
            margin-right: 24px;  
            border-radius: 4px;  /*rounded border*/
        
            background: #256ce1; /*blue colour */
            padding: 10px 22px;
            color: #fff;
            outline: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
            
          &:hover {
            transition: all 0.2s ease-in-out;
            background: #fff;
            color: #010606;
          }
        }



/* Media queries */
@media screen and (max-width: 768px) {
    /* Adjust heading margin for smaller screens */
    .heading {
        margin-bottom: 30px;
    }

    /* Adjust font size and padding for smaller screens */
    h1 {
        font-size: 1.5rem;
    }

    /* Adjust font size for smaller screens */
    label {
        font-size: 1rem;
    }

    /* Adjust height and width for smaller screens */
    .formdiv {
        height: 80%;
        width: 80%;
        margin-bottom: 2rem;
    }

    /* Adjust font size and margin for smaller screens */
    button {
        margin-top: 30px;
        font-size: 1rem;
        width: 20em;
    }

    input {
        line-height: 1.4rem;
        width: 17em;
        border-radius: 0.25rem;
        margin-top: 1rem; 
        height:2em ;
        font-size: large;
      
    }

    p{
         
        font-size: 0.8rem;
       }
       
}