*{
        margin: 0;
        padding: 0;
}
    html {
        font-family:Lato, sans-serif;
        color: #333;
        text-align: center;
        }
    body {
        max-width: 100%;
        margin: 0;
        line-height: 1.6;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        background-color: black;
        }

    img {
            width: 100%;
            height: auto;
            object-fit: contain; 
            display: block;
            align-self: center;
            padding-bottom: .8rem;      
         }

    .frontpage {
        height: 100vh;
        height: 100dvh;
        object-fit: cover; 
    }

    .bgimage {
        background-color: black;
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        align-items: center;
        position: relative;
        max-width: 1500px;
        margin: 0 auto;
    }

 .avonti {
        font-family: "Akaya Kanadaka", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 2.5rem;     
    }
            
.intro {
        background-color: rgba(2, 2, 2, 0.45);
        width: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        padding: .5rem;
         align-items: center;
         justify-content: flex-start;
        
        }

    #logo {
       max-width: 300px;
       padding: 1.5rem; 
      
    }

    .speil {
        color: #fff;
        padding: 1.5rem;
         flex-grow: 1;
    }
    
    .enter {
        color: #333;
        background-color:#F2A5C8;
        text-decoration: none;
        border-radius: 20px;
        padding: .5rem;  
    }

   a.underlinelink:link{
        color: white;
    }

    a.underlinelink:hover,  a.underlinelink:visited{
    color: rgb(247, 184, 222);
    }

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

        .intro {
            width: 80%;
            font-size: 1rem; 
            
             }

        #logo {
            width: 250px;
           
            }
        .avonti {
            font-size: 1.9rem;
            }
           
    }
    @media screen and (max-width: 580px) {

        .intro {
            width: 90%;
            font-size: 1.2rem;  
            top: 70%; 
             }

      #logo {
            width: 200px;
            
             padding: .1rem;
            }

             .speil p{
                text-align: left;
            }
    }

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

        .intro {
            width: 90%;
            font-size: 1.2rem;  
            top: 80%; 
             }
            }