html {
    box-sizing: border-box;
}
header {
    border: 2px solid grey;
    border-radius: 20px;
    
}
.navbar-container {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-shrink: 1;
}
ul {
    display:flex;
    list-style-type: none;
    width: 60%;
    gap: 5%;
    flex-wrap: nowrap;
    overflow-x: auto;
}
a {
    justify-content: space-between;
    width: 20%;
    flex-wrap: wrap;
    min-width: 60px;
    text-decoration: none;
    color: black;
    flex-grow: 1;
}
li {
    justify-content: space-between;
    width: 20%;
    flex-wrap: wrap;
    min-width: 60px;
    overflow: auto;
    border-radius: 20px;
}
.currentpage {
    border: 2px solid grey;
    border-radius: 20px;
    text-align: center;
}
.logo {
    margin-right: auto;
    min-width: 128.25px;
    flex-wrap: nowrap;
    margin-top: auto;
    margin-bottom: auto;
}
.otherpage {
    border-radius: 20px;
}
a.otherpage:hover {
    background-color: black;
    color: white;
}
main {
    display: grid;
}
.vidgrids {
    display: grid;
    border-radius: 20px;
    background-color: grey;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding-top: 15px;
}
.thumbnail {
    width: 100%;
    border-radius: 20px;
}
.vidspace {
    margin: 5%;
    background-color: white;
    border-radius: 20px;
}
.vidspace:hover {
    background-color: black;
    color: white;
}
.ytvid {
    display: flex;
    justify-content: center;
    flex-shrink: 1;
}