html {
    box-sizing: border-box;
}

body { 
    padding-top: 0px; 
    position: relative;
    max-width: 100vw;
    margin: 0px;
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    background-color: #171520;
    color: white;
}
*, *:before, *:after {
    box-sizing: border-box;
}
/* .left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; } */

/* CALLOUT */
/* .bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f } */

/* MENU */
.prime-menulogo{
    width: 60px;
    height: auto;
}
.prime-wordlogo{
    width: 350px;
    height: auto;
}
.bigprime-wordlogo{
    width: 80vw;
    height: auto;
}

.home-menu{
    /* width: 100vw; */
    width: 100%;
    /* height: 100vh; */
    position: absolute;
    top: 100px;
    /* padding-top: 5vh; */
}
.menu-container{
    display: flex;
    justify-content: space-between;
    /* justify-content: flex-end; */
    padding-right: 5vw;
    padding-left: 5vw;
}
.homemenu-list{
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
.homemenu-listitem{
    position: relative;
    text-align: right;
    padding-top: 7px;
    padding-bottom: 7px;
}
.active-listitem{
    position: absolute;
    height: 10px;
    bottom: 2px;
    right: 0px;
    width: 90px;
    background-color: red;
    z-index: 5;
}
.homemenu-listlink{
    position: relative;
    color: white;
    text-decoration: none;
    z-index: 10;
}
.hmenu-listitem .homemenu-listlink:hover{
    text-decoration: underline solid red 2px;
    color: white;
}
.hmenu-listitem.active .homemenu-listlink:hover{
    text-decoration: none;
}

.hmenu-droplink.active{
    color: red;
}
.hmenu-droplink.active:hover{
    color: red;
    text-decoration: none;
}

.z-1{
    z-index: 10;
}

.hmenu-dropdown{
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    /* margin-top: 10px; */
    border-left: 3px solid red;
    display: none;
}
.dropmenu{
    display: flex;
    flex-direction: column;
}
.hmenu-droplink{
    text-decoration: none;
    padding: 10px 25px;
    color: white;
    text-wrap: nowrap;
}
.hmenu-listitem:hover .hmenu-dropdown, .hmenu-dropdown:hover{
    display: block;
}
/* .show-dropdown{
    visibility: visible;
} */
.listitem-space{
    margin: 20px 0px;
}

.hmenu-droplink:hover{
    text-decoration: underline red 2px;
    color: white;
}

/* HOMEPAGE HORIZONTAL MENU */
.horizontal-menu{
    /* position: absolute; */
    background-color: transparent;
    position: fixed;
    width: 100vw;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 9;
}
.scroll-hormenu{
    background-color: rgba(0,0,0,1);
    z-index: 35;
}
.hmenu-container{
    display: flex;
    padding-right: 5vw;
    padding-left: 5vw;
    justify-content: space-between;
}
.hmenu-list{
    list-style-type: none;
    display: flex;
    align-items: center;
    margin: 0px;
}
.hmenu-listitem{
    position: relative;
    padding-right: 50px;
}
.active-hlistitem{
    position: absolute;
    height: 5px;
    bottom: 10px;
    left: -5px;
    width: 50px;
    background-color: red;
    z-index: 5;
}

.wave-container{
    position: relative;
    height: 0px; 
    width:100%;
}
.wave {
    position: absolute;
    top: -200px;
    width: 100vw;
    height: 400px;
    background-color: rgba(203,17,4,0.8);
    /* --mask:
      radial-gradient(190.07px at 50% 255.00px,#000 99%,#0000 101%) calc(50% - 170px) 0/340px 51% repeat-x,
      radial-gradient(190.07px at 50% -170px,#0000 99%,#000 101%) 50% 85px/340px calc(51% - 85px) repeat-x,
      radial-gradient(190.07px at 50% calc(100% - 255.00px),#000 99%,#0000 101%) 50% 100%/340px 51% repeat-x,
      radial-gradient(190.07px at 50% calc(100% + 170.00px),#0000 99%,#000 101%) calc(50% - 170px) calc(100% - 85px)/340px calc(51% - 85px) repeat-x; */
    /* --mask:
    radial-gradient(190.07px at 50% 255.00px,#000 99%,#0000 101%) calc(50% - 170px) 0/340px 51% repeat-x,
    radial-gradient(190.07px at 50% -170px,#0000 99%,#000 101%) 50% 85px/340px calc(51% - 85px) repeat-x,
    radial-gradient(190.07px at 55% calc(100% - 255.00px),#000 99%,#0000 101%) 55% 100%/340px 56% repeat-x,
    radial-gradient(190.07px at 55% calc(100% + 170.00px),#0000 99%,#000 101%) calc(55% - 170px) calc(100% - 85px)/340px calc(56% - 85px) repeat-x; */
    --mask:
    radial-gradient(335.41px at 50% 450.00px,#000 99%,#0000 101%) calc(50% - 300px) 0/600px 51% repeat-x,
    radial-gradient(335.41px at 50% -300px,#0000 99%,#000 101%) 50% 150px/600px calc(51% - 150px) repeat-x,
    radial-gradient(335.41px at 55% calc(100% - 450.00px),#000 99%,#0000 101%) 55% 100%/600px 51% repeat-x,
    radial-gradient(335.41px at 55% calc(100% + 300.00px),#0000 99%,#000 101%) calc(55% - 300px) calc(100% - 150px)/600px calc(51% - 150px) repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
}


.seevideo-bg{
    background-color: rgba(0,0,0,0.5);
    width: 100vw;
    /* height: 100vh; */
    padding: 50px 5vw;
}
.linked-sect{
    padding-top: 100px;
}
.solid-bg{
    background-color: #1B1B1B;
    width: 100vw;
    padding: 50px 5vw;
}

.solid-bg2{
    background-color: #FFFFFF;
    width: 100vw;
    padding: 50px 5vw;
}

.mapbg{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/dottedline.png");
    background-size: 70%;
    background-position: 20% 100px;
    background-repeat: no-repeat;
}
.red-bg{
    background-color: rgba(203,17,4,0.8);
    align-self: center;
}

.type1, .type2{
    white-space: nowrap;
    overflow: hidden;
    /* border-right: 3px solid; */
    font-family: monospace;
    /* font-size: 2em; */
    font-size: 3vw;

}
.type2{
    border-right: 3px solid;
    border-color: transparent;
}

.typing1 {
    width: 39ch;
    animation: typing 2s steps(39), blinky .5s step-end 5 alternate;
    border-right: 3px solid;
    border-color: transparent;
    /* white-space: nowrap;
    overflow: hidden;
    font-family: monospace;
    font-size: 2em; */
}
@keyframes blinky {
50% {
    border-color: white
}
}
.typing2 {
width: 0ch;
animation: typing2 2s steps(27) 1 normal, blink .5s step-end infinite alternate;
animation-delay: 2s;
animation-fill-mode: forwards;
/* white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em; */
}


@keyframes typing {
from {
    width: 0
}
}
@keyframes typing2 {
0%{
    width: 0
}
100% {
    width: 27ch
}
}
    
@keyframes blink {
50% {
    border-color: white
}
}
.quote{
    text-align: center;
    display: grid;
    place-items: center;
}
.quote-container{
    padding: 100px 5vw;
    box-sizing: border-box;
}
.quote-line{
    font-weight: 300;
    /* font-size: 2.8em; */
    font-size: 3vw;
    padding: 0px;
    padding-bottom: 5px;
    margin: 5px;
}
.quote-ul{
    /* padding: 5px; */
    text-decoration: underline red;
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
    text-decoration-skip-ink: none;
}
  

.dotted-sect{
    width: 100%;
}
.prime-diagram{
    display: flex;
    justify-content: center;
    position: relative;
}
.image-fit{
    width: 70%;
    padding: 50px 0px;
}
.logo-fit{
    width: 50%;
}
.logo-diagram{
    margin-top: 20%;
    margin-bottom: 20%;
}
.logo-aim h3{
    margin-bottom: 0px;
}

.aimone{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: rgba(105,8,8,0.8);
    padding: 20px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    right: 0%;
    top: -20%;
}
.aimtwo{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: rgba(105,8,8,0.8);
    padding: 20px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    right: 0%;
    bottom: -20%;
}
.aimthree{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: rgba(105,8,8,0.8);
    padding: 20px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: 0%;
    top: -20%;
}
.aimfour{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: rgba(105,8,8,0.8);
    padding: 20px 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: 0%;
    bottom: -20%;
}
.whitelink{
    color: white;
}

.bg-video{
    position: absolute;
    z-index: -10;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    /* background: url("https://video.igem.org/w/2b4dE3Exp8Z7RnxCMfnegT?loop=1&autoplay=1&muted=1") no-repeat;
    background-size: cover; */
    overflow: hidden;
}
.iframe-video{
    position: relative;
    padding-top: 56.25%;
    /* min-height: 100%; */
    /* min-width: 100%; */
}
.bg-videoiframe{
    position: absolute;
    inset: 0px;
    height: 100vh;
    min-width: 150vw;
    left: -25%;
}
@media only screen and (max-width: 1000px) {
    .bg-videoiframe{
        /* position: absolute;
        inset: 0px;
        height: 100vh; */
        min-width: 200vw;
        left: -50%;
    }
}
@media only screen and (max-width: 800px) {
    .bg-videoiframe{
        min-width: 250vw;
        left: -75%;
    }
}

.fixed-video{
    position: fixed;
}


.hero-banner{
    background-color: rgba(0,0,0,0.5);
    width: 100vw;
    height: 100vh;
    padding: 5vw;
    box-sizing: border-box;
    overflow: hidden;
}
.hero-content{
    position: relative;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10vh;
}
.left-title{
    width: 50%;
    /* text-align: left;
    align-items: left; */
}
.left-title h1, .left-title h2{
    width: 100%;
}
.sect-title{
    /* padding: 50px 5vw; */
    text-align: center;
    padding-bottom: 20px;
}

.collab-col{
    padding: 0px 5vw;
}
.hero-title{
    /* font-size: 3.5em; */
    font-size: 9vw;
    font-weight: 500;
    margin: 10px 0px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.hero-sectitle{
    /* font-size: 3.5em; */
    font-size: 9vw;
    font-weight: 500;
    margin: 10px 0px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.hero-subtitle{
    font-size: 4vw;
    font-weight: 500;
    margin: 0px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.hero-body{
    color: white;
}

.flexbox{
    display: flex;
    /* padding: 50px 5vw; */
    box-sizing: border-box;
}
.flex-center{
    justify-content: center;
    text-align: center;
}
.cir-column{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2vw;
}
.circ-bg{
    background-color: rgba(139,0,0,0.7);
    padding: 5vw;
    border-radius: 200px;
}
.sym{
    font-size: 10vw;
}
h1{
    /* font-size: 2.5em; */
    font-size: 3vw;
    margin-bottom: 0px;
    margin-top: 0px;
}
h2{
    font-size: 2.5vw;
}
h3{
    /* font-size: 1.8em; */
    font-size: 2.2vw;
}
.h3-desc{
    font-weight: 500;
}

p{
    /* font-size: 1.2em; */
    font-size: 1.5vw;
}
.labelone{
    position: absolute;
    right: 15%;
}
.labeltwo{
    position: absolute;
    bottom: 50%;
    left: 0%;
}
.labelthree{
    position: absolute;
    bottom: 30%;
    right: 0%;
}



.und-title{
    position: relative;
}
.und-title .lining{
    position: absolute;
    background-color: red;
    width: 80%;
    height: 5px;
    right: 5%;
}

.undl-title{
    text-decoration: underline solid red 5px;
    padding-bottom: 10px;
}

.sect-col{
    display: flex;
    flex-direction: column;
    /* align-self: flex-end; */
    width: 50%;
    padding: 50px 2vw;
    /* padding-right: 2vw; */
}
.right-align{
    text-align: right;
}

.limitations{
    display: flex;
    align-items: center;
    /* width: 33%; */
}
/* .limitations img{
    width: 10%;
} */

.icon-hex{
    align-self: center;
    width: 50px;
    margin-right: 20px;
}
.sect-height{
    /* height: 100vh; */
    position: relative;
}
.sect-leftalign{
    width: 80%;
}

.btm-content{
    height: 100%;
    align-items: flex-end;
}
.center-content{
    /* height: 100%; */
    align-items: center;
    /* justify-content: space-evenly; */
}
.btm-contentright{
    height: 100%;
    align-items: flex-end;
    /* justify-content: flex-end; */
    text-align: right;
}

#prime-col{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/dnastatic.png");
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.km-card{
    background-color: #1b1b1b;
    border: 2px solid red ;
    border-radius: 20px;
    margin: 1vw;
    padding: 1vw 1.5vw;
    /* height: 300px; */
    height: 50vh;
    width: 20vw;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.km-card h3{
    position: relative;
    z-index: 20;
}
.km-card:hover .link-cards{
    text-decoration: underline solid red;
}
.pic-overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top:0px;
    left:0px;
}
#proj-card{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/human-practice.jpg");
}
#nb-card{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/notebook.jpg");
}
#hp-card{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/project.jpg");
}
#team-card{
    background-image: url("https://static.igem.wiki/teams/4830/wiki/member-s-photo/menu-teams.jpg");
}

.gridbox{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 50px 5vw;
}

.reveal-hover{
    position: absolute;
    /* bottom:-300px; */
    top: 50vh;
    padding-right: 1.5vw;
    transition: top 1s ease-out 0s;
}
.km-card:hover .reveal-hover{
    /* bottom: default; */
    top: 100px;
}

.rreveal-hover{
    position: absolute;
    /* bottom:-300px; */
    bottom: -200px;
    padding-right: 1.5vw;
    transition: bottom 1s ease-out 0s;
}
.km-card:hover .rreveal-hover{
    /* bottom: default; */
    bottom: 10px;
}

.km-card:hover .pic-overlay{
    background-color: rgba(0,0,0,0.5);
}

/*HP css*/

.biospace-logo{
    width: 30vw;
}
.igemteam-logo{
    width: 10vw;
}

.tabs{
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid red;
    color: red;
    font-weight: 600;
    cursor: pointer;
}
.tabs.active{
    background-color: red;
    color: white;
}

.team-photocont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25vw;
    overflow: hidden;
    position: relative;
    object-fit: cover;
}
.team-row{
    justify-content: space-between;
    padding: 20px 0px;
}
.team-card{
    background-color: #1B1B1B;
    width: 31%;
    border-radius: 20px;
    overflow: hidden;
}
.empty-card{
    width: 31%;
}
.leader, .advisor, .pi{
    border: 2px solid red;
}
.team-photo{
    width: 100%;
    opacity: 0.5;
}
.hor-photo{
    height:100%;
    width:auto;
}
.team-photocont:hover .team-photo{
    opacity: 1;
}
.team-content{
    padding: 10px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.team-content h2, .team-content h4{
    margin: 5px 0px;
}
.team-content h4{
    font-weight: 500;
    font-size: 1.4vw;
}
.team-desc{
    padding: 10px;
    padding-bottom: 20px;
}
.team-desc h3{
    margin: 0px;
    margin-top: 20px;
    font-size: 1.5vw;
} 
.team-desc p{
    margin: 0px;
    font-size: 1.2vw;
}
.team-lead{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    color: white;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
}
.team-lead h4{
    margin: 0px;
    font-weight: 500;
}

.cards-container{
    display: none;
}
.cards-container.active{
    display: block;
}
.in-red{
    color: red;
}

.pdf-download{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.pdf-download a{
    background-color: transparent;
    border: 5px solid red;
    border-radius: 40px;
    padding: 20px 40px;
    font-size: 2vw;
    text-decoration: none;
    color: white;
}
.pdf-download a:hover{
    background-color: red;
}
.embed-doc{
    width: 100%;
    height: 80vh;
    padding-bottom: 20px;
}


.image-gallery{
    position: relative;
    height: 500px;
    overflow: hidden;
}

.gallery-container{
    height: 500px;
    width: 50vw;
    display: flex;
    position: absolute;
    left: -25vw;
}

.image-gallery .src-image{
    height: 500px;
    /* width: 50%; */
}
.images{
    position: relative;
}
.image-capt{
    position: absolute;
    bottom: 0px;
    padding: 0px 10px;
}
.gallery-img{
    position: relative;
    display: flex;
    justify-content: center;
    width: 50vw;
}
.carousel-sect{
    padding: 0vw 10vw;
}
.carousel-item{
    height: 80vh;
}
.carousel-item img{
    height: 100%;
    /* object-fit: ct; */
}
.carou-center{
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
}

.inpage-container{
    position: fixed;
    top: 0px;
    padding: 5vw;
    padding-top: 100px;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}
.inpage-hamburger{
    padding: 5px;
    background-color: #000;
    border: 5px solid red;
    align-self: flex-start;
    cursor: pointer;
    margin-left: 5px;
}

.inpage-nav{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #000;
    border: 5px solid red;
    visibility: hidden;
}
.unhide{
    visibility: visible;
}
.inpage-links{
    color: white;
    text-decoration: none;
    padding: 10px 0px;
}
.inpage-links.active{
    color: red;
}

.ordered{
    text-align: left;
    width: 80%;
    align-self: center;
    font-size: 1.5vw;
}
.ordered li::marker{
    color: red;
    font-weight: 600;
}

.figures-sect{
    text-align: center;
}

.border-title{
    border: 3px solid red;
    padding: 20px;
}
.fig6-table{
    padding-top: 1.1vw;
}
.fig10-diagram{
    height: 63%;
    padding-bottom: 1.1vw;
}
#b-basic, #b-collect, #b-edu,
#altrt, #pe-stemcell, #pe-yeast-bact{
    padding-top: 100px;
}
.ref{
    text-align: justify;
    font-size: 1vw;
}
/* .gallery-img.active{
    left: -25%;
} */
/* .gallery-left{
    position: absolute;
    left:-80%;
}
.gallery-right{
    position: absolute;
    right:-80%;
} */

/*
.gallery-center{
    height: 100%;
}
.gallery-left{
    
}
.gallery-right{
    
} */
/* .cont{
    padding-left: 5vw;
    padding-right: 5vw;
    margin-top: 0px;
    margin-bottom: 0px;
} */

/* footer */
/* footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; } */
.page-footer{
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
}
.footerbg-image{
    position: relative;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: -10;
}

.footer-content{
    position: absolute;
    padding-bottom: 10px;
    bottom: 0px;
}
.footer-ntu{
    display: flex;
    flex-direction: column;
    width: 30%;
}
.ntu-logo{
    width:70%;
    padding-bottom:10px ;
}
.footer-primelogo{
    display: flex;
    width: 40%;
    flex-direction: column;
    /* display: flex;
    width: 40%;
    align-items: center;
    height: 100%;
    align-self: center; */
}
.footer-primelogo p{
    margin: 0px;
    padding: 10px 0px;
    text-align: center;
}
.footer-teamlogos{
    display: flex;
    align-items: center;
}
.footer-sponslogo{
    display: flex;
    justify-content: space-between;
    padding: 0px;
}
.spons-logo{
    height: 50px;
}
.square-logo{
    height: 5vw;
    padding-right: 10px;
}
.word-logo{
    height: 4vw;
}
.footer-links{
    display: flex;
    width: 30%;
    justify-content: flex-end;
}
.footerlink{
    color: white;
    text-decoration: none;
    font-size: 1.2vw;
}
.footerlink:hover{
    color: red;
}
.footer-col{
    padding: 20px 5vw;
    align-items: flex-start;
}
.footer-menu{
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: flex-end;
    border-right: red solid 2px;
    padding-right: 5px;
}
.social-icons{
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-evenly;
    padding-left:10px;
}
.social-icons a{
    color: white;
    text-decoration: none;
    padding-top: 5px;
    font-size: 1.8vw;
}
.footer-copyright{
    text-align: center;
    padding: 0px;
}
.footer-copyright p{
    padding: 2px 0px;
    margin: 0px;
    font-size: 1vw;
}
.footer-copyright a{
    color: white;
}
.more-footer{
    margin-top: -10px;
    height: 100px;
    background-color: #6d0000;
}
/* .more-footercolour{
    height: 150px;
    background-color: #6d0000;
} */

h5{
    margin: 2px 0px;
    font-size: 1.2vw;
}
.footer-menutitle{
    position: relative;
}

.redrect{
    position: absolute;
    width: 40px;
    height: 6px;
    background-color: red;
    right: -5px;
}

.solid-black-bg{
    background-color: #000;
}
.solid-gray-bg{
    background-color: #1B1B1B;
}
.solid-white-bg{
    background-color: #ffffff;
}
.box-feels{
    padding: 50px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 30px 0px;
  }
  .central{
    display: flex;
    flex-direction: column;
  }

  /* table, th, td {
    border: 1px solid white;
  }
} */
/* .column {
    float: left;
    width: 50%;
    padding: 5px;
  }

.row::after {
    content: "";
    clear: both;
    display: table;
  } */