header{
    border: 10px dashed #333333;
    border-radius: 20px;
    margin-bottom: 30px;
}

h1{
    text-align: center;
    color: #333333;
    font-family: "Trebuchet MS", Helvetica, sans-serif;  
    font-size: 60px; 
    transition: all 1s;
    animation: namn 1s;
}


body{
    background-color: #EEEEEE;
    text-align: center;
    background:white;
}
main{
    background:white;
}

p{
    right: 0px;
    bottom: 0px;
    color:gray;
    font-family: "Trebuchet MS", Helvetica, sans-serif;  
    text-align:center;
    font-size: 20px;
    margin: 50px;
}



a{
    text-decoration: none;
    color:gray;
    font-family: "Trebuchet MS", Helvetica, sans-serif;  
    font-size: 20px;
    border: 5px dashed #333333;
    border-radius: 10px;
    padding: 5px;
    animation: links linear 2s;
    
}

.logo{
    animation: logo 3s;
    width: 20%;
   
    
}

a:hover{
    color:#BBBBBB;
}

.box{
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: black;
    right: 870px;
    bottom: 430px;
    animation: underline linear alternate 3s infinite;
}

@keyframes links{
    0%{
        opacity: 0;
        
    }
    
    100%{
        opacity: 1;
    }
}

@keyframes namn{
    0%{
        transform: rotate(0deg);
        color: black;
        
    }
    50%{
        color: blue;
    }
    100%{
        transform: rotate(360deg);
        color: black;
    }
}

@keyframes underline{
    0%{
    right: 870px;
    bottom: 430px;
        background-color: black;
    }

    
    100%{
        right: 1040px;
        bottom: 430px;
        background-color: blue;
    }
}