.page
{
    width:40%;
    height: auto;
    margin-left: 30%;
    margin-top:50px;
    float: left;
    border-radius: 6%;
    
}
@font-face {
	font-family: 'Montserrat-Medium';
	src: url('/fonts/montserrat/Montserrat-Medium.ttf');
	src: url('/fonts/montserrat/Montserrat-Medium.ttf') format('ttf'),
	     url('/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Nunito-Regular';
	src: url('/fonts/nunito/Nunito-Regular.ttf');
	src: url('/fonts/nunito/Nunito-Regular.ttf') format('ttf'),
	     url('/fonts/nunito/Nunito-Regular.ttf') format('truetype');
}


@font-face {
	font-family: 'Poppins-Regular';
	src: url('/fonts/poppins/Poppins-Regular.ttf');
	src: url('/fonts/poppins/Poppins-Regular.ttf') format('ttf'),
	     url('/fonts/poppins/Poppins-Regular.ttf') format('truetype');
}


.nunito
{
    font-family: 'Nunito-Regular';
}

.mons
{
    font-family: 'Montserrat-Medium';
}

.itim
{
    font-family: 'Itim', cursive;
}

.bold
{
    font-weight: bold;
}

.popins
{
    font-family: 'Poppins-Regular';
}


.focus
{
    cursor: pointer;
}


/* darkmode */

body
{
    transition: 0.5s;
}

#body
{
    background:#0A1D37;
    transition: 0.5s;
}

#body .light
{
    color:white;
}

#body .card-border
{
    border:10px solid #0A1D37;
}

#body .bg-w
{
    background:#0A1D37;  
    transition: 0.5s;
}

#body .ungu
{
    color:white;
}

#body .border-ungu
{
    border:1px solid white;
}

#body .list
{
    color:white;
}


#body .oyen
{
    color:white;
}

.bg-w
{
    background:white;
}

.bg-w
{
    transition: 0.5s;
}

#body .bg-w
{
    background:#0b1b30;  
    transition: 0.5s;
}


/* end dark mode */


@media (max-width:768px)
{
    .page
    {
        width: 96%;
        margin-left:2%;
        margin-top:5px;
    }
}