.flex{
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

header{
    background-color: rgb(0, 0, 0);
    width:100vw;
    height:max(7.5vh,30px);
    margin-top:0;
    margin-left:0;
    padding-left:0;
    padding-top:0;
    display:flex;
    align-items:center;
    justify-content: center;
    position: sticky;
    top:0;
    z-index:9999;
}
body{
    background-color: rgb(222, 255, 222);
    margin-top:0;
    margin-left:0;
    margin-right:0;
}
header a{
    padding-left:20px;
    color:rgb(255, 255, 255);
    font-size:100%;
    text-decoration: none;
}
header a:hover{
    text-decoration: underline;
}
.credit{
    padding:0;
    margin:0;
}
.day{
    text-decoration: underline;
}
.robot-title{
    margin-top:10px;
    width:20vw;
    border-radius: 20px;
    animation: 3s infinite linear color;
}

.logcontainer{
    width:max(60vw,400px)
}
.credit-feature{
    margin-bottom:0px;
}
.board{
    width:10vw;
    margin:10px;
}
.wumpusDesc{
    width:max(60%,400px);
    margin-top: 5px;
    margin-bottom:5px;
    padding:0;
    text-indent:4ch;
}

h1,h2{
      font-family: "WDXL Lubrifont SC", sans-serif;
}
header,body{
     font-family: "Oxanium", sans-serif;
    font-optical-sizing: auto;
}

@keyframes color{
    0%{
        filter: hue-rotate(0);
    }
    25%{
        filter: hue-rotate(90deg);
    }
    50%{
        filter: hue-rotate(180deg);
    }
    75%{
        filter: hue-rotate(270deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}

.algorithm-img{
    border-radius:20px;
    width:clamp(200px,75%,400px)
}
.algDesc{
    font-size:clamp(10px,1.5vw,16px)
}
.turnAlgDesc{
    width:100%
}
.algTurnDiv{
    width:max(33%,200px)
}
.algTurnImg{
    width:50%;
    margin-top:0;
    border:1px solid black;
}
.turnTitle{
    margin-bottom:0;
}

.rowFlex{
        display:flex;
    align-items:center;
    justify-content: center;
    gap:20px;
    width:max(80vw,450px);
}

.moveTestVid{
    margin-top:10px;
    margin-bottom:10px;
    width:max(50%,100px);
    border-radius:10px;
}

.movVidDiv{
    display:flex;
    align-items:center;
    width:75%;
    gap:20px;
}
ul > li > ul > li{
    padding:2px;
}
ul > li{
    padding:3px;
}

header a{
    font-size:15px;
}

.resultsVid{
    width: 30vw;
    border-radius:10px;
}

.resultsDiv{
    --pad:20vw;
    padding-left:var(--pad);
    padding-right:var(--pad);
}

.resultsDesc{
    margin-top: 0px;
    margin-bottom:0px;
    padding:0;
    text-indent:4ch;
}

h2{
margin-bottom:0;
padding-bottom:0;
}