.bold-header{font-weight: bold;}
.header-detail{font-weight: normal;}
.lighter{font-weight: lighter;}
.xlarge{font-size: 45px;}
.xxlarge{font-size: 60px;}
.large{font-size:30px;}
.normal{font-size: 18px;}

.no-space{margin: 0;}

.line-horiz{width: 100%; height: 1px; margin-top: 5px; margin-bottom: 5px;
background-color: black;}
.line-vert{width: 1px; height: 100%; margin-top: 5px; margin-bottom: 5px;
    background-color: black;}

/* button size */
.button-normal{width: 150px; height: 50px;}
.button-large{width: 250px; height: 50px;}
.button-maxfill{width: 100%; height: 50px;}


/* page heads */
.section-head{margin-left: 50%; transform: translate(-50%,0); text-align: center; padding: 20px; background-color: var(--primary-col); color: white; width: max-content;
border-top-left-radius: 20px; border-bottom-right-radius: 20px;}

/*Widgets*/
.button-outlined{border:1px solid var(--accent); display: flex; justify-content: center; align-items: center;
border-radius: 10px; cursor: pointer; text-decoration: none; color: black; height: 40px;}
.button-outlined:hover{background-color: var(--accent); text-decoration: none; color: black; }

.button-outline-rounded{border:1px solid var(--accent); display: flex; justify-content: center; align-items: center;
border-radius: 50px; cursor: pointer; text-decoration: none; color: black; padding: 10px;
color: var(--accent);}
.button-outline-rounded:hover{background-color: var(--accent); text-decoration: none; color: black; }

.button-filled{background-color: var(--primary-col); display: flex; justify-content: center; align-items: center;
border-radius: 10px; cursor: pointer; column-gap: 10px; text-decoration: none;
color: white; padding: 10px;}
.button-filled:hover{background-color: var(--accent); color: black; text-decoration: none;}

.button-filled-gray{background-color: rgb(222, 222, 222); display: flex; justify-content: center; align-items: center;
    border-radius: 10px; cursor: pointer; column-gap: 10px; text-decoration: none;
    color: white; padding: 10px;}
.button-filled-gray:hover{background-color: black; color: white; text-decoration: none;}

.divider-snowflakes{display: flex; justify-content: center; align-items: center; column-gap: 10px;}
.divider-snowflakes i:nth-child(2){font-size: 20px;}

.round-btn{width: 50px; height: 50px; border-radius: 50%; background-color: var(--background); color: white;
text-align: center; display: flex; justify-content: center; align-items: center;
flex-shrink: 0;}

.round-btn:hover i{transform: rotateZ(360deg); transition: 0.4s;}

@keyframes slide{
    from{transform: translate(0,0)}
    to{transform: translate(-200px,0)}
}

@keyframes spin{
    from{transform: rotateZ(0deg)}
    to{transform: rotateZ(360deg)}
}

@keyframes sinwave{
    0%{transform: translate(0,0)}
    50%{transform: translate(0,-10px)}
    100%{transform: translate(0,0)}
}