body {
    padding: 0;
    margin: 0;
    background-color: rgb(0, 0, 0);
    background-clip: border-box;
    padding-bottom: 60px; /* same as footer height */
}

#bgvideo {
   opacity: 0.5;
   position:fixed;
   z-index: -1;
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.fontroman {
    font-family:  ui-sans-serif, system-ui;
    color: white;
}

.fontbigsize {
    font-size:2.5vw;
}

.logosize{
    max-width: 300px;
    max-height:100px;
    object-fit: contain;
    display: flex;
    justify-content: center;
}

.flexcenterC {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.textcenter{
    text-align: center;
}

.textlight {
    opacity: .8;
    text-shadow: 0px 0px 2px #ffffff;
}

.textshade{
    text-shadow: 0px 0px 3px #ffffff;
}

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

.flexcenterRend{
    flex-direction: row;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    width: 100%;
}

.fontmidsize{
    font-size:25px;
    font-weight:500;
}

.headersize{
    max-width: 100%;
    height: 5vh;
    object-fit: cover;
}

.LRpad{
    padding-left: 6%;
    padding-right: 6%;
}
.LRpadforhead{
    padding-left: 3%;
    padding-right: 3%;
    cursor:pointer;
}
.Lpad{
    padding-left: 6%;
    padding-right: 0;
}
.Rpad{
    padding-left: 0%;
    padding-right: 6%;
}

.bgwhite{
    background-color: rgba(26, 26, 26,255);
}

.button {
    color: white;
    border-radius: 11%;
    font-size: 20px;
    border: 2px white solid;
    border-width:4px;
    display:flex;
    width: 100px;
    height: 30px;
    text-align:center;
    padding: 10px 10px 10px 10px;
    font-family: 'Times New Roman', Times, serif;
    cursor:pointer;
}

.button:hover{
    background-color: white;
    color:black;
}


.spacearound{
    justify-content: space-around;
}

.Tpad{
    padding-top: 2%;
}

.fontsmallsize{
    font-size: 20px;
    font-weight:lighter;
}

.fontVsmallsize{
    font-size: 13px;
    font-weight: lighter;
}
.Bpad{
    padding-bottom: 24px;
}

#eventb{
    margin-right: 30px;
}
#memb{
    margin-left: 30px;
}

#logo{
    width: 2vw;
    height: 4.1vh;
    filter:invert(100%)
}

.headertext:hover{
    text-decoration: underline;
}

.frame{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(28, 0, 112, 0.234);
    margin: 4vw 8vw 4vw 8vw ;
    width: 32vw;
    height: 23vw;
    border-radius: 11%;
    border: 0.5vw rgb(249, 249, 249) solid;
}

.parentframe{
    width: 100%;
    height:100%;
}

.imgfit{
    display: flex;
    width: 31.9vw;
    height: 14vw;
    border-top-left-radius: 11%;
    border-top-right-radius: 11%;
    object-fit:cover;
}

.textsize{
    font-size: 1.6vw;
    margin-top: 0;
}

.Ltext{
    color: rgb(7, 205, 255);
    margin-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: white;
    text-underline-offset: 0.4vw;
    font-size: 1.6vw;
}

.frame:hover{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(11, 63, 118, 0.95);
    margin: 4vw 8vw 4vw 8vw ;
    width: 32vw;
    height: 23vw;
    border-radius: 11%;
    border: 0.5vw rgb(21, 134, 255) solid;
    
}


.frame2{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(112, 0, 0, 0.354);
    margin: 4vw 8vw 4vw 8vw ;
    width: 32vw;
    height: 24vw;
    border-radius: 11%;
    border: 0.5vw rgb(235, 12, 12) solid;
}

.Mtext{
    color: rgb(198, 198, 198);
    margin-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: white;
    text-underline-offset: 0.4vw;
    font-size: 1.8vw;
}

.frame2:hover{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(11, 63, 118, 0.95);
    margin: 4vw 8vw 4vw 8vw ;
    width: 32vw;
    height: 24vw;
    border-radius: 11%;
    border: 0.5vw rgb(0, 4, 255) solid;
    
}

.frame1{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(11, 63, 118, 0.95);
    margin: 4vw 8vw 4vw 8vw ;
    width: 64vw;
    height: 50vw;
    border-radius: 11%;
    border: 0.5vw rgb(255, 255, 255) solid;
}

.imgfit1{
    display: flex;
    width: 64vw;
    height: 42vw;
    border-top-left-radius: 11%;
    border-top-right-radius: 11%;
    object-fit: cover;
}

.frame1:hover{
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
    align-items:center;
    background-color: rgba(255, 45, 45, 0.466);
    margin: 4vw 8vw 4vw 8vw ;
    width: 64vw;
    height: 50vw;
    border-radius: 11%;
    border: 0.5vw rgb(248, 0, 0) solid;
    
}

.version{
    padding: 0;
    margin: 0;
}

.nfsu{
    margin-bottom: 0;
    padding-bottom: 0;
}

.navbar{
    position:fixed;
    background-color: #333;
    overflow: hidden;
    width: 100%;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align:center;
  padding: 0.8vw 1.4vw;
  text-decoration: none;
  font-size: 1.3vw;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}