*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    width: auto;
    background-color: darkcyan;
    color:  white;
    text-align: center;
    margin: 0;
    padding: 10px;
}
header > i{
    font-size: 50px;
}

main{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    grid-template-areas: 
        "web1 web2"
        "webserv slutprov";
}

main > a > div > i{
    padding: 10px;
    font-size: 40px;
    color:black;
}

main > a{
    border: 2px solid darkcyan;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
    padding: 40px;
    text-align: center;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    color: black;
    font-size: 20px;
    
}
main > a:hover{
    opacity: 0.8;
    text-decoration:wavy;
    transform: scale(1.03); /* Slightly increase the size */
    transition: transform 0.5s ease; /* Smooth transition effect */
}

main > .web1{
    background-color: yellow;
}
main > .web2{
    background-color: orange;
}
main > .webbserver{
    background-color: lightcoral;
}
main > .slutprojekt{
    background-color: lightgreen;
}

footer{
    width: auto;
    background-color: darkcyan;
    color:  white;
    text-align: center;
    margin: 0;
    padding: 10px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}