/* SETUP */
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@400;700&display=swap');
body{
    margin: 0;
    background-image: url(bg.png);
    background-size: cover;
    overflow-y: hidden;
    font-family: 'Hind Madurai', sans-serif;
}
.container{
    text-align: center;
    height: 100vh;
    width: 100vw;
}
.kort svg{
    height: 100vh;
    width: auto;
    max-height: 100vh;
}


/* NAVBAR */
.navbar{
    top: 10px;
    left: 10px;
    z-index: 1;
    position: fixed;
    width: 100vw;
    display: inline-block;
}
.navbar svg{
    height: 100px;
}
/* RESET */
@keyframes resetRotate{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(-75deg);
    }
}
#Reset{
	height: 50px;
    width: 50px;
    display: inline-block;
}
#Reset:hover{
    animation: resetRotate .2s linear forwards;
    cursor: pointer;
}
/* BACK */
@keyframes back{
    0%{transform: translateX(0px);}
    25%{transform: translateX(-5px);}
    50%{transform: translateX(0px);}
    75%{transform: translateX(5px);}
    100%{transform: translateX(0px);}
}
#Back{
    stroke: white;
    stroke-width: 10;
    stroke-linecap: round;
    position: fixed;
}
#Back rect{
    fill: transparent;
    stroke-width: 0;
}
#Back:hover{
    animation: back 1s infinite linear;
    cursor: pointer;
}
/* FULLSCREEN */
@keyframes fullScreen{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.2);
    }
}
#FullScreen:hover{
    cursor: pointer;
    animation: fullScreen .1s forwards ease-out;
}


/* PUNKTER */
@keyframes rotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg); 
    }
}
.punkt{
    r: 84;
    fill:transparent;
    stroke:#D32020;
    stroke-width:15;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:40.99,35.99;
    animation: rotate 10s infinite linear;
    transition: r ease-in-out .5s;
}
.punkt:hover{
    r: 100;
    cursor: pointer;
    animation: rotate 3s infinite linear;
}
.seen{
    stroke:#686868;
    animation: rotate 30s infinite linear;
    transition: r ease-in-out .5s;
}
.punktxt{
    fill:#D32020;
    font-family: 'Hind Madurai', sans-serif;
    font-weight: bold;
    font-size: 80px;
    opacity: 0;
    transition: opacity 1s ease;
}
.punktxtHover{
    opacity: 1;
    transition: opacity 1s ease;
    cursor: pointer;
}
.seentxt{
    fill:#686868;
}