@font-face {
    font-family: roboto ;
    src: url(../font/Roboto/Roboto-Regular.ttf);
}

:root{
    --primary-col: #f0d121;
    --secondary-col: #e6ab09;
    --accent: orange;
    --font-small: 12px;
    --font-medium: 14px;
    --font-large: 18px;
    --font-huge: 50px;

}

@media  screen and (max-width:700px) {
    *{font-size: var(--font-small);}
    .mobile-hide{display: none;}
    .mobile-inline{display: block;}
    .mobile-inline > div{margin-top: 40px; width: 100%;}
}

@media  screen and (min-width:700px) {
    .desktop-hide{display: none;}  
}

.bold-header{font-weight: bold;}
.section-head{width: 400px; margin-left: 50%; transform: translate(-50%,0); margin-top:40px; text-align: center;}
.section-head h4{font-size: var(--font-huge);}

.buttonx1{padding: 5px; padding-left: 20px; padding-right: 20px;}
.buttonx2{padding: 10px; padding-left: 30px; padding-right: 30px;}
.filled-rounded{border-radius: 50px; background:linear-gradient(90deg, var(--primary-col), var(--secondary-col)); border: none;
outline: none; color: black; font-weight: bold; border: 1px solid white;}
.filled-rounded-white{border-radius: 50px; background-color: white; border: none;
    outline: none;}
.filled-rounded-black{border-radius: 50px; background-color: black; border: none;
    outline: none; color: white;}
.outline-rounded{border: none; border-radius: 50px; border: 1px solid white; 
    outline: none; color: white; background: none;}

.outline-rounded:hover{background-color: white; color: black;}