/*** ||||||| ***/
/*** GENERAL ***/
/*** ||||||| ***/
* {
    margin: 0 0;
    padding: 0 0;
}

/* color default palette */
:root {
    --primary-color: #FFFFFF;
    --primary-color-contrast: #000000;
    --primary-color-variant: #6D6E76;
    --primary-color-invariant: #cccc;
    --secondary-color: #276C8A;
    --secondary-color-variant: #0A3B74;
}

.go-top {
    position: fixed; 
    left: 30px; 
    top: 98%; 
    transform: translateY(-95%); 
    cursor: pointer; 
    display: block; 
    font-size: 20px;
    padding: 15px 10px;
  }

/* general container */
.page-wrapper {
	margin: auto;
    display: grid;
    grid-template: 
        "header"
        "main"
        "footer"
    ;
    width: 100%;
}

.wrapper {
    width: 20fr;
    margin-left: 0.5fr;
    margin-right: 0.5fr;
}

/*** |||||| ***/
/*** GLOBAL ***/
/*** |||||| ***/


h2 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 90;
    font-size: 36px;
}

.HIDDEN {
    opacity: 0;
    height: 0;
    width: 0;
}

.LAYER {
    position: absolute;
    height: 100%;
    width: 100%;
}

.TEXT-FOCUS {
    font-family: 'Open Sans';
}

.TEXT-READABLE {
    font-family: 'Inter';
}

.TITLE {
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 36pt;
}

.PERSPECTIVE-IMAGE {
    transition: 250ms ease-in-out;
}

.PERSPECTIVE-IMAGE:hover {
    transform: scale(1.05);
    transition: 850ms;
}

button {
    /* Button */
    padding: 15px 36px;
    margin: 5px 0;

    background: #276C8A;
    border: 2px solid #276C8A;

    font-family: 'Inter';
    font-style: light;
    font-size: 14pt; /*11*/
    /* identical to box height, or 133% */
    display: flex;
    align-items: center;
    align-items: flex-start;

    color: var(--primary-color);
    transition: 150ms;
    -webkit-transition: 150ms;
    -moz-transition: 150ms;
}

button:hover {
    border-color: var(--secondary-color);
    background-color: var(--primary-color);
    color: var(--secondary-color);
    cursor: pointer;
}

button:active {
    text-decoration: underline;
}

.main-div ul {
    padding: 0 40px;
}

.main-div ul a{
    color: black;
}

.main-div ul a:hover {
    font-weight: 600;
}