/* ========== Timer Page ========== */
.timerPage {
    width: auto;
    height: auto;
}
    


/* ============ Home-Uni-Cala-Sett ============ */ 
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;



    position: relative;
}

.left, .center, .right {

    display: flex;
    align-items: center;
}

.center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.icon {
    margin: 5px 10px;

    width: fit-content;
    cursor: pointer;
}

.univ {
    margin-top: 30px;

    width: 80px;
    border: 2px solid #808080;
    border-radius: 20%;

    
}

/* Message link */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(0,0,0,0.85);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;

    opacity: 0;
    transition: 0.3s;

    z-index: 999999; 
}

.toast.show {
    opacity: 1;
}






/* ============ Circle ============ */
.centercircle {
    display: flex;
    justify-content: center;
    align-items: center;

}

.container {
    margin-top: 50px;
    
    
    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    background-color: #ffffff;

    position: relative;
}

.outer {
    width: var(--size);
    height: var(--size);

    display: flex;
    justify-content: center;
    align-items: center;

    /*border: 1px solid white;*/
    border-radius: 50%;

    box-shadow: 
        0px 0px 50px 30px #ffffff,
        inset 5px 5px 10px 5px rgba(0, 0, 0, 0.3),
        inset -5px -5px 10px 5px rgba(0,0,0,0.3);

}

.inner {
    width: 85%;
    height: 85%;
    

    /*border: 1px solid white;*/
    border-radius: 50%;

    box-shadow: 
        5px 5px 10px 5px rgb(0,0,0,0.2),
        -5px -5px 10px 5px rgba(0,0,0,0.2);
    
}

.timer {
    width: 100%;
    height: 100%;


    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    border-radius: 50%;

    background-color: var(--primary);

    box-shadow: inset 0px 0px 50px 30px #ffffff;
}

circle {
    fill: none;

    transform: rotate(-90deg);
    transform-origin: 50% 50%;

    stroke: var(--scondary); 
    stroke-width: 7.3%;
    stroke-linecap: round;

}

svg {
    
    width: 100%;
    height: 100%;


    position: absolute;
    top: 0;
    left: 0;
}






/* ============ Time + InfoLecture ============ */ 
#time {
    width: fit-content;
    height: fit-content;

    text-align: center;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;

    font-size: 70px;
    /*background-color: red;*/

}

#otherInfo {
    width: 70%;
    height: fit-content;

    text-align: center;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;

    font-size: 30px;
}

.sticker {
    height: 100%;
    width: 100%;

    border-radius: 0px 80px 20px 20px;
}

.sticker-small {
    height: 100%;
    width: 70%;

    border-radius: 0px 0px 20px 20px;
}

#infoLecture {
    width: 70%;
    height: fit-content;

    text-align: center;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;

    font-size: 25px;

    /*background-color: green;*/
}





/* ============ NextLecture ============ */ 
.centerNext {

    height: 120px;
    
    margin: 20px 30px 0px 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    overflow: auto;

    border: 4px solid #ffffff;
    border-radius: 15px;

    background-color: var(--scondary);
}

.next{
    flex-grow: 1;

    text-align: center;
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;

    font-size: 20px;
}

.nextLecture {
    

    border-left: 4px solid #ffffff;
    flex-grow: 1;
    text-align: center;


    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;

    font-size: 20px;
}













/* ============ Footer ============ */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    padding: 10px 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);

    z-index: 1000;
}

.footer-link {
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}

.footer-link:hover {
    color: #00c8ff;
}

.divider {
    color: gray;
}