body {
    font-family: 'Public Sans';
    padding: 0;
    margin: 0;
    background-color: #fffefc;
}

a {
    color: inherit;
    text-decoration: none;
}

.logo {
    position: fixed;
    top: 0.75em;
    left: calc(0.75em + 10%);
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
    width: 3em;
    height: 3em;
    z-index: 2;
}

.logo img {
    position: absolute;
}

.eye {
    clip-path: polygon(39% 50%, 54% 58%, 39% 67%, 24% 56%);
    transition: clip-path 0.5s ease;
}

.logo:hover{
    transform:scale(1.1);
}

.logo:hover .eye{
    animation: logoAnimation 3s ease;
}

.taskbar {
    position: fixed;
    display: flex;
    float: right;
    justify-content: flex-end;
    align-items: center;
    background-color: black;
    width: 80%;
    padding: 0 10%;
    color: rgb(244, 244, 244);
    height: 5em;
    z-index: 1;
    box-shadow: black 0px 0px 20px;
}

.taskbar div {
    padding: 0.2em;
    margin-right: 1em;
    cursor: pointer;
    transition: 0.2s;
}

.taskbar div:hover {
    color: rgb(187, 94, 218);
    transition: 0.2s;
}

.taskbar div:active {
    color: rgb(152, 77, 176);
    transition: 0.2s;
}

.selected {
    color: rgb(194, 96, 226);
}

.dummy {
    height: 13em;
}

.background {
    background-color: #1f1f1f;
    box-shadow: black 0px 0px 50px;
    position: fixed;
    z-index: -1;
    height: 100vh;
    width: 70vw;
    left: 15vw;
}

.title {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 3vw;
    top: 15vh;
    color: rgb(244, 244, 244);
    font-family: 'arial black', sans-serif;
    font-weight: 300;
}

.index_section {
    margin-top: 20vh;
    margin-bottom: 20vh;
    margin-left: 20vw;
    width: 60vw;
    color: rgb(244, 244, 244);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
}

.index_section img {
    width: 23vw;
    box-shadow: black 0px 0px 20px;
}

.section_container {
    width: 30vw;
    text-align: center;
}

.section_title {
    font-size: 1.8vw;
    font-family: 'arial black', sans-serif;
    font-weight: 300;
}

.section_container span {
    color: rgb(140, 0, 255);
}

.section_content {
    font-weight: 600;
    margin-left: 2vw;
    width: 28vw;
    line-height: 3.5vh;
}

@keyframes logoAnimation{
    0% {
        transform: translateX(0);
    }
    26% {
        transform: translateX(3px);
    }
    53% {
        transform: translateX(-3px);
    }
    80% {
        transform: translateX(0px);
        clip-path: polygon(39% 50%, 54% 58%, 39% 67%, 24% 56%);
    }
    90% {
        clip-path: polygon(39% 67%, 54% 58%, 39% 67%, 24% 56%);
    }
    100% {
        clip-path: polygon(39% 50%, 54% 58%, 39% 67%, 24% 56%);
    }
}