@font-face {
    font-family: "Inter";
    src: url("Inter.ttf") format("truetype");
  }

:root{
    --bg-color: #d3cecf;
    --normal: #2b2c2c;
    --nav: #e0ddde;
    --text-color: #262B2A;
    --text-color-light: #f1e2e0;
    --blue: #286c99;
    --red: #71323d;
    --red2: #57262e;
    --red3: #461e24;
    --green: #328a60;
    --blue-l: #b4d0e2;
    --red-l: #eed3cf;
    --green-l: #ade4b2;

}

.flex-wrapper{
    display: flex;
    flex-direction: row;
    gap: 0px;
}

body{
    background-color: var(--bg-color);
    margin: 0 auto;
    font-family: "Inter", "Verdana", sans-serif;
    font-size: 12pt;
    font-weight: 300;
    color: var(--text-color);
}

h1, h2, h3, h4, p{
    margin: 0;
}

a{
    color: var(--text-color);
    text-decoration: none;
    transition: 0.1s;
}

a:hover{
    transition: 0.1s;
    font-weight: 900;
}

nav ul a{
    font-size: 12pt;
    font-weight: 600;
}

.logo{
    height: 170px;
}

nav{
    top: 0;
    left: 0;
    position: fixed;
    min-width: 150px;
    height: calc(100vh - 20px);
    padding-top: 20px;
    /*border-right: 1px solid var(--grey4);*/
    background-color: var(--nav);
}

nav ul{
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 25px;
    height: 95%;
}

nav li {
    border-radius: 5px;
    background-color: var(--grey4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
}

.label-bottom{
    margin-top: auto;
}

.label-active{
    font-weight: 900;
}

.index{
    background-color: var(--bg-color);
}

.programme{
    background-color: var(--red);
}

.keynotes{
    background-color: var(--blue);
}

.about{
    background-color: var(--green);
}

.page{
    display: inline-block;
    min-height: calc(100vh - 100px);
    height: auto;
    margin-left: 150px;
    width: 1100px;
    padding: 50px;
}

.page::before{
    position: fixed;
    content: "";
    height: 40px;
    width: 40px;
    background-color: inherit;
}

.index::before{
    display: none;
}

.keynotes::before{
    transform: translateX(-55px) translateY(217px) rotate(45deg);
}

.programme::before{
    transform: translateX(-55px) translateY(171px) rotate(45deg);
}

.about::before{
    transform: translateX(-55px) translateY(261px) rotate(45deg);
}

.page h1, .page h2, .page h3, .page h4, .page p{
    margin: 15px 5px 15px 5px;
    color: var(--text-color-light);
}

.index h1, .index h2, .index h3, .index h4, .index p{
    color: var(--text-color);
}

.page h1{
    font-size: 28pt;
    font-weight: 1000;
}

.extra-margin-top{
    margin-top: 45px !important;
}

.meta-p{
    column-count: 3;
    column-gap: 20px;
}

.index-p{
    column-count: 1;
    column-gap: 20px;
    max-width: 400px;
}

.programme-p{
    column-count: 1;
    column-gap: 20px;
    max-width: 400px;
}

.programme-p p{
    margin: 5px 10px 5px 20px;
}

.no-top-margin{
    margin-top: 0 !important;
}

.page p{
    hyphens: auto;
    text-align: justify;
}

.nav-highlight{
    color: var(--nav);
    background-color: var(--text-color);
    outline: 1px solid var(--nav);
    padding: 5px 12px 5px 12px;
    border-radius: 5px;
    font-weight: 600 !important;
    transition: 0.1s;
    max-width: 85px;
    text-align: center;
}

.nav-highlight:hover{
    color: var(--text-color);
    background-color: var(--nav);
    outline: 1px solid var(--text-color);
    font-weight: 600 !important;
    padding: 5px 12px 5px 12px;
    transition: 0.1s;
}

.attention{
    display: none;
    position: absolute;
    height: 15px;
    width: 10px;
    transform: translateY(-35px);
    background-color: var(--red);
    padding: 7px;
    font-weight: 1000;
    font-size: 14pt;
    border-radius: 5px;
    animation: MoveUpDown 1.2s ease-in-out infinite;
}

.attention:hover{
    cursor: pointer;
}

.attention-icon{
    mask: url('data:image/svg+xml,<svg id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.16 150.5"><g><rect class="cls-2" x="49.67" y="20.13" width="14.81" height="61.63" rx="7.26" ry="7.26"/><rect class="cls-2" x="49.67" y="90.13" width="14.81" height="15.63" rx="7.26" ry="7.26"/></g><path class="cls-1" d="m91.92,0H22.23C9.97,0,0,9.97,0,22.23v81.53c0,12.26,9.97,22.23,22.23,22.23h8.15l26.7,24.5,26.7-24.5h8.15c12.26,0,22.23-9.97,22.23-22.23V22.23c0-12.26-9.97-22.23-22.23-22.23Zm16.23,103.77c0,8.95-7.28,16.23-16.23,16.23H22.23c-8.95,0-16.23-7.28-16.23-16.23V22.23c0-8.95,7.28-16.23,16.23-16.23h69.69c8.95,0,16.23,7.28,16.23,16.23v81.53Z"/></svg>') no-repeat 100% 100%;

}

@keyframes MoveUpDown {
    50% {transform: translateY(-40px)}
}

.text-bg{
    opacity: 0.5;
}

.programme-single-day{
    padding: 5px 15px 15px 15px;
}

.border-radius-top{
    border-radius: 5px 5px 0px 0px;
}

.border-radius-bot{
    border-radius: 0px 0px 5px 5px;
}

.reg{
    background-color: var(--red2);
}

.irreg{
    background-color: var(--red3);
}

.programme-time{
    margin-right: 55px;
}

.programme-dates{
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.activities-heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cfp-outline-box{
    width: 300px;
    padding: 25px;
    background-color: var(--green);
    border-radius: 5px;
    margin: 5px 15px 15px 5px;
}

.cfp-outline-box p{
    margin: 0;
    font-weight: 600;
    font-size: 14pt;
    color: var(--nav);
    text-align: center;
}