@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

/* @font-face {
    font-family:RymanEco;
    src: url("/HTML_2/assets/fonts/RymanEco-Regular.otf");
  } */

:root {
    --themecolor: #34e58a;
  }

body{
    font-family:"Source Sans Pro";
}

#hub{
    font-size: 24px;
    /* height:100vh; */
    min-height: 100vh;
    border: 1vw var(--themecolor) solid;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.logo{
    position: absolute;
    right:5%;
    top:5%;
    z-index: 1002;
    width: 10vw;
    max-width: 200px;
}
.decobox{
    position: absolute;
    overflow: hidden;
    width:24vw;
    z-index:-1;
}

.decobox.left.bottom{
    left: -3vw;
    bottom: 0;
}

.decobox.mid.right{
    right: 0;
    bottom: 19vh;
    transform: scaleX(-1);
}

.deco.mid.right{
    right: 8vw;
}

.deco{
    width: 100%; 
    position: relative;
}
    
.deco.bottom.left{
    bottom: -9vh;
}



.headerimg {
    display: block;
    margin: 5vh auto 0 auto;
    z-index: -1;
    width:calc(240px + 28vw);
    max-width: 100%;
}

.navbtn{
    text-align: center;
}

.btn-cta{
    border:none;
    border-bottom: var(--themecolor) solid 2px;
    padding:0.4em 1.8em;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(255,255,255,0.5);
    display: flex;
    flex-direction: row;
}

.buttons{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height:100%;
}

.corner{
    align-self: flex-end;
    /* top:-95px;
    right:-4px; */
    /* width:100px;
    height:100px; */
    width: 100%;
    height:100%;
    background: #5e5e5e;
    border:solid var(--themecolor) 4px; 
    border-style: none none solid none;
    /* transform: rotate(270deg); */
}
.invertion{
    /* position: absolute; */
    /* top:-4px;
    right:0px; */
    width: 100%;
    height:100%;
    background:white;
    border: solid var(--themecolor) 4px;
    border-style: hidden solid solid solid;
    border-radius: 0 0% 0 40%;
}

@media(min-width:768px){
    .buttons{
        justify-content: flex-end;
    }

    .navbtn{
        text-align: initial;
        position: absolute;
        display: flex;
        flex-direction: column;
        width: fit-content;
    }

    .furtherInfo{
        width: 40vw;
    }

    .first{
        top:52vh;
        right: 32vw; }
    .second{
        top:40vh;
        right:13vw;}
    .third{
        top:40vh;
        left: 10vw;}
    .fourth{
        bottom: 25vh;
        left: 20vw;}
    .fifth{
        bottom: 25vh;
        right: 23vw;}
    .sixth{
        bottom: 10vh;
        left: 41vw;}
    .up div{
        order:-1;
        bottom:0px;
    }
    
    .right .furtherInfo{
        align-self: flex-start;
    }

    .left .btn-cta{
        align-self: flex-end;
        justify-content: flex-end;
    }
    
    .right .btn-cta {
        align-self: flex-start;
        justify-content: flex-start;
    }
    
    .down .furtherInfo{
        /* top:-15px; */
    }
    
    .left .furtherInfo{
        align-items: flex-end;
        margin-left:auto;
    }
    
    .down.left .furtherInfo{
        border-radius: 50px 0 0 0;
    }
    .down.right .furtherInfo{
        border-radius: 0 50px 0 0;
    }
    
    .up.left .furtherInfo{
        border-radius: 0 0px 0 50px;
    }
    
    .up.right .furtherInfo{
        border-radius: 0 0px 50px 0;
    }

    .btn-cta{
        border: var(--themecolor) solid 4px;
        margin:initial;
    }
}

@media(min-width:1400px){
    .furtherInfo{
        width: 20vw;
    }
}


.furtherInfo{
position: relative;
padding:24px;
border: var(--themecolor) solid 4px;
color:white;
font-size: 11.5px;
background-color: #4d4d4d;
display: flex;
flex-direction: column;
}

.furtherInfo a{
    font-size: 1.4em;
    align-self: flex-end;
    color: white;
}

.furtherInfo a:hover i,.furtherInfo a:hover{
text-decoration: underline;
}

.in{
    z-index: 1;
}
@media(max-width:768px){
    .links{padding-top: 15vh;}
}

.links{
    color:var(--themecolor);
    margin-top: auto;
    justify-self: flex-end;
    align-self: center;
    letter-spacing: 3px;
}

.links a{
    padding: 0 0.3em;
    text-decoration: underline;
    color:var(--themecolor);
}

.links a:hover{
    color:#4d4d4d;
}

.links p{
    font-size:15px;
}
/* ---------------------Fonts------------------ */
    .navbtn {font-size: calc(24px);}
    .furtherInfo {font-size: calc(17px + 0vw);}
    .links p a{font-size: calc(14px);}

    @media (min-width:768px){
        .navbtn {font-size: calc(28px);}
    }

/*@media (min-width:1249px){
    .navbtn {font-size: calc(18px + 0.96vw);}
    .furtherInfo {font-size: calc(11.4px + 0.61vw);}
    .links a{font-size: calc(11.4px + 0.61vw);}}
*/
@media (min-width:1600px){
    .navbtn {font-size: calc(28px);}
    .links p a{font-size: calc(16.8px + 0.58vw);}
}