@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro&display=swap');

*{
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-size: 14px;
    border: 0;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

button{
    font-weight: bold;
}

input{
    background-color: white;
    width: 80%;
    margin: auto;
    padding: 10px;
    box-shadow: 0px 5px 10px rgb(198, 198, 198);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

select{
    background-color: white;
    width: 85%;
    margin: auto;
    padding: 10px;
    box-shadow: 0px 5px 10px rgb(198, 198, 198);
}

html{
    width: 100%;
    height: 100%;
}

body{
    background: url("images/background.png") no-repeat center center fixed;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Kantumruy Pro', sans-serif;
}

.top-section{
    width:100%;
    height:10%;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
    box-shadow: 2px 2px 10px rgb(158, 158, 158);
}

.logo{
    float: left;
    height: 100%;
    margin-left: 20px;
}

.logo img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
}

.light-mode{
    float: right;
    width: 70px;
    height: 100%;
    margin-right: 10px;
}

.light-mode button{
    height: 100%;
    display: block;
    margin: auto;
}

.light-mode button img{
    height: 30px;
}

.main-section{
    width:100%;
    height:80%;
}

.left{
    position: relative;
    top: 50%;
    left: 90px;
    transform: translate(0, -60%);
    width: 40%;
    padding:10px;
}

.left h1{
    font-size: 50px;
    width: 560px;
    margin-bottom: 10px;
    text-shadow: 1px 2px 4px rgb(255, 255, 255);
}

.left p{
    font-size: 20px;
    margin-bottom: 30px;
}

.left ul{
    margin-top: 10px;
    margin-left: 30px;
}

.right{
    position: absolute;
    top: 53%;
    right: 90px;
    transform: translate(0, -50%);
    width: 400px;
    height: 75%;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 15px;
}

.signup-form{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.signup-form p{
    float: left;
    margin: 10px;
    margin-left:30px;
    font-weight: bold;
}

.signup-form button{
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(132, 132, 132);
    color: white;
    margin: 30px;
}

.name{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.password{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.date{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.country{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.phone_number{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bottom-nav{
    width:100%;
    height:10%;
}

.more-info{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width : 15%;
}

.more-info p{
    text-align: center;
    margin-bottom: 10px;
}

.more-info button{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.more-info button img{
    width: 15px;
}