@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

body{
    margin:0;
    background-color: white;
}

#header{
    height: 10vh;
    display: flex;
    align-items: center;
}

#links{
    flex-grow: 1;
}

#logo{
    height: 12vh;
    width: 12vh;
    margin-right: 2em;
}

#main{
    height: auto;
    min-height: 80vh;
    background-color: #e6e7ee;
    display: flex;
    justify-content: space-evenly;
}

#footer{
    height: 10vh;
    display: flex;
    align-items: center;
}
.inputText{
    text-indent: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 1.2em;
}

#newTopic{
    margin: 8px;
    height: 60px;
    border: 1px solid #e6e7ee;
    border-radius: 8px;
}


#newTopicTime{
    width: 15%;
    text-align:right;
}

#topicList{
    border: 1px solid #e6e7ee;
    border-radius: 8px;
    min-height: 85%;
    margin: 8px;
}

.topic{
    display: flex;
    align-items: center;
    margin: 8px;
    justify-content: space-between;
}


.topicName{
    width: 60%;
    text-align:left;
}

.spacer{
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 3px;
    border-radius: 1.5px;
    background-color: #c2c2c8;
}


.neumorphism{
    box-shadow: 9px 9px 15px #c2c2c8, -9px -9px 15px #f0f1f2;
    background: #e6e7ee;
}

.neumorphismIn{
    background: #e6e7ee;
    box-shadow: -5px -5px 14px 0px #c2c2c8, 5px 5px 14px 0px #c2c2c8;
}

.neumorphismInput{
    background: #e6e7ee;
    box-shadow: inset 7px 7px 14px #c2c2c8, inset -7px -7px 14px #f0f1f2;
    border-radius: 8px;
    border: 1px solid #e6e7ee;
}

.roundBtn{
    margin-left: 10px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    /* border: 1px solid rgb(199, 199, 199); */
    border: 1px solid #e6e7ee;
    display:flex;
    justify-content: center;
    align-items: center;
    box-shadow: 9px 9px 15px #c2c2c8, -9px -9px 15px #f0f1f2;
    background: linear-gradient(145deg, #C4C4CA, #e6e7ee);
}

.roundBtn:hover{
    border-color: rgb(220, 220, 220);
}

.bigIcon{
    text-align: center;
    font-size: 2rem;
    color: rgb(126, 126, 126);
}
.bigIcon:hover{
    color: #48beff;
}

.midIcon{
    text-align: center;
    font-size: 1.5rem;
    color: rgb(126, 126, 126);
}

.midIcon:hover{
    color: #48beff;
}

#ctrlBtnGroup{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}


.space-evenly{
    display: flex;
    justify-content: space-evenly;
}


.space{
    width: 20px;
}

.center{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#clock{
    display: flex;
    width: 350px;
    height: 350px;
    margin: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /**border: 1px solid #d1d9e6;**/
}

.wrapper{
	width: 95%;
	height: 95%;
	/*border: 1px solid #ccc;*/
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}
.sector{
	position: absolute;
	transform-origin: 100% 100%;
	background-color: #bfbfbf;
	width: 500px;
	height: 500px;
	left: 50%;
	top: 50%;
	margin-top: -500px;
	margin-left: -500px;
	z-index: 10;
}

#clock_face{
	position: relative;
	margin: auto;
	top: 7.5%;
	background-color:  #e6e7ee;
	width: 85%;
	height: 85%;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

#timeLeft{
	font-family: 'Lato', sans-serif;
	font-size: 5em;
	line-height: 100%;
	text-align: center;
	vertical-align: middle;
	z-index: 101;
}

h1{
    margin: 5px;
    text-align: center;
	font-family: 'Lato', sans-serif;
	font-size: 4em;
}