html{
    
    
}

main{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
/*    border:solid 1px white;*/
    
    width:70em;
}

left{
    width:100%;
    margin: auto;
    margin-top:1em
    
}

main h1{
    padding: 1em 0;
    margin: auto;
    text-align: center;
    width: 100%;
    color:white;
}

main left div{
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    padding-bottom: 13em;*/
    width:80%;
    margin: auto;
    
    

}

main left h3{
    padding: .2em;
    color:white;
    font-size: 1.8em
}

div a{
    padding: 1em;
    background:rgb(255, 255, 255);
    font-weight: 600;
     text-decoration-style: solid;
    color:rgb(0, 0, 0);
    border:solid black 1px;
    margin:.1em;
    box-shadow: black 2px 2px 1px;
    transition: .1s;
    font-size: 1.4em
    
        
    
}
div a:hover{
/*    text-decoration-line: underline;*/
    transform: translate(2px, 2px);
    box-shadow: black 0px 0px 1px;
    font-size: 
}

@media screen and (max-width: 800px) {
    main{
        width:100%;
        text-align: center;
        
    }
    
}