html {
    height:100vh;
    width:100vw;
    margin:0, 0, 0, 0;
    padding:0, 0, 0, 0;
}

body {
    background-color: black;
    height:100%;
    width:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    font-family:'Amiko', sans-serif;
}

.header {
    width:100%;
    height:10%;
    display:flex;
    justify-content: center;
    align-items:center;
    margin-top:1%;
    margin-bottom:1%;
}

.header-links {
    text-decoration:none;
    color:white;
    margin:1%;
    letter-spacing:0.1em;
    font-weight:600;
}

#logo {
    background-color: black;
    display:flex;
    align-items:center;
    justify-content:center;
    height:25%;
    border-radius: 15px;
    border: 3px solid white;
    padding:0.3em;
    margin-right:15%;
    font-size:2em;
    font-weight:600;
    letter-spacing:0.1em;
    color:white;
    text-decoration:none;
}

#contact {
    display:flex;
    align-items:center;
    justify-content:center;
    height:30%;
    padding:0.5% 1% 0.5% 1%;
    border-radius: 15px;
    border-color: 2px solid black;
    color:black;
    background-color:white;
}

.main {
    width:50%;
    margin-left:25vw;
    display:grid;
    grid-template-columns: 50% 50%;
}

.card {
    border: 3px solid white;
}

@keyframes dim-other {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.5;
    }
}

@keyframes enlarge-subject {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

.hover-object{
    animation: enlarge-subject 0.3s forwards;
}

.other-object{
    animation: dim-other 0.3s forwards;
}