:root{
    --primary: #00a367;
    --secondary: #00b8e6ff;
    --tertiary: #230074ff;
    --fontSize: 1.125rem;
    /*
        #00862d
        #008b60
        #008d90
        #008bb5
        #0086ca
        #337dcd
    */    
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
    font-family: 'Noto Serif'; 
}


a:hover {
    cursor: pointer;
}

@media screen and (max-width:1200px){
    :root{
        --fontSize:1rem;
    }
}
html{
    font-size: var(--fontSize);
    scroll-behavior: smooth;
}
body.unscrollable {
        max-height: 100vh;
        overflow-y: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Noto Sans';
}
h1{
    font-size: 2.25rem;
    font-weight:600;
}
h2{ 
    font-size: 1.75rem;
    font-weight:600;
    margin-bottom:2rem;
}
h3{
    font-size: 1.375rem;
    font-weight: 500; 
}
h4{
    font-size: 1.25rem;
    font-weight:500;
}
h5{
    font-size: 1.25rem;
} 
a{text-decoration:none;}
button{
    border-radius: 4px; 
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease ;
    box-shadow: none;
    top:0px;
    font-size:inherit;
}
button:hover{
    cursor: pointer;
    -webkit-box-shadow: 0px 10px 8px -4px rgb(139, 139, 139); 
    box-shadow: 0px 10px 8px -4px rgb(139, 139, 139);
    transform: translateY(-5%);
    top:-3px; 
}
button:hover > .expand-icon {
    transform: rotateZ(90deg);
}
.expand-icon {
    background-repeat: no-repeat;
    background-position: right 30%;
    background-size: contain;
    width: 14px;
    height: 14px;
    display: inline-block;
    padding-left: 0.25rem;
    transition:transform 0.2s ease;
}
 
.primary-button{
    background-color: var(--primary);
    border:none;
    color:white;
    padding:0.5rem 2rem;
    margin:1.5rem 0;
}
.secondary-button{
    border: 1px solid var(--primary);
    color: var(--primary);
    padding:0.5rem 2rem;
    margin:1.5rem 0;
}
.primary-button-secondary-color{
    background-color: var(--secondary);
    border: none;
    color: white;
    padding: 0.5rem 2rem;
    margin: 1.5rem 0.5rem;
}
.secondary-button-secondary-color{
    border: 2px solid var(--tertiary);
    color: var(--tertiary);
    padding:0.5rem 2rem;
    margin:1.5rem 0;
}



.article:last-child{
    margin-bottom:0 !important;
}
@media screen and (max-width:768px){
    h1{ 
        font-size: clamp(1.5rem, calc(0.8rem + 5vw), 2.25rem);    
    }
    h2{
        font-size: clamp(1.375rem, calc(0.7rem + 3.75vw), 1.75rem); 
    }
}